CSS Display（显示）

display 决定元素如何参与布局：是独占一行（块级）、与文字在同一行（内联）、还是用 Flex/Grid 布局子元素等。理解 display 是掌握 CSS 布局的基础。

常见 display 值

值	说明
block	块级：独占一行，可设宽高、上下 margin 生效
inline	内联：与文字在同一行，宽高、上下 margin 对布局影响小
inline-block	内联块：同排显示，但可设宽高、margin 都生效
none	不显示，不占空间，从布局中移除
flex	弹性盒子，子元素按 flex 规则排列
grid	网格布局，子元素放在网格中
inline-flex / inline-grid	对外表现为内联，内部用 flex/grid

---

1. block（块级）

• 独占一行（前后换行）。
• 可设置 width、height、margin、padding 等。
• 默认宽度为父元素的 100%（width: auto）。

div, p, h1, section {
  display: block;  /* 这些标签默认就是 block */
}

---

2. inline（内联）

• 与文字、其它内联元素在同一行排列。
• width、height 设置无效（由内容决定）。
• 上下 margin 对布局几乎无影响；左右 margin、padding 有效。

span, a, strong, em {
  display: inline;  /* 默认 */
}

---

3. inline-block（内联块）

• 像内联一样与其它内容同一行排列。
• 但可以设 width、height、margin、padding，且都参与布局。
• 适合做「一排可点的小块」（如按钮、图标）。

.btn {
  display: inline-block;
  padding: 8px 16px;
  width: 120px;
  text-align: center;
}

---

4. none（隐藏）

• 元素不显示，且不占任何空间，布局中当作不存在。
• 与 visibility: hidden 不同：后者仍占位，只是看不见。

.hidden {
  display: none;
}

---

5. flex（弹性盒子）

• 子元素成为 flex 项，按主轴/交叉轴排列，可伸缩、对齐。
• 父元素设 display: flex，用 flex-direction、justify-content、align-items、flex-wrap 等控制布局。

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

---

6. grid（网格）

• 子元素放在网格里，通过行和列控制位置。
• 父元素设 display: grid，用 grid-template-columns、grid-template-rows、gap 等定义网格。

.layout {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

---

小结

• block：独占一行，可设宽高、margin。
• inline：同行排列，宽高无效，上下 margin 对布局影响小。
• inline-block：同行排列且可设宽高、margin。
• none：不显示、不占位。
• flex / grid：现代布局方式，需在父元素上设置。

下一节学习 CSS Position（定位）：相对、绝对、固定、粘性定位。