CSS盒子模型是网页布局中描述元素尺寸和空间的基础模型，每个HTML元素都可以看作是一个矩形的盒子，这个盒子由多个部分组成，对应的属性决定了盒子的整体表现。
CSS盒子模型的组成结构
标准CSS盒子模型从内到外依次分为四个部分，每个部分都有对应的CSS属性控制：
- 内容区（content）：盒子中用来放置文本、图片等实际内容的区域，由
width和height属性控制尺寸。 - 内边距（padding）：内容区和边框之间的空白区域，由
padding相关属性控制。 - 边框（border）：包裹内边距和内容区的边界，由
border相关属性控制样式、宽度和颜色。 - 外边距（margin）：盒子和其他盒子之间的空白区域，由
margin相关属性控制。
核心属性详解
1. 内容区属性
内容区是盒子的核心部分，width和height默认设置的是内容区的宽高，在标准盒子模型下，这两个值不会包含padding和border的尺寸。
/* 设置内容区宽高为200px */
.box {
width: 200px;
height: 200px;
background-color: #f0f0f0;
}
2. padding内边距属性
padding用来设置内容区和边框之间的间距，可以统一设置也可以单独设置四个方向的值，取值可以是像素、百分比、em等单位。
padding的简写规则如下：
- 一个值：上下左右内边距相同，比如
padding: 10px - 两个值：第一个值设置上下内边距，第二个值设置左右内边距，比如
padding: 10px 20px - 三个值：第一个值设置上内边距，第二个值设置左右内边距，第三个值设置下内边距，比如
padding: 10px 20px 15px - 四个值：依次设置上、右、下、左内边距，比如
padding: 10px 20px 15px 25px
也可以单独设置某个方向的内边距：
.box {
/* 单独设置上内边距为10px */
padding-top: 10px;
/* 单独设置右内边距为20px */
padding-right: 20px;
/* 单独设置下内边距为15px */
padding-bottom: 15px;
/* 单独设置左内边距为25px */
padding-left: 25px;
}
3. border边框属性
border用来设置盒子的边框，是复合属性，可以拆分为border-width（边框宽度）、border-style（边框样式）、border-color（边框颜色）三个子属性。
常见的边框样式有solid（实线）、dashed（虚线）、dotted（点线）等。
.box {
/* 复合写法：1px宽实线红色边框 */
border: 1px solid #ff0000;
/* 单独设置边框宽度 */
border-width: 2px;
/* 单独设置边框样式 */
border-style: dashed;
/* 单独设置边框颜色 */
border-color: #333333;
/* 单独设置某个方向的边框 */
border-top: 3px solid #00ff00;
}
4. margin外边距属性
margin用来设置盒子和其他盒子之间的间距，取值规则和padding一致，同样可以简写或者单独设置四个方向的值。
需要注意外边距合并的问题：垂直方向相邻的两个块级元素，上面的元素设置下外边距，下面的元素设置上外边距，两者的外边距会合并为一个，取较大的那个值。
.box1 {
/* 设置下外边距为20px */
margin-bottom: 20px;
}
.box2 {
/* 设置上外边距为15px，最终两个元素之间的间距是20px */
margin-top: 15px;
}
盒子模型类型差异
CSS中有两种盒子模型，通过box-sizing属性控制：
- 标准盒子模型（content-box）：默认值，
width和height只设置内容区尺寸，盒子总宽度 = width + padding左右 + border左右 + margin左右。 - 怪异盒子模型（border-box）：
width和height设置的是内容区+padding+border的总尺寸，盒子总宽度 = width + margin左右，padding和border的尺寸会向内挤压内容区。
实际开发中经常会全局设置怪异盒子模型，避免计算尺寸时出现偏差：
/* 全局设置怪异盒子模型 */
* {
box-sizing: border-box;
}
属性使用示例
下面是一个完整的盒子模型属性使用示例，创建一个总宽度为300px的盒子：
.card {
/* 使用怪异盒子模型，width为总宽度 */
box-sizing: border-box;
width: 300px;
height: 200px;
/* 内边距上下10px 左右20px */
padding: 10px 20px;
/* 1px实线灰色边框 */
border: 1px solid #cccccc;
/* 外边距上下0 左右auto 实现水平居中 */
margin: 0 auto;
background-color: #fafafa;
}
对应的HTML结构如下：
<div class="card">
这是一个卡片内容区域，内边距会撑开内容和边框的距离，边框包裹在内边距外侧，外边距让卡片和其他元素保持间距。
</div>