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>
