CSS 盒模型

CSS 盒模型是网页布局的基础概念，它描述了每个 HTML 元素如何被表示为矩形盒子，以及这些盒子的各个组成部分。

盒模型的组成部分

每个 HTML 元素都可以看作是一个矩形盒子，这个盒子由四个部分组成：

1. 内容区域（Content）：实际内容显示的区域
2. 内边距（Padding）：内容区域与边框之间的空间
3. 边框（Border）：围绕内边距和内容的边界
4. 外边距（Margin）：盒子与其他元素之间的空间

.box {
    /* 内容宽度和高度 */
    width: 200px;
    height: 100px;
    
    /* 内边距 */
    padding: 20px;
    
    /* 边框 */
    border: 5px solid black;
    
    /* 外边距 */
    margin: 10px;
}

盒模型类型

标准盒模型（content-box）

这是默认的盒模型类型。在标准盒模型中，设置的 [width](file:///Users/jry/Documents/WWW/xyito/lingyun/webstudy/node_modules/@types/node/stream/consumers.d.ts#L17-L18) 和 [height](file:///Users/jry/Documents/WWW/xyito/lingyun/webstudy/node_modules/@types/node/stream/consumers.d.ts#L17-L18) 只适用于内容区域：

.standard-box {
    box-sizing: content-box; /* 默认值 */
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 5px solid black;
    margin: 10px;
}

/* 实际占用宽度 = width + padding-left + padding-right + border-left + border-right */
/* 实际占用宽度 = 200 + 20 + 20 + 5 + 5 = 250px */

/* 实际占用高度 = height + padding-top + padding-bottom + border-top + border-bottom */
/* 实际占用高度 = 100 + 20 + 20 + 5 + 5 = 150px */

怪异盒模型（border-box）

在怪异盒模型中，设置的 [width](file:///Users/jry/Documents/WWW/xyito/lingyun/webstudy/node_modules/@types/node/stream/consumers.d.ts#L17-L18) 和 [height](file:///Users/jry/Documents/WWW/xyito/lingyun/webstudy/node_modules/@types/node/stream/consumers.d.ts#L17-L18) 包括内容、内边距和边框：

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

/* 实际内容宽度 = width - padding-left - padding-right - border-left - border-right */
/* 实际内容宽度 = 200 - 20 - 20 - 5 - 5 = 150px */

/* 实际内容高度 = height - padding-top - padding-bottom - border-top - border-bottom */
/* 实际内容高度 = 100 - 20 - 20 - 5 - 5 = 50px */

/* 实际占用宽度 = width + margin-left + margin-right = 200 + 10 + 10 = 220px */

设置盒模型

可以通过 [box-sizing](file:///Users/jry/Documents/WWW/xyito/lingyun/webstudy/node_modules/@types/node/stream/consumers.d.ts#L17-L18) 属性来设置盒模型类型：

/* 标准盒模型 */
.element {
    box-sizing: content-box;
}

/* 怪异盒模型 */
.element {
    box-sizing: border-box;
}

/* 应用于所有元素 */
*, *::before, *::after {
    box-sizing: border-box;
}

外边距合并（Margin Collapse）

垂直方向上的外边距可能会发生合并现象：

.box1 {
    margin-bottom: 30px;
}

.box2 {
    margin-top: 20px;
}

/* 两个元素之间的实际间距是 30px（较大的那个），而不是 50px */

内边距（Padding）

内边距是内容区域与边框之间的空间：

.padding-example {
    /* 四个方向相同 */
    padding: 10px;
    
    /* 上下 左右 */
    padding: 10px 20px;
    
    /* 上 左右 下 */
    padding: 10px 20px 15px;
    
    /* 上 右 下 左（顺时针） */
    padding: 10px 20px 15px 25px;
    
    /* 单独设置 */
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 15px;
    padding-left: 25px;
}

边框（Border）

边框围绕在内边距和内容周围：

.border-example {
    /* 简写形式：宽度 样式 颜色 */
    border: 2px solid red;
    
    /* 分别设置各边 */
    border-top: 1px dashed blue;
    border-right: 3px dotted green;
    border-bottom: 2px solid black;
    border-left: 4px double orange;
    
    /* 单独设置属性 */
    border-width: 2px;
    border-style: solid;
    border-color: purple;
}

外边距（Margin）

外边距是元素边框与其他元素之间的空间：

.margin-example {
    /* 四个方向相同 */
    margin: 10px;
    
    /* 垂直 水平 */
    margin: 10px auto; /* 水平居中 */
    
    /* 上下 左右 */
    margin: 10px 20px;
    
    /* 上 右 下 左 */
    margin: 10px 20px 15px 25px;
    
    /* 单独设置 */
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 15px;
    margin-left: 25px;
}

实际应用示例

<div class="card">
    <h2>卡片标题</h2>
    <p>这是一些卡片内容。</p>
</div>

.card {
    box-sizing: border-box;
    width: 300px;
    padding: 20px;
    border: 2px solid #ccc;
    margin: 20px auto;
    background-color: #f9f9f9;
}

.card h2 {
    margin-top: 0;
    color: #333;
}

.card p {
    margin-bottom: 0;
    color: #666;
}

理解盒模型对于掌握 CSS 布局至关重要，它是创建响应式和美观网页的基础。