CSS - display 属性

上一页
下一页

CSS 的 display 属性用于指定元素在网页上如何显示。它控制元素的布局和可见性。display 属性在设置元素的内部和外部显示类型时非常有用。

语法

display: value;

属性值

值 描述
inline 将元素显示为内联元素，宽度和高度属性对其无效。默认值。
block 将元素显示为块级元素，从新行开始，占据整行宽度。
contents 使元素从布局中消失，同时保持其子元素可见并保持其在布局中的原始位置。
flex 将元素显示为块级弹性容器。
grid 将元素显示为块级网格容器。
inline-block 允许元素与其他内联元素一起流动，同时具有块级特性，如宽度和高度。
inline-flex 将元素显示为内联级弹性容器。
inline-grid 将元素显示为内联级网格容器。
inline-table 将元素显示为内联级表格。
run-in 根据上下文将元素显示为块级或内联级。
table 使元素像 <table> 元素一样。
table-caption 使元素像 <caption> 元素一样。
table-column-group 使元素像 <colgroup> 元素一样。
table-header-group 使元素像 <thead> 元素一样。
table-footer-group 使元素像 <tfoot> 元素一样。
table-row-group 使元素像 <tbody> 元素一样。
table-cell 使元素像 <td> 元素一样。
table-column 使元素像 <col> 元素一样。
table-row 使元素像 <tr> 元素一样。
none 完全移除元素。
initial 将属性设置为其默认值。
inherit 从父元素继承属性。

CSS Display 属性示例

以下示例说明了使用不同值的 display 属性。

使用 Inline 值的 Display 属性

要使元素表现得像内联级元素，以便元素在文本和其他内联元素内流动，而不是强制换行，只占用所需的宽度，我们使用 inline 值。在这种情况下，宽度和高度属性没有任何影响。以下示例中显示了这一点。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .inline-item {
         display: inline;
         background-color: #4CAF50;
         color: white;
         padding: 10px;
         margin: 5px;
      }

      .container {
         border: 3px solid #ccc;
         padding: 15px;
      }
   </style>
</head>

<body>
   <h2>
      CSS display property
   </h2>
   <h4>
      display: inline 
   </h4>
   <div class="container">
      <span class="inline-item">
         Item 1
      </span>
      <span class="inline-item">
         Item 2
      </span>
      <span class="inline-item">
         Item 3
      </span>
   </div>
</body>

</html>

使用 Block 值的 Display 属性

要使元素表现得像块级元素，以便它从新行开始并占据可用的完整宽度，延伸到其容器的左右边缘，我们使用 block 值。宽度和高度属性会影响元素。以下示例中显示了这一点。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .block-item {
         display: block;
         background-color: #4CAF50;
         color: white;
         padding: 10px;
         margin: 5px;
      }

      .container {
         border: 3px solid #ccc;
         padding: 15px;
      }
   </style>
</head>

<body>
   <h2>
      CSS display property
   </h2>
   <h4>
      display: block 
   </h4>
   <div class="container">
      <span class="block-item">
         Item 1
      </span>
      <span class="block-item">
         Item 2
      </span>
      <span class="block-item">
         Item 3
      </span>
   </div>
</body>

</html>

使用 Contents 值的 Display 属性

要使元素本身从布局中消失，但其子元素保留在布局中，就像它们是元素父元素的直接子元素一样，我们使用 contents 值。它对于删除不必要的包装器元素并保持其子元素可见很有用。以下示例中显示了这一点。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .wrapper {
         display: contents;
      }

      .child {
         text-align: center;
         background-color: #4CAF50;
         color: white;
         padding: 10px;
         margin: 5px;
      }

      .parent {
         display: block;
         background-color: #f0f0f0;
         padding: 10px;
      }
   </style>
</head>

<body>
   <h2>
      CSS display property
   </h2>
   <h4>
      display: contents
   </h4>
   <div class="parent">
      <div class="wrapper">
         <div class="child">
            Child 1
         </div>
         <div class="child">
            Child 2
         </div>
         <div class="child">
            Child 3
         </div>
      </div>
   </div>
</body>

</html>

使用 Flex 值的 Display 属性

