笙亿网络策划

CSS display 属性怎么用？flex 和 grid 布局怎么设置？

约 23 分钟读完 0 阅
文章导读
Previous Quiz Next display 属性 CSS display 属性 指定了 HTML 元素的显示行为。它定义了元素在网页上的显示方式。
📋 目录
  1. A display 属性
  2. B 语法
  3. C display 属性值
  4. D Examples of CSS Display Property
  5. E CSS display 属性与 inline 值
  6. F CSS display 属性与 block 值
  7. G CSS display 属性与 contents 值
  8. H CSS display 属性与 flex 值
  9. I CSS display 属性与 grid 值
  10. J CSS display 属性与 inline-block 值
A A

CSS display 属性

Previous
Quiz
Next

display 属性

CSS display 属性 指定了 HTML 元素的显示行为。它定义了元素在网页上的显示方式。

语法

display: value;

display 属性值

值 描述
inline 将元素显示为内联元素，此时 width 和 height 属性无效。默认值。
block 将元素显示为块级元素，新行开始并占据整行宽度。
contents 使元素从布局中消失，但保留其子元素可见并保持在布局中的原始位置。
flex 将元素显示为块级 flex 容器。
grid 将元素显示为块级 grid 容器。
inline-block 允许元素与其他内联元素一起流动，同时具有块级特性，如 width 和 height。
inline-flex 将元素显示为内联级 flex 容器。
inline-grid 将元素显示为内联级 grid 容器。
inline-table 将元素显示为内联级 table。
run-in 根据上下文将元素显示为 block 或 inline。
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 属性与 inline 值

以下示例演示了在 div 元素上使用 inline 值，使其表现为 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">
      <div class="inline-item">
         Item 1
      </div>
      <div class="inline-item">
         Item 2
      </div>
      <div class="inline-item">
         Item 3
      </div>
   </div>
</body>

</html>

CSS display 属性与 block 值

以下示例演示了在 span 元素上使用 block 值，使其表现为 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>

CSS display 属性与 contents 值

以下示例演示了 contents 值的用法。在此示例中，.child 元素表现为 .parent 元素的直接子元素，绕过了 .wrapper 元素。

示例

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

CSS display 属性与 flex 值

为了将一个元素设置为 flex 容器，使其子元素（flex items）以灵活且响应式的方式布局，我们使用 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>

CSS display 属性与 grid 值

为了将一个元素设置为 grid 容器，使用 grid 布局模型，可以创建具有行和列的二维布局，我们使用 grid 值。Grid items 可以明确或自动放置和调整大小到 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>

CSS display 属性与 inline-block 值

为了使一个元素表现得像行内级元素（允许它与文本和其他行内内容流动），同时保留块级属性如 width 和 height，我们使用 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>

CSS display 属性与 inline-flex 值

为了将一个元素设置为内联级 flex 容器，使容器表现得像内联元素一样，与周围的文本或内联元素流动，同时仍将其子元素应用 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>

CSS display 属性与 inline-grid 值

为了将一个元素设置为内联级 grid 容器，使其表现得像内联元素一样（与文本和其他内联内容流动），同时使用 grid 布局模型来排列其子元素，我们使用 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>

CSS display 属性与 run-in 值

为了使一个元素根据上下文表现为块级元素或内联级元素，我们使用 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>

CSS display 属性与 list-item 值

以下示例展示了在 div 元素上使用 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>

CSS display 属性与表格值

为了使用 CSS 创建类似表格的布局，而不使用 HTML table 元素，我们可以使用不同的 display 值来模拟表格。 在以下示例中，使用了 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>

CSS display 属性与 none 值

以下示例展示了在 div 元素上使用 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