display属性(CSS设置)
display属性(CSS设置)
display特点的支撑情况
现在所有主流浏览器都支撑该特点。
假如规则了!DOCTYPE，则InternetExplorer8（以及更高版本）支撑特点值“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标签中有部分标签，例如：、、、、、等等都是内联元素，默许display特点均为inline，可是、标签的元素却能够设置宽高！由于它有内涵尺寸，所以具有width和height，能够设定。
none
此元素不会被显现。
常常会考到，display:none与visibility:hidden有什么区别？
都是看不见元素，可是display:none意思是不展现这个元素，该元素不占有空间，
而visibility:hidden仅仅将该元素躲藏了，仅仅用户不可见罢了，占有页面空间
block
此元素将显现为块级元素，此元素前后会带有换行符。
块状元素能够设置宽高。
html标签中有部分标签，例如：
、
、
等等，其display特点默许为block
inline-block
行内块元素，结合了inline、block的特点，此元素前后没有换行符，能够设置宽高。
list-item
此元素会作为列表显现。
html标签中：
display特点默许为list-item
其它标签设置了这个特点后，就能够将其当做
标签来运用了，能够设置其list-style。
run-in
此元素会根据上下文作为块级元素或内联元素显现。
这个特点从来没用过，还特别去了解了一下，看起来是个很厉害的特点，我还花了时刻去测了一下，发现Chrome现已不支撑该特点了，连chrome都不支撑了，也木有必要深究了！
table
此元素会作为块级表格来显现(相似),表格前后带有换行符。
可能有的人会纳闷，有现成的table标签不必，为什么要设置display:table呢？
display：table处理了一部分需要运用表格特性但又不需要表格语义的情况。比方以下两种情况：
父元素宽度固定，想让若干个子元素平分宽度
这儿能够运用百分比来实现，可是百分比不一定能够整除，运用display:table就不必有这种烦恼了，如下：
son
son
son
作用如下：
块级子元素笔直居中
办法有许多，网上一找一堆，display:table也能够实现，不过会有一些弊端，先来看比如吧：
son
作用如下：
我只给了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去修改对齐办法。
举个比如：
span
tableson
tableson
tableson
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特点的值。
作品标签： CSS
优秀作品：
最新作品：
