文章目录
display属性的支持情况display属性的作用display属性值默认值 inlinenoneblockinline-blocklist-itemrun-intableinline-tabletable-row-grouptable-header-grouptable-footer-grouptable-rowtable-column-grouptable-columntable-celltable-captioninheritdisplay属性的支持情况
现在所有主流浏览器都支持该属性。
如果规定了 !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 属性的值。
