CSS盒模型
盒模型是HTML页面布局的核心
1. 盒模型核心概念
HTML中所有块状元素都可以看作一个矩形盒子，盒子由**内容区（content）、内边距（padding）、边框（border）、外边距（margin）**四部分组成，决定了元素在页面中占据的空间和位置。
2. 盒模型核心属性
（1）宽高属性：width/height
- 用于设置盒子内容区的宽度和高度，常用单位
px、百分比； - 块级元素不设置宽度时，默认占满父元素100%宽度；不设置高度时，高度由内容撑开。
（2）边框属性：border
| 属性 | 作用与语法 | 常用值 |
|---|---|---|
border-style |
设置边框样式 | solid（实线，最常用）、dashed（虚线）、dotted（点线）、double（双线）、none（无边框） |
border-width |
设置边框宽度 | 常用像素值，如2px |
border-color |
设置边框颜色 | 支持所有CSS颜色表示方法 |
border |
边框综合简写 | 语法：border: 宽度 样式 颜色; 例：border: 1px solid #eee; |
| 单方向边框 | 单独设置某一方向边框 | border-top/border-right/border-bottom/border-left，简历模块分隔线常用border-bottom |
多值规则：按「上→右→下→左」顺时针顺序设置，缺省值由对角值覆盖。例：
border-width: 5px 10px 15px;代表上5px、左右10px、下15px。
（3）内边距属性：padding
- 作用：设置元素内容与边框之间的距离，会撑大元素盒子；
- 语法规则：同边框一致，支持1-4个值，单方向设置
padding-top/padding-right/padding-bottom/padding-left； - 注意：
padding无法使用auto值实现居中。
（4）外边距属性：margin
- 作用：设置元素与其他元素之间的距离，控制元素在页面中的位置；
- 语法规则：同padding一致，支持1-4个值，单方向设置
margin-top/margin-right/margin-bottom/margin-left； - 核心用法：
margin: 0 auto;可实现块级元素相对于父元素水平居中，简历版心必用； - 外边距合并：两个垂直方向的外边距相遇时，会合并为两者中的较大值，开发中需注意避免。
3. 盒模型尺寸计算方式：box-sizing
这是布局的核心属性，彻底解决「加了padding/border后盒子变形」的问题。
| 属性值 | 尺寸计算规则 | 应用场景 |
|---|---|---|
content-box（默认值） |
盒子总宽度 = width + 左右padding + 左右border；总高度同理 | 传统盒模型，开发中少用 |
border-box |
盒子总宽度 = 设置的width值，padding和border都包含在width内；总高度同理 | 企业级开发首选，全局重置必加，布局计算零误差 |
4. 盒模型进阶属性（简历美化必用）
| 属性 | 作用与语法 | 简历应用场景 |
|---|---|---|
border-radius |
设置盒子圆角，语法：border-radius: 圆角半径; 支持1-4个值，50%可实现圆形 |
简历头像、按钮、卡片圆角美化 |
box-shadow |
设置盒子阴影，语法：box-shadow: 水平偏移 垂直偏移 模糊距离 阴影颜色; |
简历卡片、模块增加立体感，提升视觉层次 |