目录
盒子模型1、盒子模型的介绍2、内容区域的宽度和高度3、边框（ border ）3.1 边框（border）- 单个属性3.2 边框（border）- 连写形式3.3 边框（border）- 单方向设置3.4 盒子实际大小初级计算公式4、内边距（ padding ）4.1 内边距（padding）- 取值4.2 内边距（padding）- 单方向设置4.3 盒子实际大小终极计算公式4.4 不会撑大盒子的特殊情况4.5 CSS3盒模型（自动内减）5、外边距（margin）5.1 外边距（margin）- 取值5.2 外边距（margin） - 单方向设置5.3 margin单方向设置的应用5.4 清除默认内外边距5.5 外边距正常情况5.6 外边距折叠现象 – ① 合并现象5.7 外边距折叠现象 – ② 塌陷现象5.8 行内元素的margin和padding无效情况盒子模型
1、盒子模型的介绍
（1）盒子的概念
① 页面中的每一个标签，都可看做是一个 “盒子”，通过盒子的视角更方便的进行布局
② 浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为 盒子
（2）盒子模型
➢ CSS 中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成，这就是 盒子模型
2、内容区域的宽度和高度
➢ 作用：利用 width 和 height 属性默认设置是盒子 内容区域 的大小
➢ 属性：width / height
➢ 常见取值：数字+px
例子：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 100px;height: 100px;background-color: aquamarine;}</style></head><body><div>这是一个盒子</div></body></html>
效果展示：
3、边框（ border ）
3.1 边框（border）- 单个属性
➢ 作用：给设置边框粗细、边框样式、边框颜色效果
➢ 单个属性：
例子：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 100px;height: 100px;background-color: aquamarine;border-width: 5px;border-style: dashed;border-color: darkorange;}</style></head><body><div>这是一个盒子</div></body></html>
效果展示：
3.2 边框（border）- 连写形式
➢ 属性名：border
➢ 属性值：单个取值的连写，取值之间以空格隔开
• 如：border : 10px solid red;
➢ 快捷键：bd + tab（在VS Code中）
例子：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 100px;height: 100px;background-color: aquamarine;border: 10px dotted pink;}</style></head><body><div>这是一个盒子</div></body></html>
效果展示：
3.3 边框（border）- 单方向设置
➢ 场景：只给盒子的某个方向单独设置边框
➢ 属性名：border - 方位名词
➢ 属性值：连写的取值
例子：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 100px;height: 100px;background-color: aquamarine;border-top: 10px dotted pink;}</style></head><body><div>这是一个盒子</div></body></html>
效果展示：
3.4 盒子实际大小初级计算公式
➢ 需求：盒子尺寸 200*200，背景绿色，边框10px 实线 黑色，如何完成？
• 注意点： ① 设置 width 和 height 是内容的宽高！② 设置 border 会撑大盒子！
➢ 盒子实际大小初级计算公式：
• 盒子宽度 = 左边框 + 内容宽度 + 右边框
• 盒子高度 = 上边框 + 内容高度 + 下边框
➢ 解决：当盒子被 border 撑大后，如何满足需求？
• 解决：计算多余大小，手动在内容中减去（手动内减）
例子：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 200px;height: 200px;background-color: green;border: 10px solid black;}</style></head><body><div>这是一个盒子</div></body></html>
效果展示：
由图所示，盒子 div 被撑大了，想要的 div 本来是200*200的。
例子（手动内减）：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 180px;height: 180px;background-color: green;border: 10px solid black;}</style></head><body><div>这是一个盒子</div></body></html>
效果展示：
4、内边距（ padding ）
4.1 内边距（padding）- 取值
➢ 作用：设置 边框 与 内容区域 之间的距离
➢ 属性名：padding
➢ 常见取值：
➢ 记忆技巧：从上开始赋值，然后顺时针赋值，如果没设置赋值的，看对面的！！
例子（一个值）：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 100px;height: 100px;background-color: aqua;padding: 10px;}</style></head><body><div>这是一个盒子</div></body></html>
效果展示：
例子（三个值）：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 100px;height: 100px;background-color: aqua;padding: 10px 20px 30px;}</style></head><body><div>这是一个盒子</div></body></html>
效果展示：
4.2 内边距（padding）- 单方向设置
➢ 场景：只给盒子的某个方向单独设置内边距
➢ 属性名：padding - 方位名词
➢ 属性值：数字 + px
例子：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 100px;height: 100px;background-color: aqua;padding-top: 20px;}</style></head><body><div>这是一个盒子</div></body></html>
效果展示：
4.3 盒子实际大小终极计算公式
➢ 需求：盒子尺寸200*200，背景粉色，边框10px实线黑色，上下左右20px的内边距，如何完成？
• 注意点：① 设置 width 和 height 是内容的宽高！② 设置 border 会撑大盒子 ③ 设置 padding 会撑大盒子
➢ 盒子实际大小终极计算公式：
• 盒子宽度 = 左边框 + 左padding + 内容宽度 + 右padding + 右边框
• 盒子高度 = 上边框 + 上padding + 内容宽度 + 下padding + 下边框
➢ 解决：当盒子被 border 和 padding 撑大后，如何满足需求？
• 自己计算多余大小，手动在内容中减去（手动内减）
例子：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 200px;height: 200px;background-color: pink;border: 10px solid black;padding: 20px;}</style></head><body><div>这是一个盒子</div></body></html>
效果展示：
由图所示，盒子 div 加了 border 和 padding 被撑大了，想要的 div 本来是200*200的
例子（手动内减）：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 140px;height: 140px;background-color: pink;border: 10px solid black;padding: 20px;}</style></head><body><div>这是一个盒子</div></body></html>
效果展示：
4.4 不会撑大盒子的特殊情况
➢ 不会撑大盒子的特殊情况（块级元素）
（1）如果子盒子没有设置宽度，此时宽度默认是父盒子的宽度
（2）此时给子盒子设置左右的 padding 或者左右的border，此时不会撑大子盒子
例子：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.father {width: 200px;height: 150px;background-color: #7FFFD4;}.son {background-color: pink;border: 10px solid black;padding: 20px;}</style></head><body><div class="father"><div class="son">这是一个盒子</div></div></body></html>
效果展示：
4.5 CSS3盒模型（自动内减）
➢ 需求：盒子尺寸200*200，背景粉色，边框10px实线黑色，上下左右20px的内边距，如何完成？
• 给盒子设置 border 或 padding时，盒子会被撑大，如果不想盒子被撑大？
➢ 解决方法 ① ：手动内减
• 操作：自己计算多余大小，手动在内容中减去
• 缺点：项目中计算量太大，很麻烦
➢ 解决方法 ② ：自动内减
• 操作：给盒子设置属性 box-sizing : border-box ; 即可
• 优点：浏览器会自动计算多余大小，自动在内容中减去
例子：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 200px;height: 200px;background-color: pink;border: 10px solid black;padding: 20px;box-sizing: border-box;}</style></head><body><div>这是一个盒子</div></body></html>
效果展示：
5、外边距（margin）
5.1 外边距（margin）- 取值
➢ 作用：设置边框以外，盒子与盒子之间的距离
➢ 属性名：margin
➢ 常见取值：
➢ 记忆技巧：从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面的！！
例子（一个值）：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 200px;height: 200px;background-color: #7FFFD4;border: 10px solid black;padding: 20px;box-sizing: border-box;margin: 10px;}</style></head><body><div>这是一个盒子</div></body></html>
效果展示：
例子（三个值）：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 200px;height: 200px;background-color: #7FFFD4;border: 10px solid black;padding: 20px;box-sizing: border-box;margin: 10px 20px 30px;}</style></head><body><div>这是一个盒子</div></body></html>
效果展示：
5.2 外边距（margin） - 单方向设置
➢ 场景：只给盒子的某个方向单独设置外边距
➢ 属性名：margin - 方位名词
➢ 属性值：数字 + px
例子：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 200px;height: 200px;background-color: #7FFFD4;border: 10px solid black;padding: 20px;box-sizing: border-box;margin-top: 50px;}</style></head><body><div>这是一个盒子</div></body></html>
效果展示：
5.3 margin单方向设置的应用
➢ 应用：
5.4 清除默认内外边距
➢ 场景：浏览器会默认给部分标签设置默认的 margin 和 padding，但一般在项目开始前需要先清除这些标签默认的
margin 和 padding，后续自己设置
• 比如：body标签默认有margin：8px
• 比如：p标签默认有上下的margin
• 比如：ul标签默认由上下的margin和padding-left
• ……
➢ 解决方法例子：
①
②
5.5 外边距正常情况
➢ 场景：水平布局的盒子，左右的 margin 正常，互不影响
➢ 结果：最终两者距离为左右 margin 的和
例子：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 100px;height: 100px;background-color: #7FFFD4;display: inline-block;margin: 20px;}</style></head><body><div class="one">第一个盒子</div><div class="two">第二个盒子</div></body></html>
效果展示：
5.6 外边距折叠现象 – ① 合并现象
➢ 场景：垂直布局 的 块级元素，上下的 margin 会合并
➢ 结果：最终两者距离为 margin 的最大值
➢ 解决方法：避免就好
• 只给其中一个盒子设置 margin 即可
例子：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 100px;height: 100px;background-color: #7FFFD4;}.one {margin-bottom: 50px;}.two {margin-top: 50px;}</style></head><body><div class="one">第一个盒子</div><div class="two">第二个盒子</div></body></html>
效果展示：
由图所示，两盒子的外边距合并了，若想给两盒子之间设置间距，设置其中一个盒子的上外边距或者下外边距就可以了。
5.7 外边距折叠现象 – ② 塌陷现象
➢ 场景：互相嵌套 的 块级元素，子元素的 margin-top 会作用在父元素上
➢ 结果：导致父元素一起往下移动
➢ 解决方法：
（1）给父元素设置 border-top 或者 padding-top（分隔父子元素的 margin-top）
（2）给父元素设置 overflow：hidden
（3）转换成行内块元素
（4）设置浮动
例子：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.father {width: 200px;height: 200px;background-color: #7FFFD4;}.son {width: 100px;height: 100px;background-color: coral;margin-top: 50px;}</style></head><body><div class="father"><div class="son"></div></div></body></html>
效果展示：
解决办法①（给父级添加 border 或者 padding）：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.father {width: 200px;height: 200px;background-color: #7FFFD4;/* 解决办法一 */border: 1px solid #fff;/* 或者padding: 1px; */}.son {width: 100px;height: 100px;background-color: coral;margin-top: 50px;}</style></head><body><div class="father"><div class="son"></div></div></body></html>
注意：如果设计稿中没有 border 或者 padding，我们就不能使用 border 或者 padding 解决外边距塌陷问题。
解决办法②（给父级添加 overflow: hidden; ）：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.father {width: 200px;height: 200px;background-color: #7FFFD4;/* 解决办法二 */overflow: hidden;}.son {width: 100px;height: 100px;background-color: coral;margin-top: 50px;}</style></head><body><div class="father"><div class="son"></div></div></body></html>
解决办法③（把父级或者子级变为行内块元素）：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.father {width: 200px;height: 200px;background-color: #7FFFD4;}.son {width: 100px;height: 100px;background-color: coral;margin-top: 50px;/* 解决办法三 */display: inline-block; }</style></head><body><div class="father"><div class="son"></div></div></body></html>
解决办法④（给父级或者子级设置浮动 float: left; ）：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.father {width: 200px;height: 200px;background-color: #7FFFD4;}.son {width: 100px;height: 100px;background-color: coral;margin-top: 50px;/* 解决办法四 */float: left;}</style></head><body><div class="father"><div class="son"></div></div></body></html>
以上四种办法，都能解决外边距的塌陷问题，效果都如下：
建议使用给父元素设置 overflow：hidden 的方法解决外边距的塌陷问题。
5.8 行内元素的margin和padding无效情况
➢ 场景：给行内元素设置 margin 和 padding 时
➢ 结果：
（1）水平方向的 margin 和 padding 布局中有效！
（2）垂直方向的 margin 和 padding 布局中无效！
例子：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>span {margin: 100px;/* padding: 100px; */}</style></head><body><span>span</span><span>span</span></body></html>
效果展示（给行内元素 span 设置 padding: 100px; 效果也如下）：
由图所示，给行内元素 spa n设置 margin 或者 padding 时，水平方向的设置生效了，即 margin-left 和 margin-right（或 padding-left 和 padding-right ）的设置可以生效，而垂直方向的设置无效，即 margin-top 和 margin-bottom（或 padding-top 和 padding-bottom）的设置无效。
➢ 若想改变行内元素垂直方向的位置，可给行内元素添加行高 line-height
例子：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>span {margin: 100px;/* padding: 100px; */line-height: 200px;}</style></head><body><span>span</span><span>span</span></body></html>
效果展示：
