您的位置：首页 > Web前端 > CSS

CSS3：display

2016-04-14 14:55 519 查看

在web页上的每个元素都是一个盒子，使用display属性可以定义元素的盒类型。对于HTML等文档类型，如果使用display不谨慎会很危险，可能违反HTML中已经定义的现实层次结构，因此使用时需要小心。

none

将display属性设置为none可以隐藏元素，该元素在页面布局中不占据空间，和visibility属性类似，但存在差别，visibility属性的可选值如下：
1）collapse：元素不可见，且在页面布局中不占据空间，同display设置为none；
2）hidden：元素不可见，但在页面布局中占据空间；
3）visible：默认值，可见。
一些特定的元素例如script用none作为默认值，该值通常被用于通过JavaScript隐藏和显示元素。

inline

元素被显示为内联元素，元素前后没有换行符。所有元素的display属性的默认值都是inline，但大部分“用户代理样式表”（浏览器提供的默认样式）将其中一些元素设置到了block（具体看下面的block的介绍）。看下面的例子，em元素被添加了一个红色边框：

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
em {
border: 1px solid red;
}
</style>
</head>
<body>
<div style="width:400px;">
div is the standard <em>block-level</em> element. A block-level element starts on a new line and stretches out to the left and right as far as it can. Other common block-level elements are p and form, and new in HTML5 are header, footer, section, and more.
</div>
</body>
</html>

em元素的display属性的默认为inline，在Chrome中效果如下：

inline元素可以设置margin和padding，且所处的位置不会发生变化，但元素仅会占据水平的空间，而不会占据垂直空间，我们为上例中的em添加背景色，并设置margin和padding：

em {
border: 1px solid red;
background-color: red;
margin: 12px;
padding: 12px;
}

在Chrome中的显示效果如下：

inline元素不接受height和width值，它将仅仅忽略它。

inline-block

inline-block属性值和inline类似，区别在于设置inline-block属性值的元素：
1）接受margin和padding值，且水平和垂直方向都会占据空间；
2）接受width和height值。
修改上例中的em的样式如下：

em {
border: 1px solid black;
background-color: red;
margin: 12px;
padding: 12px;
width: 100px;
display: inline-block;
height: 100px;
}

在chrome中的效果如下：

block

元素显示为块级元素，元素前后会带有换行符。浏览器的用户代理样式表将一些元素设置到了block，通常是一些容器元素，例如div、section、ul、p和h1，默认情况下（为设置宽度）块级元素将水平扩展占据整个空间。

Run-in

元素会根据上下文作为块级元素或内联元素显示。如果一个run-in元素出现在一个块级元素之前，run-in元素在结构上将成为块级元素的第一个内联孩子元素。使用方式如下：

h3 {
display: run-in;
}

大部分浏览器都不支持该属性。

table

display提供了一整套值用于将非表格元素按照表格元素的方式来呈现，包含以下值：
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>）。
使用它们的方式类似于使用表格元素：

<div style="display: table;">
<div style="display: table-row;">
<div style="display: table-cell;">
Gross but sometimes useful.
</div>
</div>
</div>

list-item

元素会作为列表显示。看下面的例子：

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div.list {
display: list-item;
list-style: decimal inside;
}
</style>
</head>
<body>
<div style="width:400px;">
<div><div class="list">div is the standard block-level element.</div><div class="list">A block-level element starts on a new line and stretches out to the left and right as far as it can.</div><div class="list">Other common block-level elements are p and form, and new in HTML5 are header, footer, section, and more.</div></div>
</div>
</body>
</html>

在Chrome中效果如下：

效果相当于使用列表元素。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html5 css3

相关文章推荐

新的分享

章节导航