理解display:inline、block、inline-block

要理解display:inline、block、inline-block的区别，需要先了解HTML中的块级（block）元素和行级（inline）元素的特点，行内元素也叫内联元素。

• 块级元素

总是另起一行开始；
高度，行高以及顶、底边距都可以控制；
宽度缺省是它所在容器的100%，除非设定一个宽度。
块级元素通常作为其他元素的容器，可以容纳内联元素和其他块元素。block element的HTML标签如下：
address-地址
blockquote-块引用
center-居中对齐块
div-常用块级元素
dl-定义列表
form-交互表单
fieldset-form控制组
hr-水平分隔线
ol-排序表单
ul-非排序列表
dir-目录列表
p-段落
pre-格式化文本
isindex-input prompt
menu-菜单列表
table-表格
h1...h6-标题
noframes-frames可选内容（对于不支持frame的浏览器显示此区块内容）
noscript-可选脚本内容（对于不支持script的浏览器显示此内容）

• 行级元素

和其他元素都在一行上；
高度，行高以及顶、底边距不可改变；
高度就是它所容纳的文字或图片的宽度，不可改变。
一般都是基于语义级（semantic）的基本元素，只能容纳文本或者其他内联元素，内联元素的HTML标签分类如下：

a-锚点
abbr-缩写
acronym-首字
font-字体设定（不推荐）
b-粗体（不推荐）
big-bidi override
em-强调
br-换行
small-小字体文本
strong-粗体强调
i-斜体
img-图片
input-输入框
label-表格标签
select-项目选择
textarea-多行文本输入框
u-下划线
var-定义变量
cite-引用
code-计算机代码（在引用源码的时候需要）
dfn-定义字段
kbd-定义键盘文本
q-短引用
s-中划线（不推荐）
strike-中划线
sub-下标
sup-上标
tt-电传文本

HTML中有些元素是可变元素，可根据上下文语境决定该元素为块元素或者内联元素。

applet-java applet
button-按钮
del-删除文本
iframe-inline frame
ins-插入的文本
map-图片区块（map）
object-object对象
script-客户端脚本

 

display:block就是将元素显示为块级元素，display:inline则将元素显示为行内元素。

display：inline-block将元素显示为行内元素，但是元素的内容作为块元素处理。旁边的内联元素和该对象显示在同一行，并且允许空格，但是该元素具有块元素的特性，可以设置其高度，宽度等属性。在同一行内有不同高度内容的元素时，通常要设置对齐方式如vertical-align: top;来使元素顶部对齐。

• 兼容性

CSS中使用display:inline-block;来样式化，在Firefox, Safari, Google Chrome 和 IE 8及以上是有效的。但是在早期的IE，比如IE 7，对行内元素设置inline-block无法实现inline-block的效果。只是触发了块元素的layout，而行内元素本身就是行布局，所以触发后，依然是行布局。

对IE8以下的版本，可以采用以下两种方法来实现inline-block的效果：

1. 先用display:inline-block属性触发块元素，然后再定义display:inline，让块元素呈递为内联对象（原理：这是IE的一个经典bug，如果先定义了display:inline-block，然后再设置display回inline或block，layout不会消失），代码如下：

   1 div {display:inline-block;}
   2 div {display:inline;}

    

2. 将块元素设置为内联对象(display:inline)，然后通过zoom:1触发块元素的layout，代码如下：

   div {
   display:inline; 
   zoom:1;
   }

    

     参考了http://www.cnblogs.com/jdonson/archive/2011/06/10/2077932.html，和一些网上的资料，算是平时一点平时的学习总结吧！

转载于:https://www.cnblogs.com/linxuehan/p/3604645.html