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 属性如何使容器的子元素显示为 body 的直接子元素，视觉上并排显示两个框 -

<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>

打印页面