一、盒模型概念
概念：每个HTML元素都可以看作一个矩形盒子，由四部分组成：
content — 内容区域（文字、图片等）padding — 内边距（内容与边框之间的距离）border — 边框margin — 外边距（元素与其他元素之间的距离）
👇 盒模型可视化演示
margin（外边距）
border（边框）
padding（内边距）
content（内容）
二、width / height
概念：
推荐：使用
width 和 height 设置的是内容区域的宽高，不包含 padding 和 border。推荐：使用
max-width 替代 width，更灵活。
👇 固定宽度 vs 最大宽度
固定宽度 300px
最大宽度 300px（可缩小）
1/* 固定宽度 */
2width: 300px;
3
4/* 最大宽度（推荐） */
5max-width: 300px;
6
7/* 最小宽度 */
8min-width: 200px;
三、box-sizing
概念：
最佳实践：全局设置
box-sizing 控制盒模型的计算方式：content-box（默认）— width/height 只包含内容border-box — width/height 包含 content + padding + border最佳实践：全局设置
* { box-sizing: border-box; }
👇 box-sizing 对比演示
content-box（默认）
实际宽度：200 + 20×2 + 5×2 = 250px
border-box
实际宽度：200px（包含padding和border）
1/* 全局设置 border-box */
2* {
3 box-sizing: border-box;
4}
5
6/* content-box（默认） */
7.box1 {
8 width: 200px;
9 padding: 20px;
10 border: 5px solid #3498db;
11 /* 实际宽度 = 200 + 20×2 + 5×2 = 250px */
12}
13
14/* border-box */
15.box2 {
16 width: 200px;
17 padding: 20px;
18 border: 5px solid #e74c3c;
19 box-sizing: border-box;
20 /* 实际宽度 = 200px（包含padding和border） */
21}
四、padding（内边距）
概念：
语法：
padding 控制内容与边框之间的距离。语法：
padding: 上 右 下 左;（顺时针方向）
👇 padding 四个方向
padding: 20px
四边都是20px
四边都是20px
padding: 10px 20px
上下10px 左右20px
上下10px 左右20px
padding: 10px 20px 30px
上10 左右20 下30
上10 左右20 下30
padding: 10px 20px 30px 40px
上 右 下 左
上 右 下 左
1/* 四个方向相同 */
2padding: 20px;
3
4/* 上下 | 左右 */
5padding: 10px 20px;
6
7/* 上 | 左右 | 下 */
8padding: 10px 20px 30px;
9
10/* 上 | 右 | 下 | 左（顺时针） */
11padding: 10px 20px 30px 40px;
12
13/* 单独设置 */
14padding-top: 10px;
15padding-right: 20px;
16padding-bottom: 30px;
17padding-left: 40px;
五、margin（外边距）
概念：
注意：margin 可以设置负值，让元素向反方向移动。
居中技巧：
margin 控制元素与其他元素之间的距离。注意：margin 可以设置负值，让元素向反方向移动。
居中技巧：
margin: 0 auto; 可以让块级元素水平居中。
👇 margin 演示
margin: 15px
margin: 15px
1/* 水平居中 */
2margin: 0 auto;
3
4/* 负margin */
5margin-top: -20px; /* 向上移动 */
6
7/* margin 塌陷问题 */
8/* 父子元素的垂直margin会合并，取较大值 */
9.parent {
10 margin-top: 20px;
11}
12.child {
13 margin-top: 30px;
14 /* 实际父元素顶部margin = max(20, 30) = 30px */
15}
六、border（边框）
概念：
常用样式：
border 设置元素边框，常用简写：border: 宽度 样式 颜色常用样式：
solid（实线）、dashed（虚线）、dotted（点线）
👇 不同边框样式
solid 实线
dashed 虚线
dotted 点线
double 双线
1/* 简写 */
2border: 2px solid #3498db;
3
4/* 单独设置 */
5border-width: 2px;
6border-style: solid;
7border-color: #3498db;
8
9/* 单边设置 */
10border-top: 2px solid #e74c3c;
11border-bottom: 1px dashed #2ecc71;
12
13/* 无边框 */
14border: none;
七、border-radius（圆角）
概念：
圆形：设置
border-radius 设置圆角，值可以是 px 或 %。圆形：设置
border-radius: 50% 可以变成圆形。
👇 不同圆角效果
10px
20px
50%
胶囊形
1/* 四角相同 */
2border-radius: 10px;
3
4/* 圆形（正方形元素） */
5border-radius: 50%;
6
7/* 胶囊形（长方形元素） */
8border-radius: 30px;
9
10/* 单独设置四角 */
11border-radius: 10px 20px 30px 40px; /* 左上 右上 右下 左下 */
八、overflow（溢出处理）
概念：
常用值：
overflow 控制内容超出容器时的处理方式。常用值：
visible（默认）、hidden、auto、scroll
👇 overflow 不同值对比
overflow: visible
这是一段很长的文字内容，会溢出容器显示在外面
overflow: hidden
overflow: auto
这是一段很长的文字内容，超出部分会出现滚动条
1/* 默认，溢出内容可见 */
2overflow: visible;
3
4/* 溢出内容隐藏 */
5overflow: hidden;
6
7/* 溢出内容显示滚动条 */
8overflow: auto;
9
10/* 只显示横向滚动条 */
11overflow-x: auto;
12
13/* 只显示纵向滚动条 */
14overflow-y: auto;