一、什么是CSS盒模型？
在网页布局中，每一个HTML元素都可以看成一个盒子。
CSS会把每个元素设计成一个矩形区域，这个区域由：
-
内容区域（content）
-
内边距（padding）
-
边框（border）
-
外边距（margin）
四部分组成。
这就是 CSS盒模型（Box Model）。
例如：
<div>
我是一个盒子
</div>浏览器会把它解析成：
+--------------------------------+
| margin |
| +------------------------+ |
| | border | |
| | +------------------+ | |
| | | padding | | |
| | | +------------+ | | |
| | | | content | | | |
| | | +------------+ | | |
| | +------------------+ | |
| +------------------------+ |
+--------------------------------+二、盒模型的组成
CSS盒模型由四部分组成：
| 部分 | 英文 | 作用 |
|---|---|---|
| 内容 | content | 存放文字、图片等内容 |
| 内边距 | padding | 内容和边框之间的距离 |
| 边框 | border | 包围盒子的线 |
| 外边距 | margin | 盒子与其他元素之间的距离 |
三、内容区域（content）
1. 什么是content？
content是盒子里面真正存放内容的区域。
例如：
<div>
Hello CSS
</div>其中：
Hello CSS就是content。
2. 设置内容宽高
CSS：
div{
width:300px;
height:200px;
}表示：
-
内容宽度300px
-
内容高度200px
注意：
默认情况下：
width
height设置的是：
内容区域的大小
不是整个盒子的大小。
四、内边距（padding）
1. 什么是padding？
padding表示：
内容区域和边框之间的距离。
例如：
div{
padding:20px;
}效果：
+----------------+
| |
| 内容 |
| |
+----------------+内容距离边框20px。
五、padding的四个方向
padding可以分别设置：
div{
padding-top:10px;
padding-right:20px;
padding-bottom:30px;
padding-left:40px;
}分别表示：
top
left 内容 right
bottom六、padding简写形式
1. 一个值
padding:20px;表示：
上下左右都是20px等价：
padding-top:20px;
padding-right:20px;
padding-bottom:20px;
padding-left:20px;2. 两个值
padding:10px 20px;表示：
上下：10px
左右：20px3. 三个值
padding:10px 20px 30px;表示：
上：10px
左右：20px
下：30px4. 四个值
padding:10px 20px 30px 40px;顺序：
上 右 下 左口诀：
上右下左，顺时针方向
七、边框（border）
1. 什么是border？
border表示盒子的边界线。
例如：
div{
border:1px solid black;
}组成：
border-width
border-style
border-color分别是：
| 属性 | 作用 |
|---|---|
| border-width | 边框宽度 |
| border-style | 边框样式 |
| border-color | 边框颜色 |
八、border常见样式
实线
border-style:solid;效果：
________虚线
border-style:dashed;效果：
- - - -点线
border-style:dotted;效果：
........九、单独设置某个方向的边框
例如：
只设置顶部：
border-top:2px solid red;左边：
border-left:2px solid blue;右边：
border-right:2px solid green;底部：
border-bottom:2px solid black;十、外边距（margin）
1. 什么是margin？
margin表示：
一个盒子和其他盒子之间的距离。
例如：
div{
margin:20px;
}效果：
20px
+-------------+
| |
| 盒子 |
| |
+-------------+
20px十一、margin的设置方式
和padding一样：
一个值
margin:20px;四周20px。
两个值
margin:10px 30px;表示：
上下10px
左右30px四个值
margin:10px 20px 30px 40px;表示：
上 右 下 左十二、盒子的实际大小计算
这是盒模型最重要的知识。
例如：
.box{
width:200px;
height:100px;
padding:20px;
border:10px solid black;
}问：
盒子实际宽度是多少？
计算：
实际宽度
= 内容宽度
+ 左右padding
+ 左右border所以：
200
+20+20
+10+10
=260px实际高度：
100
+20+20
+10+10
=160px最终盒子：
宽260px
高160px十三、box-sizing属性（重点）
默认情况下：
box-sizing:content-box;表示：
width只包含：
content例如：
div{
width:200px;
padding:20px;
border:5px solid;
}实际宽：
200+40+10
=250px1. border-box盒模型
CSS：
div{
box-sizing:border-box;
}表示：
width包含：
content + padding + border例如：
div{
width:200px;
padding:20px;
border:5px solid;
box-sizing:border-box;
}最终：
总宽度固定200px内部内容自动缩小。
十四、为什么开发中经常使用border-box？
实际开发中：
我们经常写：
*{
box-sizing:border-box;
}例如：
页面：
1000px宽
三个盒子如果：
.box{
width:33.33%;
padding:20px;
}默认盒模型：
33.33% + padding
超过1000px容易出现布局错误。
使用：
box-sizing:border-box;宽度包含padding：
布局更加稳定。
十五、margin塌陷问题
什么是margin塌陷？
当两个垂直方向的margin相遇时：
不会相加，而是取最大值。
例如：
盒子1：
margin-bottom:50px;盒子2：
margin-top:30px;结果：
不是：
50+30=80px而是：
50px这叫：
margin合并
十六、margin实现盒子水平居中
条件：
-
必须是块级元素
-
必须设置宽度
例如：
.box{
width:300px;
margin:0 auto;
}效果：
浏览器窗口
+----------------------+
+--------+
| box |
+--------+
+----------------------+解释：
margin-left:auto;
margin-right:auto;自动分配左右空间。
十七、图片和盒模型
图片：
<img src="1.jpg">默认属于：
inline-block可以设置：
img{
width:300px;
height:200px;
padding:10px;
border:5px solid;
}形成图片盒子。
十八、实际开发案例
卡片效果
HTML：
<div class="card">
<h2>CSS学习</h2>
<p>学习盒模型</p>
</div>CSS：
.card{
width:300px;
padding:20px;
border:1px solid #ccc;
margin:20px;
}效果：
+----------------+
| |
| CSS学习 |
| |
| 学习盒模型 |
| |
+----------------+十九、盒模型总结
盒模型结构：
margin
|
border
|
padding
|
content四个核心属性：
width / height
控制内容大小
padding
控制内容和边框距离
border
控制边框
margin
控制盒子之间距离
必须掌握：
1. 默认盒模型
box-sizing:content-box;width只表示内容。
2. 推荐盒模型
box-sizing:border-box;width包含：
content + padding + border二十、学习路线总结
CSS学习顺序推荐：
HTML标签
↓
CSS选择器
↓
CSS字体文本
↓
CSS背景
↓
元素显示模式
↓
盒模型 ⭐
↓
浮动布局
↓
Flex布局
↓
Grid布局