display属性

display 是 CSS 中最重要的属性之一，用于定义元素的显示方式。它决定了元素是块级（block）、行内（inline）、还是弹性布局（flex/grid），并影响页面布局。

---

1. display 的常见属性值

值	说明	示例
block	块级元素，占满整行	div, p, h1
inline	行内元素，不换行	span, a
inline-block	行内元素，但可设置宽高	button, input
none	隐藏元素，不占空间	display: none;
flex	弹性布局	display: flex;
grid	网格布局	display: grid;
inline-flex	行内弹性布局	display: inline-flex;
inline-grid	行内网格布局	display: inline-grid;
table	让元素像表格一样	display: table;
contents	让元素“消失”，但保留子元素	display: contents;

---

2. block（块级元素）

特点：

• 默认占据整行
• 可以设置 width 和 height
• 适用于段落、容器

div {
  display: block;
  width: 200px;
  height: 100px;
  background: lightblue;
}

✅ 适用于 容器、段落、标题等。

---

3. inline（行内元素）

特点：

• 不会换行，占据内容所需的空间
• 不能设置 width 和 height
• 适用于短文本、链接等

span {
  display: inline;
  color: red;
}

✅ 适用于 span、a 等行内元素。

---

4. inline-block（行内块元素）

特点：

• 像 inline 一样，不换行
• 但可以设置 width 和 height

.button {
  display: inline-block;
  width: 100px;
  height: 40px;
  background: orange;
  text-align: center;
}

✅ 适用于 button、input。

---

5. none（隐藏元素）

display: none; 完全隐藏元素，不占据空间。

.hidden {
  display: none;
}

✅ 适用于 控制菜单、弹窗。

---

6. flex（弹性布局）

display: flex; 允许子元素自动排列、调整大小。

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

✅ 适用于 横向/纵向排布的元素（如导航栏）。

---

7. grid（网格布局）

网格布局允许精确控制行和列。

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

✅ 适用于 复杂的多列布局。

---

8. inline-flex 和 inline-grid

特点：

• inline-flex：像 flex 一样排列，但仍然是行内元素。
• inline-grid：像 grid 一样排列，但仍然是行内元素。

.inline-flex-container {
  display: inline-flex;
  justify-content: center;
}

✅ 适用于 需要放在文本中的小型 flex/grid 组件。

---

9. table（让元素像表格一样）

.table {
  display: table;
  width: 100%;
}

✅ 适用于 自定义表格样式。

---

10. contents（让元素“消失”）

.wrapper {
  display: contents;
}

效果：

• wrapper 本身不会渲染，但里面的元素仍然显示。

✅ 适用于 让 HTML 结构更干净，但仍保持子元素的排列。

---

总结

display 值	适用场景
block	独占一行（div, p）
inline	行内元素（span, a）
inline-block	可设置宽高的行内元素（button, input）
none	隐藏元素
flex	弹性布局（导航栏、布局）
grid	网格布局（复杂布局）
inline-flex	行内弹性布局
inline-grid	行内网格布局
table	表格样式
contents	让元素“消失”但保留子元素