CSS 属性篇(七)：Display属性

1、display属性介绍

display 属性规定元素应该生成的框的类型。

如下是一些关于display比较经常使用的属性值：

值	描述
none	元素不会显示
block	此元素将显示为块级元素，此元素先后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素先后没有换行符。
line-block	行内块元素。（CSS2.1 新增的值）[IE6/7不支持]
list-item	此元素会做为列表显示。
inline-table	此元素会做为内联表格来显示（相似 table），表格先后没有换行符。
table	此元素会做为块级表格来显示（相似 table），表格先后带有换行符。
table-row	此元素会做为一个表格行显示（相似 tr）。
table-cell	此元素会做为一个表格单元格显示（相似 td 和 th）.
inherit	规定应该从父元素继承 display 属性的值。

其中咱们在前端开发中比较经常使用的属性值通常是none、block、inline、inline-block。我将按顺序为这些属性值一一讲解。

2、display:none

1. 将元素与其子元素从普通文档流中移除。这时文档的渲染就像元素历来没有存在过同样，也就是说它所占据的空间消失了。元素的内容也会消失。

3、display:block

1. block元素会独占一行，多个block元素会各自新起一行。默认状况下，block元素宽度自动填满其父元素宽度；
2. block元素能够设置margin和padding属性；
3. block元素能够设置width、height属性。
4. 块级元素即便设置了宽度，仍然是独占一行。块级元素在设置宽度的状况下，是经过自定义margin-right来自动填满一行，这个时候你设置margin-right是无效的；块级元素在没有设置宽度的时候，margin-right会生效，块级元素的width经过自定义在自动填满一行。

块级元素在设置宽度的状况下，是经过自定义margin-right来自动填满一行，这个时候你设置margin-right是无效的，以下图所示：

---

块级元素在没有设置宽度的时候，margin-right会生效，块级元素的width经过自定义在自动填满一行，以下图所示：

---

4、display:inline

1. inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化；
2. inline元素设置width、height属性无效；
3. inline元素的margin和padding属性，水平方向的padding-left、padding-right、margin-left、margin-right都产生边距效果；但竖直方向的padding-top、padding-bottom、margin-top、margin-bottom不会产生边距效果。

以下图所示：

---

5、display:inline-block

1. 将对象呈现为inline对象，可是对象的内容做为block对象呈现，以后的内联对象会被排列在同一行内。就是集合了block和inline的所有优势。width、height、margin、padding设置都会生效。

以下图所示：