要将元素设置为弹性容器，使其子元素（弹性项目）以灵活且响应的方式布局，我们使用 flex 值。容器使用 Flexbox 布局模型，该模型允许沿单个轴轻松对齐、分布和排序项目。以下示例中显示了这一点。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .flex-container {
         display: flex;
         background-color: #f0f0f0;
         padding: 10px;
      }

      .flex-item {
         background-color: #4CAF50;
         color: white;
         padding: 10px;
         margin: 5px;
         flex: 1;
      }
   </style>
</head>

<body>
   <h2>
      CSS display property
   </h2>
   <h4>
      display: flex
   </h4>
   <div class="flex-container">
      <div class="flex-item">
         Item 1
      </div>
      <div class="flex-item">
         Item 2
      </div>
      <div class="flex-item">
         Item 3
      </div>
   </div>
</body>

</html>

使用 Grid 值的 Display 属性

要将元素设置为网格容器，该容器使用网格布局模型，允许创建具有行和列的二维布局，我们使用 grid 值。网格项目可以显式或自动放置和调整大小跨网格。以下示例中显示了这一点。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .grid-container {
         display: grid;
         background-color: #f0f0f0;
         padding: 10px;
         gap: 10px;
      }

      .grid-item {
         background-color: #4CAF50;
         color: white;
         padding: 10px;
         text-align: center;
      }
   </style>
</head>

<body>
   <h2>
      CSS display property
   </h2>
   <h4>
      display: grid
   </h4>
   <div class="grid-container">
      <div class="grid-item">
         Item 1
      </div>
      <div class="grid-item">
         Item 2
      </div>
      <div class="grid-item">
         Item 3
      </div>
   </div>
</body>

</html>

使用 Inline Block 值的 Display 属性

要使元素表现得像内联级元素（允许它与文本和其他内联内容一起流动），同时保留块级属性（如宽度和高度），我们使用 inline-block 值。以下示例中显示了这一点。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .inline-block-item {
         text-align: center;
         display: inline-block;
         width: 200px;
         background-color: #4CAF50;
         color: white;
         padding: 10px;
         margin: 5px;
      }

      .container {
         border: 3px solid #ccc;
         padding: 15px;
      }
   </style>
</head>

<body>
   <h2>
      CSS display property
   </h2>
   <h4>
      display: inline-block 
   </h4>
   <div class="container">
      <span class="inline-block-item">
         Item 1
      </span>
      <span class="inline-block-item">
         Item 2
      </span>
      <span class="inline-block-item">
         Item 3
      </span>
   </div>
</body>

</html>

使用 Inline Flex 属性的 Display 属性

要将元素设置为内联级弹性容器，使容器表现得像内联元素一样，与周围的文本或内联元素一起流动，同时仍然对子元素应用 Flexbox 布局规则，我们使用 inline-flex 属性。以下示例中显示了这一点。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .inline-flex-container {
         display: inline-flex;
         background-color: #f0f0f0;
         padding: 10px;
      }

      .flex-item {
         background-color: #4CAF50;
         color: white;
         padding: 10px;
         margin: 5px;
         flex: 1;
      }
   </style>
</head>

<body>
   <h2>
      CSS display property
   </h2>
   <h4>
      display: inline-flex
   </h4>
   <div class="inline-flex-container">
      <div class="flex-item">
         Item 1
      </div>
      <div class="flex-item">
         Item 2
      </div>
      <div class="flex-item">
         Item 3
      </div>
   </div>
</body>

</html>

使用 Inline Grid 值的 Display 属性

要将元素设置为内联级网格容器，使其表现得像内联元素一样（与文本和其他内联内容一起流动），同时使用网格布局模型来排列其子元素，我们使用 inline-grid 值。以下示例中显示了这一点。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .grid-container {
         display: inline-grid;
         background-color: #f0f0f0;
         padding: 10px;
         gap: 10px;
      }

      .inline-grid-item {
         background-color: #4CAF50;
         color: white;
         padding: 10px;
         text-align: center;
      }
   </style>
</head>

<body>
   <h2>
      CSS display property
   </h2>
   <h4>
      display: inline-grid
   </h4>
   <div class="grid-container">
      <div class="inline-grid-item">
         Item 1
      </div>
      <div class="inline-grid-item">
         Item 2
      </div>
      <div class="inline-grid-item">
         Item 3
      </div>
   </div>
