# 盒子模型详解

URL: https://caijiao.org/css/05-box-model/01-box-model
Source: docs/css/05-box-model/01-box-model.md
Description: 盒子模型是理解网页布局的基础，包含内容(content)、内边距(padding)、边框(border)和外边距(margin)四部分。

网页中的每个元素都被看作一个矩形盒子，盒子模型定义了盒子的结构和组成部分，影响元素的尺寸和布局。

## 盒子模型组成

1. **内容区域（content）**  
   显示文本或其他元素的区域。

2. **内边距（padding）**  
   内容与边框之间的空白区域。

3. **边框（border）**  
   围绕内容和内边距的线条。

4. **外边距（margin）**  
   元素与其他元素之间的距离。

## 盒子尺寸计算

默认情况下，元素的总宽度 = 内容宽度 + 左右内边距 + 左右边框 + 左右外边距。

例如：

```css
width: 200px;
padding: 10px;
border: 5px solid black;
margin: 20px;
```

总宽度 = 200 + 10*2 + 5*2 + 20\*2 = 270px。

## box-sizing 属性

可以通过 `box-sizing` 属性改变盒子尺寸计算方式：

- `content-box`（默认）：宽高只包括内容区域，不包括内边距和边框。
- `border-box`：宽高包括内容、内边距和边框，更易于布局控制。

```css
box-sizing: border-box;
```

## 盒子模型示例

[在线代码演示](/css/demos/6.html)