CSS display属性

一、什么是display属性

CSS（层叠样式表）是一种描述HTML元素如何在屏幕上显示的语言。display属性是CSS的一个重要属性，用于控制元素在网页上的显示方式。

display属性的取值可以是下列之一：

none：元素不显示，且不占用空间
block：元素显示为块级元素，换行显示
inline：元素显示为行内元素，不换行显示
inline-block：元素显示为行内块级元素，不换行显示
table：元素显示为表格
table-cell：元素显示为表格单元格
table-row：元素显示为表格行
flex：元素显示为弹性盒子
grid：元素显示为网格布局

除了以上常见取值外，display属性还存在其他取值，例如none、list-item、table-column等等。

二、不同取值的作用

1. `none`

none的作用是使元素不显示，并且不占用空间。相当于元素被隐藏了起来，无法通过正常的交互进行操作。

示例代码：

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

<p>这是一个普通的段落。</p>
<p class="hidden">这是一个隐藏的段落。</p>
<p>这是又一个普通的段落。</p>

运行结果：第二个段落被隐藏起来，页面上只显示第一个和第三个段落。

2. `block`

block的作用是使元素显示为块级元素，即元素会独占一行，不与其他元素同行显示。

示例代码：

<style>
  .block {
    display: block;
  }
</style>

<p>这是一个普通的段落。</p>
<span class="block">这是一个块级元素。</span>
<p>这是又一个普通的段落。</p>

运行结果：第二个元素会独占一行，不与其他元素同行显示。

3. `inline`

inline的作用是使元素显示为行内元素，即元素不会换行，会继续与其他元素同行显示。

示例代码：

<style>
  .inline {
    display: inline;
  }
</style>

<p>这是一个普通的段落。</p>
<span class="inline">这是一个行内元素。</span>
<span class="inline">这也是一个行内元素。</span>
<p>这是又一个普通的段落。</p>

运行结果：第二个和第三个元素会与其他元素同行显示。

4. `inline-block`

inline-block的作用是使元素既能像行内元素一样与其他元素同行显示，又能像块级元素一样独占一行。

示例代码：

<style>
  .inline-block {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: red;
  }
</style>

<p>这是一个普通的段落。</p>
<span class="inline-block"></span>
<span class="inline-block"></span>
<p>这是又一个普通的段落。</p>

运行结果：页面上显示两个红色的正方形元素，它们在同一行上。

5. `table`

table的作用是使元素显示为表格。

示例代码：

<style>
  .table {
    display: table;
  }

  .table-row {
    display: table-row;
  }

  .table-cell {
    display: table-cell;
    border: 1px solid black;
    padding: 10px;
  }
</style>

<div class="table">
  <div class="table-row">
    <div class="table-cell">单元格1</div>
    <div class="table-cell">单元格2</div>
    <div class="table-cell">单元格3</div>
  </div>
  <div class="table-row">
    <div class="table-cell">单元格4</div>
    <div class="table-cell">单元格5</div>
    <div class="table-cell">单元格6</div>
  </div>
</div>

运行结果：页面上会显示一个包含两行三列的表格。

6. `flex`

flex的作用是使用弹性布局，实现应对不同屏幕尺寸和设备的布局需求。

示例代码：

<style>
  .flex-container {
    display: flex;
    justify-content: space-between;
  }

  .flex-item {
    width: 100px;
    height: 100px;
    background-color: red;
    margin: 10px;
  }
</style>

<div class="flex-container">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</div>

运行结果：页面上会显示三个红色的正方形元素，它们按照容器的可用空间平均分布。

7. `grid`

grid的作用是使用网格布局，实现更复杂的页面布局。

示例代码：

<style>
  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
  }

  .grid-item {
    background-color: red;
    padding: 10px;
    text-align: center;
  }
</style>

<div class="grid-container">
  <div class="grid-item">第1个元素</div>
  <div class="grid-item">第2个元素</div>
  <div class="grid-item">第3个元素</div>
  <div class="grid-item">第4个元素</div>
  <div class="grid-item">第5个元素</div>
  <div class="grid-item">第6个元素</div>
</div>

运行结果：页面上会显示一个包含两行三列的网格布局，其中每个元素有相同的宽度，并有10px的间距。

三、小结

通过控制CSS的display属性，可以灵活地改变元素在网页上的显示方式。不同的display取值可以实现元素的隐藏、块级显示、行内显示、表格显示、弹性布局以及网格布局等效果，帮助我们实现各种各样的页面布局。在实际开发中，根据需求选择合适的display取值，可以让网页的布局更加灵活、美观和适应性强。