CSS 数据类型 - display-box

CSS 数据类型 <display-box> 决定了元素是否创建显示框。

可能的值

contents - 元素的显示被其内容替换，即其子元素和伪框。
none - 关闭元素及其后代的显示。

语法


<display-box> = contents | none;

CSS <display-box> - none

以下示例演示了 display： none 属性隐藏了一个元素 -


<html>
<head>
<style>
	 	div {
	 	 	 height: 100px;
	 	 	 width: 100px;
	 	 	 background-color: pink;
	 	}
	 	.box {
	 	 	 display: none;
	 	}
</style>
</head>
<body>
	 	<p>The second box is invisible due to the "display: none;"</p>
	 	<div>Box 1 (Visible)</div>
	 	<div class="box">Box 2 (Invisible)</div>
</body>
</html>

CSS <display-box> - contents

以下示例演示了 display： contents 属性使容器的子元素显示为正文的直接子元素，在视觉上并排显示两个框 -


<html>
<head>
<style>
	 	div {
	 	 	 height: 100px;
	 	 	 width: 100px;
	 	 	 background-color: pink;
	 	}
	 	.box {
	 	 	 display: content;
	 	}
</style>
</head>
<body>
	 	<p>The second box is invisible due to the "display: none;"</p>
	 	<div>Box 1 (Visible)</div>
	 	<div class="box">Box 2 (Now Visible)</div>
</body>
</html>

本页