display 都有什么属性 都是什么意思？

display 是 CSS 中一个非常重要的属性，用于定义元素在页面中的显示方式。以下是 display 属性的常见取值及其含义：

块级元素相关值

1. display: block;

• 含义：将元素显示为块级元素。块级元素会独占一行，并且可以设置宽度和高度。默认情况下，像 <div>、<p>、<h1> - <h6> 等元素都是块级元素。
• 示例：

<style>
  span {
    display: block;
    background-color: lightblue;
    margin: 5px;
  }
</style>
<span>这是一个 span 元素，现在以块级元素显示</span>
<span>另一个 span 元素</span>

在上述示例中，原本是行内元素的 <span> 通过 display: block; 变成了块级元素，会换行显示。

2. display: inline-block;

• 含义：元素会像行内元素一样在一行内显示，但同时又可以设置宽度和高度，并且可以设置内外边距。
• 示例：

<style>
  div {
    display: inline-block;
    width: 100px;
    height: 50px;
    background-color: lightgreen;
    margin: 5px;
  }
</style>
<div>块 1</div>
<div>块 2</div>

这里的 <div> 元素会在一行内显示，同时具备块级元素设置宽高和边距的特性。

行内元素相关值

1. display: inline;

• 含义：将元素显示为行内元素。行内元素不会独占一行，宽度和高度由内容决定，不能设置宽度和高度（width 和 height 属性无效），只能设置左右内外边距，不能设置上下内外边距。常见的行内元素有 <a>、<span>、<img> 等。
• 示例：

<style>
  div {
    display: inline;
    background-color: lightyellow;
  }
</style>
<div>这是一个 div 元素，现在以行内元素显示</div>
<div>另一个 div 元素</div>

两个 <div> 元素会在一行内显示。

表格相关值

1. display: table;

• 含义：将元素显示为一个表格，类似于 <table> 元素。元素会按照表格的布局规则进行显示。
• 示例：

<style>
  .table {
    display: table;
    border: 1px solid black;
  }
  .row {
    display: table-row;
  }
  .cell {
    display: table-cell;
    border: 1px solid black;
    padding: 5px;
  }
</style>
<div class="table">
  <div class="row">
    <div class="cell">单元格 1</div>
    <div class="cell">单元格 2</div>
  </div>
</div>

这里使用 display: table;、display: table-row; 和 display: table-cell; 模拟了表格的结构。

弹性布局相关值

1. display: flex;

• 含义：将元素定义为弹性容器，其直接子元素会成为弹性项目。弹性布局提供了强大的布局能力，可以方便地控制子元素的排列方式、对齐方式和空间分配。
• 示例：

<style>
  .flex-container {
    display: flex;
    background-color: lightgray;
  }
  .flex-item {
    background-color: lightcoral;
    margin: 5px;
    padding: 20px;
  }
</style>
<div class="flex-container">
  <div class="flex-item">项目 1</div>
  <div class="flex-item">项目 2</div>
  <div class="flex-item">项目 3</div>
</div>

子元素会按照弹性布局的规则在一行内排列。

2. display: inline-flex;

• 含义：类似于 display: flex;，但元素会像行内元素一样显示，不会独占一行。
• 示例：

<style>
  .inline-flex-container {
    display: inline-flex;
    background-color: lightgray;
  }
  .flex-item {
    background-color: lightcoral;
    margin: 5px;
    padding: 20px;
  }
</style>
<div class="inline-flex-container">
  <div class="flex-item">项目 1</div>
  <div class="flex-item">项目 2</div>
  <div class="flex-item">项目 3</div>
</div>

网格布局相关值

1. display: grid;

• 含义：将元素定义为网格容器，其直接子元素会成为网格项目。网格布局可以创建二维网格，更精确地控制元素的位置和大小。
• 示例：

<style>
  .grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    background-color: lightblue;
    padding: 10px;
  }
  .grid-item {
    background-color: lightgreen;
    border: 1px solid black;
    padding: 20px;
    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>

这里创建了一个包含三列的网格布局。

2. display: inline-grid;

• 含义：类似于 display: grid;，但元素会像行内元素一样显示，不会独占一行。

其他值

1. display: none;

• 含义：元素将不会在页面中显示，并且不会占据页面的空间，就好像该元素不存在一样。
• 示例：

<style>
  .hidden {
    display: none;
  }
</style>
<div class="hidden">这个元素不会显示</div>

2. display: contents;

• 含义：元素本身不会产生任何盒模型，其内容会被视为父元素的内容。
• 示例：

<style>
  .parent {
    border: 1px solid black;
  }
  .child {
    display: contents;
  }
</style>
<div class="parent">
  <div class="child">子元素内容</div>
</div>

这里 .child 元素本身不会有盒模型，其内容会融入到 .parent 元素中。

以上是 display 属性的一些常见取值及其含义，不同的取值可以满足各种不同的布局需求。