menu
more_vert
CSS属性之display

作者:dayu

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

CSS属性之display

原文地址:http://www.cnblogs.com/splitgroup/p/7252540.html