CSS 布局模型

理解 CSS 的布局模型是掌握网页布局的关键。它决定了元素如何在页面上排列、它们占据多大空间，以及它们如何相互作用。核心概念包括盒子模型、元素的显示类型以及定位方案。

盒子模型 (The Box Model)

正如在“基础概念”一章中提到的，CSS 将每个 HTML 元素都视为一个矩形的盒子。这个模型描述了这些盒子在页面上占据的空间。

一个盒子由四个部分组成，从内到外：

1. Content (内容): 元素的实际内容，如文本或图片。其尺寸由 width 和 height 属性定义。
2. Padding (内边距): 包围在内容周围的透明区域。padding 属性控制这个区域的大小。
3. Border (边框): 包围在内边距周围的线条。border 属性控制其样式。
4. Margin (外边距): 包围在边框周围的透明区域，用于将此元素与其他元素隔开。margin 属性控制其大小。

box-sizing 属性

默认情况下 (box-sizing: content-box;)，你设置的 width 和 height 只应用于 Content 区域。元素的总宽度实际上是 width + padding-left + padding-right + border-left + border-right。这使得布局计算变得复杂。

现代 CSS 开发中，最佳实践是全局设置 box-sizing: border-box;。这会改变盒子模型的计算方式：

box-sizing: border-box; 意味着你设置的 width 和 height 将是元素 边框以内 的总宽度和总高度（即 width = content + padding + border）。这样，无论你如何改变 padding 或 border，元素的总尺寸都保持不变，布局变得极其直观和可预测。

/* 一个常见的全局重置 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

元素的显示类型 (display)

元素的 display 属性决定了它在布局中的行为方式。最基本的两种类型是：

块级元素 (Block-level Elements)

• display: block;
• 特征:
  • 独占一行，总是在新行上开始。
  • 宽度默认是其父容器的 100%。
  • 可以设置 width, height, margin, padding。
• 例子: <div>, <p>, <h1>-<h6>, <ul>, <li>, <form>。

内联元素 (Inline-level Elements)

• display: inline;
• 特征:
  • 不开始新行，与其他内联元素并排排列。
  • 宽度由其内容决定，不能设置 width 和 height。
  • 水平方向的 margin 和 padding 会生效，但垂直方向的 margin 和 padding 不会影响周围元素。
• 例子: <span>, <a>, <img>, <strong>, <em>。

内联块级元素 (Inline-block Elements)

• display: inline-block;
• 特征: 这是块级和内联元素的混合体。
  • 对外 表现得像一个内联元素（不换行，与其他元素并排）。
  • 对内 表现得像一个块级元素（可以设置 width, height, margin, padding）。
• 应用: 非常适合用于创建并排的、有固定尺寸的导航链接或按钮。

布局方案 (Layout Schemes)

除了基本的块级和内联布局，CSS 还提供了更强大的布局方案来构建复杂的网页结构：

• Flexbox (display: flex): 一维布局模型，非常适合在单行或单列上对齐和分布项目。是构建组件级布局（如导航栏、卡片）的首选。
• Grid (display: grid): 二维布局模型，可以同时处理行和列。非常适合构建整个页面的宏观布局。
• Positioning (position 属性): 允许你将元素从正常的文档流中取出，并相对于其父元素或视口进行精确定位。

我们将在后续章节中详细探讨这些强大的布局技术。