display属性用来设置或检索对象是否及如何显示
默认值:对于HTML文档来说,这取决于你使用的标签
继承性:不继承
支持动画:否
display是一个很重要的CSS属性,设定的值会对一个HTML元素的内部和外部表现造成影响
值列表:
none:不显示该元素
给display设置none,浏览器就不会渲染该元素,虽然元素存在DOM中,可以通过JS访问,但是从视觉上,是完全消失。
block:块级元素
最常用的值了,设置block会让元素变得如DIV那样,独占一行
inline:内联元素
<span>等标签的默认值,内联元素总是一个接一个的排列,没法设置width和height属性,边距的表现也和block不同
inline-block:内联块级元素
从名字上就可以看出来,该值复合inline和block的一些特性,可以这么说,inline-block,就是不独占一行的block
flex:伸缩盒
对于其他元素来说,一个display为flex的元素和block没有任何区别,但对设置了该值的元素内部,就很有趣了
inline-flex:伸缩盒
同于flex,对其他元素来说,设置了display为inline-flex的元素和一个正常的inline没有区别,影响仅仅在元素的内部
list-item:列表项目
如同<li>标签那样子
接下来是table系列
table:表格
如同<table>标签那样
inline-table
table值的inline-block版本
table-row:行
类似<tr>
table-cell:单元格
类似<td>
table-row-group:指定对象作为表格行组。
类似于标签<tbody>
table-column:表格列。
类似于标签<col>
table-column-group:表格列组显示。
类似于标签<colgroup>
table-header-group:表格标题组。
类似于l标签<thead>
table-footer-group:表格脚注组。
类似于<tfoot>
对display属性的一些理解:
display属性对元素有两个方面的影响
一是元素外在表现,也就是说,对兄弟元素和父元素的影响
二是元素的内在表现,也就是说,不同的display值,元素是如何对待它的子元素的。
比如说,把一个元素的display设置为flex,那么对于元素内在表现来说,渲染方式完全变了,而对于其他的兄弟元素,父元素来说,该元素和block,table没有任何区别。
所以说,这么多的属性值,最基本的就是inline,block,inline-block这三个值,内在表现各有千秋,但是外在表现都由这三个来表现的。