CSSLayout.md

以下是 CSS 中 block、inline 和 inline-block 这三个核心 display 值的布局规则和特性。

这三者是 CSS “常规流”（Normal Flow）中最重要的概念，理解它们是掌握 CSS 布局的基础。

---

📦 1. display: block (块级元素)

block 元素是 CSS 布局中的“建筑基石”，它们天生用于构建页面的宏观结构（如段落、列表、容器等）。

核心规则：

1. 独占一行：

   • block 元素会自动开始一个新行。
   • 它的后面（如果还有空间）不能有其他元素，后续的元素也必须另起一行。
   • 它们在垂直方向上一个接一个地排列。

2. 尺寸（Width / Height）：

   • 可以自由设置 width 和 height 属性。
   • 默认宽度： 如果不设置 width，它会自动撑满其父元素的可用宽度（即 width: 100%）。这是它“独占一行”的根本原因。
   • 默认高度： 如果不设置 height，它会由其内部内容的高度撑开。

3. 外边距（Margin）：

   • margin 的四个方向（top, right, bottom, left）全部有效。
   • 它们可以用来推开自己与其他 block 元素（垂直方向）或父元素边界（水平方向）的距离。
   • 注意： 垂直方向的 margin 会发生“外边距折叠”（Margin Collapse）。

4. 内边距（Padding）：

   • padding 的四个方向（top, right, bottom, left）全部有效。

---

✍️ 2. display: inline (内联元素)

inline 元素主要用于“包裹文本”或在文本行中插入内容（如链接或重点标记）。

核心规则：

1. 不独占一行：

   • inline 元素不会开始一个新行。
   • 它们会与其他 inline 或 inline-block 元素在同一行内从左到右排列。
   • 当一行放不下时，它们会自动换行（就像文本一样）。

2. 尺寸（Width / Height）：

   • 设置 width 和 height 属性完全无效。
   • 元素的宽度和高度完全由其内容撑开。

3. 外边距（Margin）：

   • margin-left 和 margin-right (水平方向) 有效，可以推开左右的元素。
   • margin-top 和 margin-bottom (垂直方向) 无效。

4. 内边距（Padding）：

   • padding-left 和 padding-right (水平方向) 有效，会推开左右内容并影响布局。
   • padding-top 和 padding-bottom (垂直方向) 视觉上有效（会撑开背景色或边框），但不占据布局空间。这意味着它们不会把上下行的元素推开，可能导致它与上下行的内容重叠。

5. 对齐：

   • 受 vertical-align 属性影响，用于调整它在行内的垂直位置（如基线对齐）。

---

🧩 3. display: inline-block (内联块级元素)

inline-block 是一个非常有用的“混合体”，它结合了 inline 和 block 的特性，在 Flexbox 出现之前是水平布局的主要手段（如制作导航栏）。

核心规则：

1. 对外（像 inline）：

   • 不独占一行，可以与其他 inline 或 inline-block 元素在同一行显示。
   • 受 vertical-align 属性影响。
   • 如果一行放不下，会换行。

2. 对内（像 block）：

   • 可以自由设置 width 和 height 属性。
   • margin 的四个方向全部有效。
   • padding 的四个方向全部有效。

简单总结： inline-block 让你能像设置 block 元素一样控制尺寸和边距，但它又不会粗暴地独占一行，而是像 inline 元素一样在行内流动。

常见用途：

• 将 <li> 元素（默认为 block）设置为 inline-block，以制作水平导航栏。
• 制作并排的卡片或按钮组。

更多细节可以参考MDN CSS规范：https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Display/Block_and_inline_layout