</body>

</html>

使用 Run In 值的 Display 属性

要使元素根据上下文表现得像块级元素或内联级元素，我们使用 run-in 值。它旨在允许元素“运行到”周围的文本或其他元素中。以下示例中显示了这一点。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .block-container {
         display: block;
         background-color: #f0f0f0;
         padding: 10px;
      }

      .run-in {
         display: run-in;
         background-color: #4CAF50;
         color: white;
         padding: 10px;
         margin: 5px;
      }
   </style>
</head>

<body>
   <h2>
      CSS display property
   </h2>
   <h4>
      display: run-in
   </h4>
   <div class="block-container">
      <div class="run-in">
         Run-In Element
      </div>
      <p>
         This paragraph follows the run-in element. Depending on 
         the browser support, the run-in element might appear 
         as a block or inline element here.
      </p>
   </div>
</body>

</html>

使用 List Item 值的 Display 属性

要使元素表现得像列表项一样，以便它显示列表标记（项目符号或数字）并使用缩进进行格式化，类似于项目在无序 <ul> 或有序列表 <ol> 中的显示方式，我们使用 list-item 值。以下示例中显示了这一点。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .list-item {
         display: list-item;
         background-color: #4CAF50;
         padding: 10px;
         margin: 10px;
         text-align: center;

      }
   </style>
</head>

<body>
   <h2>
      CSS display property
   </h2>
   <h3>
      display: list item
   </h3>
   <div class="list-item">
      Item 1
   </div>
   <div class="list-item">
      Item 2
   </div>
   <div class="list-item">
      Item 3
   </div>

</body>

</html>

使用 Table 值的 Display 属性

要使用 CSS 创建类似表格的布局，而不使用 HTML 表格元素，我们可以对表格使用不同的显示方式。在以下示例中，一些值 table、table-row、table-cell 和 table-caption 已被使用。

  • table: 创建一个像 <table> 一样的容器，
  • table-cell: 像 <td> 单元格一样设置元素的样式，
  • table-row: 将元素定义为像 <tr> 一样的行，
  • table-caption: 像 <caption> 元素一样工作，为表格定位标题。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      div {
         background-color: #4CAF50;
         color: white;
         display: flex;
         border: 1px solid black;
      }

      .table {
         display: table;
      }

      .row {
         display: table-row;
         padding: 3px;
      }

      .cell {
         display: table-cell;
         padding: 3px;
      }

      .caption {
         display: table-caption;
         text-align: center;
      }
   </style>
</head>

<body>
   <h2>
      CSS display property
   </h2>
   <h4>
      display: table, table-row, table-cell, table-caption
   </h4>
   <div class="table">
      <div class="caption">
         Sample Table
      </div>
      <div class="row">
         <div class="cell">
            Row1-Cell1
         </div>
         <div class="cell">
            Row1-Cell2
         </div>
         <div class="cell">
            Row1-Cell3
         </div>
      </div>
      <div class="row">
         <div class="cell">
            Row2-Cell1
         </div>
         <div class="cell">
            Row2-Cell2
         </div>
         <div class="cell">
            Row2-Cell3
         </div>
      </div>
      <div class="row">
         <div class="cell">
            Row3-Cell1
         </div>
         <div class="cell">
            Row3-Cell2
         </div>
         <div class="cell">
            Row3-Cell3
         </div>
      </div>
   </div>
</body>

</html>

使用 None 值的 Display 属性

要完全隐藏元素，使其从布局和页面中消失，将其从文档流中移除，使其不占用任何空间，并且不可见或不可交互，我们使用 none 值。以下示例中显示了这一点。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .hidden {
         display: none;
      }

      .visible {
         background-color: #4CAF50;
         color: white;
         padding: 10px;
         margin: 10px;
      }
   </style>
</head>

<body>
   <h2>
      CSS display property
   </h2>
   <h4>display: none</h4>
   <div class="visible">
      This is visible
   </div>
   <div class="hidden">
      This is hidden
   </div>
   <div class="visible">
      This is also visible
   </div>
</body>

</html>

支持的浏览器

属性 Chrome Edge Firefox Safari Opera
display 4.0 8.5 3.0 3.1 7.0
css_properties_reference.htm

打印页面
上一页
下一页
广告

© . All rights reserved.