元素的基础属性之display

作者：

2016-07-29 16:57:30

427

display

dispaly 属性规定了元素应该生成的类型

这个属性决定了元素的显示形态，每个元素都默认带有这个属性，分别为block / inline。

所有主流浏览器都支持dispaly这个属性

默认值	inline
继承性	no
javascript 语法	object.style.display=”inline”

值（value）	描述
none	此元素不会被显示
block	此元素将显示为块级元素
inline	默认。此元素会被显示为内联元素
inline-block	行内块元素
list-item	此元素会作为列表显示
run-in	此元素会根据上下文作为块级元素或内联元素显示
table	此元素会作为块级表格来显示（类似 <table>）
inline-table	此元素会作为内联表格来显示（类似 <table>）
table-row-group	此元素会作为一个或多个行的分组来显示（类似 <tbody>）
table-header-group	此元素会作为一个或多个行的分组来显示（类似 <thead>）
table-footer-group	此元素会作为一个或多个行的分组来显示（类似 <tfoot>）
table-row	此元素会作为一个表格行显示（类似 <tr>）
table-column-group	此元素会作为一个或多个列的分组来显示（类似 <colgroup>）
table-column	此元素会作为一个单元格列显示（类似 <col>）
table-cell	此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption	此元素会作为一个表格标题显示（类似 <caption>）
inherit	规定应该从父元素继承 display 属性的值

块级元素和行内元素可以根据这些属性进行互相转化，例如：

<style type="text/css">
    span{
        dispaly:block;
        /*这样下面四个span元素就会独自占据一行显示，并且可以设置宽度和高度等属性*/
    }
</style>
<span>我们默认会在一行显示</span>
<span>我们默认会在一行显示</span>
<span>我们默认会在一行显示</span>
<span>我们默认会在一行显示</span>

<style type="text/css">
    div{
        dispaly:inline;
        /*这样下面四个div元素就会在一行显示，但是不能设置宽度和高度等属性*/
    }
</style>
<div>我们默认会在一行显示</div>
<div>我们默认会在一行显示</div>
<div>我们默认会在一行显示</div>
<div>我们默认会在一行显示</div>

<style type="text/css">
    div{
        dispaly:inline-block;
        /*这样下面四个div元素就会在一行显示，还可以设置宽度和高度等属性*/
    }
</style>
<div>我们默认会在一行显示</div>
<div>我们默认会在一行显示</div>
<div>我们默认会在一行显示</div>
<div>我们默认会在一行显示</div>
<!--
但是行内元素和行内块元素会因为标签和标签之间的空格产生距离，这个时候我们可以有几种方式将空格去除
1、将标签紧紧挨在一起 <li></li><li></li>
2、将标签之间的空格注释起来
3、在父级元素中设置font-size:0;
-->

行内元素和行内块元素还会受到基线对齐的影响，那么在下一篇文章中我们来分享一下元素的基线对齐

网站css样式调整之css的继承方式

行内元素和行内块级元素的垂直方向对齐