详解CSS——display各个属性值（带例子）

文章目录

display属性的支持情况
display属性的作用
display属性值
- 默认值 inline
- none
- block
- inline-block
- list-item
- run-in
- table
- inline-table
- table-row-group
- table-header-group
- table-footer-group
- table-row
- table-column-group
- table-column
- table-cell
- table-caption
- inherit

display属性的支持情况

现在所有主流浏览器都支持该属性。
如果规定了 !DOCTYPE，则 Internet Explorer 8 （以及更高版本）支持属性值 “inline-table”、“run-in”、“table”、“table-caption”、“table-cell”、“table-column”、“table-column-group”、“table-row”、“table-row-group”、以及 “inherit”。

display属性的作用

display属性规定了元素以何种方式展示

display属性值

该属性不支持继承！ （其实想想也知道，如果支持继承的话，一个div框内的span框都是块级元素了，就违背了span的初衷了）

默认值 inline

此元素会被显示为内联元素，元素前后没有换行符。设置width,height,margin-top,margin- bottom,padding-top,padding-bottom无效；
内联元素不能设置宽高，但这也不是绝对的。
html标签中有部分标签，例如：<span/>、<a>、<em>、<img>、<input>、<label>等等都是内联元素，默认display属性均为inline，但是<img>、<input>标签的元素却可以设置宽高！因为它有内在尺寸，所以具有width和height，可以设定。

none

此元素不会被显示。
经常会考到，display:none与visibility: hidden有什么区别？

都是看不见元素，但是display:none意思是不展示这个元素，该元素不占据空间，
而visibility: hidden只是将该元素隐藏了，只是用户不可见而已，占据页面空间

block

此元素将显示为块级元素，此元素前后会带有换行符。
块状元素可以设置宽高。
html标签中有部分标签，例如：<div>、<p>、<ol>等等，其display属性默认为block

inline-block

行内块元素，结合了inline、block的特点，此元素前后没有换行符，可以设置宽高。

list-item

此元素会作为列表显示。
html标签中：<li> display属性默认为list-item
其它标签设置了这个属性后，就可以将其当做<ul>标签来使用了，可以设置其list-style。

run-in

此元素会根据上下文作为块级元素或内联元素显示。
这个属性从来没用过，还特地去了解了一下，看起来是个很厉害的属性，我还花了时间去测了一下，发现Chrome已经不支持该属性了，连chrome都不支持了，也木有必要深究了！

table

此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。
可能有的人会纳闷，有现成的table标签不用，为什么要设置display:table呢？
display：table解决了一部分需要使用表格特性但又不需要表格语义的情况。比如以下两种情况：

父元素宽度固定，想让若干个子元素平分宽度
这里可以使用百分比来实现，但是百分比不一定能够整除，使用display:table就不用有这种烦恼了，如下：

<style>.par{border: 1px solid black; display: table;width: 400px;}.son{display: table-cell;border: 1px solid black; }</style>
<body>
<div class="par"><div class="son">son</div><div class="son">son</div><div class="son">son</div>
</div>
</body>

效果如下：

块级子元素垂直居中
方法有很多，网上一找一堆，display:table也可以实现，不过会有一些弊端，先来看例子吧：

<style>.par{display: table;width: 200px;height: 100px;text-align: center;}.son{display: table-cell;border: 1px solid black; vertical-align: middle;}</style>
<body>
<div class="par"><div class="son">son</div>
</div>

效果如下：

我只给了son设置了边框，却显示在了和par一样宽高了，好像就是par的宽高一样。手动设置par的padding，son的宽高margin都没用，这就是display:table的弊端了：
（1）display: table时padding会失效
（2）display: table-row时margin、padding同时失效
（3）display: table-cell时margin会失效

inline-table

此元素会作为内联表格来显示（类似

），表格前后没有换行符。
inline-table一般很少用到（ie6、7不支持这个样式），表格属于block类型，独占一行，如果想要文字跟它一行显示，就要把表格设置成inline-table。
有一篇博客说：“safari及chrome垂直对齐方式为底部对齐，火狐和ie及Opera是顶部对齐”。可是我实际去测试的时候发现，IE、Opera、Chrome、Firefox对齐方式都是顶部对齐的，我们可以通过vertical-align去修改对齐方式。
举个例子：

<div><span>span</span><div style="display: inline-table;border:1px solid black;"><div>table son</div><div>table son</div><div>table son</div></div></div>

IE、Opera、Chrome、Firefox中表现如下：

table-row-group

此元素会作为一个或多个行的分组来显示（类似）。

table-header-group

此元素会作为一个或多个行的分组来显示（类似）。

table-footer-group

此元素会作为一个或多个行的分组来显示（类似）。

table-row

此元素会作为一个表格行显示（类似）。

table-column-group

此元素会作为一个或多个列的分组来显示（类似）。

table-column

此元素会作为一个单元格列显示（类似）

table-cell

此元素会作为一个表格单元格显示（类似和）

这个值会触发BFC布局
可参见我的博客深入理解BFC

table-caption

此元素会作为一个表格标题显示（类似）

这个值会触发BFC布局
可参见我的博客深入理解BFC

inherit

规定应该从父元素继承 display 属性的值。