CSS属性之display

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这三个值，内在表现各有千秋，但是外在表现都由这三个来表现的。