文档章节

CSS中display:inline、block、inline-block的区别

kenneth5530
 kenneth5530
发布于 2014/06/29 14:23
字数 599
阅读 17
收藏 0
点赞 0
评论 0

block:

1.总是在新行上开始;
2.高度,行高以及顶和底边距都可控制;
3.宽度缺省是它的容器的100%,除非设定一个宽度
例子: <div>, <p>, <h1>, <form>, <ul> 和 <li>的块元素

inline:就是将元素显示为行内元素.

1.和其他元素都在一行上;
2.高,行高及顶和底边距不可改变;
3.宽度就是它的文字或图片的宽度,不可改变。
inline元素的例子:<span>, <a>, <label>, <input>, <img>, <strong> 和<em>。

inline和block可以控制一个元素的行宽高等特性,需要切换的情况如下:让一个inline元素从新行开始;
1.让块元素和其他元素保持在一行上;
2.控制inline元素的宽度(对导航条特别有用);
3.控制inline元素的高度;
4无须设定宽度即可为一个块元素设定与文字同宽的背景色。

inline-block:将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。

IE下块元素如何实现display:inline-block的效果?

有两种方法:
  1、先使用display:inline-block属性触发块元素,然后再定义display:inline,让块元素 呈递为内联对象(两个display要先后放在两个CSS声明中才有效果,这是IE的一个经典bug,如果先定义了display:inline- block,然后再将display设回inline或block,layout不会消失)。代码如下(...为省略的其他属性内容):

  div {display:inline-block;...}
  div {display:inline;}

  2、直接让块元素设置为内联对象呈递(设置属性display:inline),然后触发块元素的layout(如:zoom:1等)。代码如下:

  div {display:inline; zoom:1;...}

     例子:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>display:inline、block、inline-block的区别</title>
