CSS3 display知识详解

CSS3 中的 display 属性决定了元素的框类型，以及这些框如何相互关联。

常用值

以下是常用的 display 属性值：
- block：将元素显示为块级元素，前后带有换行符；
- inline：将元素显示为行内元素，前后没有换行符；
- inline-block：元素呈现为内联元素，但可以设置宽度、高度等块级元素的属性；
- none：元素不显示，通常用于隐藏元素；
- flex：将元素定义为一个 flex 容器，可伸缩子元素的大小以适应容器；
- grid：将元素定义为格子容器，使用行列定义子元素布局。

示例1

<style>
  .box {
    display: block;
    width: 200px;
    height: 100px;
    background-color: #ffe0e0;
  }
</style>

<div class="box"></div>
<div class="box"></div>

上述示例中，我们将两个 div 元素设置为 block 框类型，并设置了宽度、高度和背景颜色。因为其框类型为块级元素，故前后显示有换行符。

示例2

<style>
  .box {
    display: inline-block;
    width: 50px;
    height: 50px;
    background-color: #ffe0e0;
    margin: 10px;
  }
</style>

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

上述示例中，我们将三个 div 元素设置为 inline-block 框类型，并设置了宽度、高度和背景颜色。由于 inline-block 类型可设置宽度等块级元素属性，故其能呈现为均匀的方格，并且可以设置 margin 对其进行间距控制。

细心的读者可能会发现，上述两个示例中，我们只设置了显示属性，但元素默认的框类型是什么呢？其实默认值并不一定是固定的，根据元素的标签类型、属性、父元素等影响因素，会确定其默认框类型。