3. CSS 盒模型及布局

CSS 盒模型是设计和布局网页的重要基础，每个 HTML 元素都被看作是一个盒子。

1. 什么是 CSS 盒模型？

盒模型描述了元素的内容和它的边框（边界），以及与周围内容的间距。

盒模型主要由以下四个部分组成（从内到外）：

1. 内容（Content）
   元素的实际内容区域，例如文本、图像等。可以通过 width 和 height 设置内容区域的大小。
2. 内边距（Padding）
   内容与边框之间的空间，通过 padding 属性设置。内边距会影响盒子的实际大小。
3. 边框（Border）
   围绕内边距的边框，通过 border 属性定义宽度、样式和颜色。
4. 外边距（Margin）
   元素与其他元素之间的间距，通过 margin 属性设置。外边距不会影响元素的大小，只会影响元素之间的距离。

盒模型示意图

+---------------------+
|      Margin         |
+---------------------+
|      Border         |
+---------------------+
|      Padding        |
+---------------------+
|      Content        |
+---------------------+

2. CSS 盒模型的类型

标准盒模型（content-box, 默认）

• 在标准盒模型中，width 和 height 只定义内容区域的大小，不包含内边距和边框。

• 示例：

  .box {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 10px solid black;
    margin: 30px;
  }

  实际盒子大小计算：

  宽度 = 内容宽度 + 左右内边距 + 左右边框
       = 200 + 20*2 + 10*2 = 260px
  
  高度 = 内容高度 + 上下内边距 + 上下边框
       = 100 + 20*2 + 10*2 = 160px

替代盒模型（border-box）

• 在替代盒模型中，width 和 height 包括内容、内边距和边框的总大小。
• 使用 box-sizing: border-box; 来启用替代盒模型。

• 示例：

  .box {
    box-sizing: border-box; /* 启用替代盒模型 */
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 10px solid black;
    margin: 30px;
  }

  实际盒子大小：

  宽度 = 200px（固定，不再加上内边距和边框）
  
  高度 = 100px（固定，不再加上内边距和边框）

3. CSS 布局概述

布局是根据设计需求安排页面元素的位置、大小和排列方式的过程。CSS 提供了多种布局方法，包括传统布局和现代布局。

4. CSS 布局方式和使用教程

1. 普通流布局（Normal Flow）

• 普通流是网页的默认布局方式，元素按照文档流的顺序从上到下、从左到右排列。
• 块级元素：占据父元素的整行宽度，从上到下排列。
• 行内元素：水平排列，直到一行无法容纳更多元素时换行。

示例：

<div style="background-color: red;">块级元素 1</div>
<div style="background-color: blue;">块级元素 2</div>
<span style="background-color: yellow;">行内元素 1</span>
<span style="background-color: green;">行内元素 2</span>

2. 浮动布局（Float Layout）

• float 属性用于将元素从普通流中取出，让它浮动到容器的一侧（左侧或右侧），用于简单的左右排列布局。

常见属性值：

• float: left;：元素浮动到左侧。
• float: right;：元素浮动到右侧。
• clear：用于清除浮动。

示例：

<div style="float: left; width: 50%; background-color: lightblue;">左侧浮动</div>
<div style="float: right; width: 50%; background-color: lightgreen;">右侧浮动</div>
<div style="clear: both;">清除浮动</div>

3. 弹性布局（Flexbox Layout）

弹性布局是一种一维布局模型，用于在一个父容器中方便地排列子元素，支持横向或纵向排列。

常见属性：

• 容器属性：

  • display: flex;：启用弹性布局。
  • flex-direction：定义主轴方向，如水平（row）或垂直（column）。
  • justify-content：定义主轴上的对齐方式。
  • align-items：定义交叉轴上的对齐方式。
  • flex-wrap：是否允许子元素换行。

• 子元素属性：

  • flex：定义子元素如何分配空间（flex: 1; 表示平分）。
  • align-self：单独定义某个子元素在交叉轴上的对齐方式。

示例：

<div style="display: flex; justify-content: space-between;">
  <div style="background-color: red;">元素 1</div>
  <div style="background-color: blue;">元素 2</div>
  <div style="background-color: green;">元素 3</div>
</div>

4. 网格布局（Grid Layout）

网格布局是一种二维布局模型，可以同时处理行和列的排列。

常见属性：

• 容器属性：

  • display: grid;：启用网格布局。
  • grid-template-rows 和 grid-template-columns：定义行和列的大小。
  • gap：定义行与列之间的间距。

• 子元素属性：

  • grid-column：定义子元素跨越的列范围。
  • grid-row：定义子元素跨越的行范围。

示例：

<div style="display: grid; grid-template-columns: 1fr 2fr; grid-gap: 10px;">
  <div style="background-color: red;">元素 1</div>
  <div style="background-color: blue;">元素 2</div>
  <div style="background-color: green;">元素 3</div>
</div>

效果：创建一个两列布局，第一列占 1 份宽度，第二列占 2 份宽度，元素之间有 10 像素的间距。

5. 绝对定位和固定定位（Positioning）

通过 position 属性可以将元素定位到页面的特定位置。

• 关键属性：

  • position：

    • static（默认值）：普通流位置。
    • relative：相对定位，基于元素原本位置定位。
    • absolute：绝对定位，相对于最近的非 static 父元素。
    • fixed：固定定位，相对于视口定位。
  • top / left / right / bottom：用于调整位置。

示例：

<div style="position: relative; background-color: lightgray;">
  <div style="position: absolute; top: 10px; left: 10px; background-color: red;">
    绝对定位
  </div>
</div>

5. 小结

• CSS 盒模型是理解元素大小和间距的核心，特别是 box-sizing 的使用能够简化布局计算。
• CSS 布局提供了多种技术，从简单的普通流布局到更灵活的弹性布局和网格布局，适应不同的设计需求。
• 推荐使用现代布局（如 Flexbox 和 Grid）来实现复杂布局，因为它们比传统布局方法更高效、灵活。