共计 1881 个字符，预计需要花费 5 分钟才能阅读完成。
css 的 display 属性是前端开发中非常常见的属性，本文简单介绍下其中比较常用的属性值，即 block、inline 和 inline-block。
HTML 组件中呈现一片空白区域的组件都可当盒模型（box modal），而 CSS 则提供了 display 属性来控制盒模型的外观。
1. block 类型（块）
这种盒模型的组件默认占据一行，允许通过 CSS 设置宽带、高度。
例如：<div …/>、<p ../.>、<form../>、<table../、<h1> 到 <h6>、<ul../> 等。
display：blockblock 元素会独占一行，多个 block 元素会各自新起一行。默认情况下，block 元素宽度会自动填满其父元素的宽度。block 元素可以设置 width,height 属性。块级元素及时设置了宽度，仍然是独占一行。block 元素可以设置 margin 和 padding 属性。
2. inline 类型（内联）
这种盒模型的组件不会占据一行，不可以调整宽度、高度。
例如：<span../>、<a../> <strong../>、<em../>、<label../>、<input../>、<select../>、<textarea../>、<img../>、<br../>。
CSS 为 display 属性提供了 block、inline 两个属性值，可以改变 HTML 组件默认的盒模型。
display：inline
inline 元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
inline 元素设置 width,height 均无效。
inline 元素的 margin 和 padding 属性，水平方向的 padding-left、padding-right、margin-left、margin-right 都产生边距效果，但竖直方向上的 padding-top、padding-bottom、margin-top 和 margin-bottom 不会产生边距效果。
3. inline-block 类型
CSS 还提供了一种 inline-block 盒模型，这种盒模型时 inline 模型和 block 模型的综合体：inline-block 盒模型的元素不会占据一行，同时也支持 width、height 指定指定宽带及高度。并且允许它的左边和右边出现其他内容。
display:inline-block
简单来说就是将对象呈现为 inline 对象，但是对象的内容作为 block 对象呈现。之后的内联元素会被排列在同一行内。比如可以给一个 link（<a> 元素 )inline-block 属性，使其既有 block 的宽度高度特性、又具有 inline 的可同行性。
应用场合
很多时候我们必须让一些块元素并排显示，一般会想到浮动，但是块元素浮动设边距的时候在 IE 下会出现加倍的 BUG，所以很多时候不得不把这个块元素套在一个内联元素里，然后给这个内敛元素浮动和边距。通过设置：display：inline-block，就将对象呈递为内联对象，但对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。
说明：
block 元素可以包含 block 元素和 inline 元素，但 inline 元素只能包含 inline 元素。要注意这个是一个大概的说法，每个特定的元素能包含的元素也是特定的，所以具体到个别元素上，这条规律是不适用的。比如 p 元素，只能包含 inline 元素，而不能包含 block 元素。
一般来说，可以通过 display:inline 和 display：block 的设置来改变元素的布局级别。
兼容性问题：IE6、IE7 不支持 inline-block，所以在 IE 中对内联元素使用 display：inline-block 理论上 IE 是不识别的，但会在 IE 下触发 layout，从而使内联元素拥有了 display：inline-block 属性的表象。
解决 IE6、IE7 兼容性的方法：
首先设置 inline-block 触发块元素，具有了 layout 的特性，然后设置 display:inline 使块元素呈现内联元素，此时 layout 的特性不会消失。
直接设置 display：inline，使用 zoom:1 触发 layout。兼容所有浏览器的方法是：
.selector {
display : inline-block;
*display : inine;
*zoom:1;
}
本文只列出了 display 常见的三个属性，除此之外，display 的属性值还有：inline-table、和表格相关的盒模型、list-item、run-in 等。
