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>

列印頁面