CSS 数据类型

CSS 2 中的显示属性使用了单关键字语法，这需要为同一布局模型的块级和内联级变体使用单独的关键字。本章将讨论这些值。

属性值

数据类型 <display-legacy> 具有以下有效值:

  • inline-block:元素生成一个块元素框，它将与周围的内容一起流动。相当于内联flow-root。

  • inline-table:HTML 中没有直接映射。在行为上，它类似于 <table> 元素，作为内联框而不是块级框。相当于内联表格。

  • inline-flex:内容按照 Flexbox 模型进行布局，其中元素的行为类似于内联元素。相当于内联flex。

  • inline-grid:内容按照网格模型布局，其中元素的行为类似于内联元素。相当于内联网格。

语法

<display-legacy> = inline-block | inline-table | inline-flex | inline-grid

CSS <display-legacy>: inline-grid

以下示例演示了内联网格带有旧关键字 inline-grid 的网格容器:

<html>
<head>
<style> 
   .container-legacy {
      display: inline-grid;
      border: 2px solid black;
      background-color: yellow;
      padding: 5px;
      margin: 5px;
   }

   .container-new {
      display: inline grid;
      border: 2px dashed green;
      background-color: peachpuff;
      margin: 5px;
      padding: 5px;
   }
</style>
</head>
<body>
   <h2>inline-grid example</h2>
   <h3>legacy keyword - inline-grid</h3>
   <div class="container-legacy">
      <div>Grid Item 1</div>
      <div>Grid Item 2</div>
   </div>
   <hr>
   <h3>new keyword - inline grid</h3>
   <div class="container-new">
      <div>Grid New 1</div>
      <div>Grid New 2</div>
   </div>
</body>
</html>

CSS <display-legacy>: inline-flex

以下示例演示带有旧关键字 inline-flex 的内联 Flex 容器:

<html>
<head>
<style> 
   .container-legacy {
      display: inline-flex;
      border: 2px solid black;
      background-color: yellow;
      padding: 5px;
      margin: 5px;
   }

   .container-new {
      display: inline flex;
      border: 2px dashed green;
      background-color: peachpuff;
      margin: 5px;
      padding: 5px;
   }
</style>
</head>
<body>
   <h2>inline-flex example</h2>
   <h3>legacy keyword - inline-flex</h3>
   <div class="container-legacy">
      <div>Flex Item 1</div>
      <div>Flex Item 2</div>
   </div>
   <hr>
   <h3>new keyword - inline flex</h3>
   <div class="container-new">
      <div>Flex New 1</div>
      <div>Flex New 2</div>
   </div>
</body>
</html>