CSS 数据类型

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>由于“display: none;”，第二个框是不可见的。</p>
   <div>Box 1 (可见)</div>
   <div class="box">Box 2 (不可见)</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>由于“display: none;”，第二个框不可见</p>
   <div>Box 1 (可见)</div>
   <div class="box">Box 2 (现在可见)</div>
</body>
</html>