文章目录
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 属性的值。