</head>
<style>
div,span{background-color:green;margin:5px;border:1px solid #333;padding:5px;height:52px;color:#fff;}
.b{display:block;}
.i{display:inline;}
div.ib{display:inline-block;}
div.ib{display:inline;}
a.ib{display:inline-block;}
a.ib{display:block;}
span.v{padding:0;margin:0;border:0;vertical-align:middle;height:100%}
</style>
<body>
<div>div display:block</div>
<div class="i">div display:inline</div>
<div class="ib">div display:inline-block</div>
<span>span display:inline</span>
<span class="b">span display:block</span>
<span><a class="ib">a display:block</a></span><br />
<div><span class="v"></span>vertical-align:middle</div>
</body>
</html>





© 著作权归作者所有

共有 人打赏支持
kenneth5530
粉丝 1
博文 16
码字总数 6639
作品 0
成都
程序员
应不应该使用inline-block代替float

本文由99根据Steven Bradley的《Should You Use Inline-Blocks As A Substitute For Floats?》所译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点。如需转载此...

石佛慈悲 ⋅ 2013/12/08 ⋅ 2

inline-block 前世今生

曾几何时,display:inline-block 已经深入「大街小巷」,随处可见 「display:inline-block; display:inline; zoom:1; 」这样的代码。如今现代浏览器已经全面支持这个属性值了,上面的代码只是...

GIFCOOL ⋅ 2012/09/04 ⋅ 0

使用inline-block代替float

CSS布局创建网站,浮动绝对占据了很大的比例.大块区域如主内容及侧边栏,以及在其中的小块区域,都可以看到浮动的影子.这里浮动是唯一的解决方案吗? 浮动通常表现正常,但有时候搞起来会很纠结。...

姚欣炜 ⋅ 2014/05/27 ⋅ 0

CSS中 inline、block、inline-block的区别

我们用firbug浏览别人网站时会发现设计者会在很多地方使用inline-block。我们都知道inline是声明div是内联对象,block是声明块对象,那么inline-block是什么意思,即内联又成块?接下来做个测...

喜欢敲代码的感觉 ⋅ 2014/10/20 ⋅ 0

[CSS]详解display:inline | block |inline-block的区别

[CSS]详解display:inline | block |inline-block的区别【点评网站】【发布新闻】【申请专栏】【文章招领】 www.8tops.com 2007-5-18 9:59:47发布:郭文 媒体:原创 作者:郭文 display:inli...

xcntime ⋅ 2010/08/11 ⋅ 0

CSS中display属性知识要点详解

今天,再来给大家介绍下display的相关知识,同时也涉及到css3 中display相关知识,感兴趣的朋友一起学习吧! display默认值:inline display其它值及对应的说明: none:隐藏对象。与visibil...

罗马教堂的钟声 ⋅ 2015/12/25 ⋅ 0

快切——响应CSS框架发布 v1.2 版本

快切(kuai.qietu.com)讯:快切css源自最早的quickcss框架,它的目的是减少你的css开发时间。它提供一个可靠的css基础去创建你的项目,能够用于网站的快速设计,通过重设和重建浏览器标准,可...

tyshymy ⋅ 2014/09/29 ⋅ 12

js中的return false为什么函数不返回

js写的验证,但是return false;执行了,函数不返回。求大神帮帮忙,多谢了。代码如下: function verification() { var flag = true; var time=new Date().getTime(); if($("#trainName").l...

g084120209 ⋅ 2016/09/29 ⋅ 3

IE6/IE7下:inline-block解决方案

IE6/IE7下:inline-block解决方案 IE6/IE7下对display:inline-block的支持性不好。 1、inline元素的display属性设置为inline-block时,所有的浏览器都支持; 2、block元素的display属性设置为...

LorinLuo ⋅ 2016/03/31 ⋅ 0

CSS 中如何把 Span 标签设置为固定宽度

一、形如ABC独立行设置SPAN为固定宽度方法如下: span {width:60px; text-align:center; display:block; } 实际验证结果:IE6 OK, FIREFOX 3 OK。 一、形如ABCDEF格式行设置SPAN为固定宽度的...

小编辑 ⋅ 2011/10/28 ⋅ 7

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Java Web如何操作Cookie的添加修改和删除

创建Cookie对象 Cookie cookie = new Cookie("id", "1"); 修改Cookie值 cookie.setValue("2"); 设置Cookie有效期和删除Cookie cookie.setMaxAge(24*60*60); // Cookie有效时间 co......

二营长意大利炮 ⋅ 今天 ⋅ 0

【每天一个JQuery特效】淡入淡出显示或隐藏窗口

我是JQuery新手爱好者,有时间就练练代码,防止手生,争取每天一个JQuery练习,在这个博客记录下学习的笔记。 本特效主要采用fadeIn()和fadeOut()方法显示淡入淡出的显示效果显示或隐藏元...

Rhymo-Wu ⋅ 今天 ⋅ 0

Spring JDBC使用方法

普通实现: 1、创建数据表customer。 可以使用任何数据库实现,在项目中要引入相应数据库驱动包并配置相应数据库连接。 2、创建Customer pojo。 Customer类的属性对应数据库的属性,除了为每...

霍淇滨 ⋅ 今天 ⋅ 0

Contos 7 安装Jenkins

Jenkins是一款能提高效率的软件,它能帮你把软件开发过程形成工作流,典型的工作流包括以下几个步骤 开发 提交 编译 测试 发布 有了Jenkins的帮助,在这5步中,除了第1步,后续的4步都是自动...

欧虞山 ⋅ 今天 ⋅ 0

revel

revel install go get github.com/revel/revelgo get github.com/revel/cmd create new app revel new git.oschina.net/zdglf/myapp run app revel run git.oschina.net/zdglf/myapp ot......

zdglf ⋅ 今天 ⋅ 0

49. Group Anagrams - LeetCode

Question 49. Group Anagrams Solution 思路:维护一个map,key是输入数组中的字符串(根据字符排好序) Java实现: public List<List<String>> groupAnagrams(String[] strs) { Map<Strin......

yysue ⋅ 今天 ⋅ 0

spring Email

使用spring发Email其实就是使用spring自己封装携带的一个javamail.JavaMailSenderImpl类而已。这个类可以当一个普通的java对象来使用,也可以通过把它配置变成spring Bean的方式然后注入使用...

BobwithB ⋅ 今天 ⋅ 0

spark 整理的一些知识

Spark 知识点 请描述spark RDD原理与特征? RDD全称是resilient distributed dataset(具有弹性的分布式数据集)。一个RDD仅仅是一个分布式的元素集合。在Spark中,所有工作都表示为创建新的...

tuoleisi77 ⋅ 今天 ⋅ 0

思考

时间一天天过感觉自己有在成长吗?最怕的是时光匆匆而过,自己没有收获!下面总结下最近自己的思考。 认识自己 认识另一个自己,人们常说要虚心听取别人意见和建议。然而人往往是很难做到的,...

hello_hp ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部