CSS3：display

最新推荐文章于 2024-08-28 15:18:58 发布

tomato__

最新推荐文章于 2024-08-28 15:18:58 发布

阅读量1.9k

点赞数 2

分类专栏： html 文章标签： html5 css3

本文链接：https://blog.csdn.net/tomato__/article/details/51151410

版权

html 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

在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中效果如下：