作用：布局网页，摆放盒子和内容。
1. 盒子模型组成
内容区域：width和height
内边距：padding（出现在内容与盒子边缘之间）
边框线：border
外边距：margin（出现在盒子外面）
2. 边框线
属性名：border
属性值：边框线粗细 线条样式 颜色（不区分顺序）
2.1 常用线条样式
| 线条样式 | 属性值 |
| 实线 | solid |
| 虚线 | dashed |
| 点线 | dotted |
2.2 设置单方向边框线
属性名：border-方向名词（top、right、left、bottom）
属性值：边框线粗细 线条样式 颜色（不区分顺序）
<style>div {width: 200px;height: 200px;background-color: pink;border-top: 1px solid #888;border-right: 2px dashed red;border-bottom: 5px dotted green;border-left: 10px solid orange;}
</style>3. 内边距
作用：设置内容与盒子边缘之间的距离。
属性名：padding/padding-方位名词
<style>div {/*四个方向 内边距相同 */padding: 30px;/*单独设置一个方向内边距*/padding-top: 10px;padding-right: 20px;padding-bottom: 40px;padding-left: 80px;width: 280px;height: 200px;background-color: pink;}
</style>padding多值写法
| 取值个数 | 示例 | 含义 |
| 一个值 | padding: 10px; | 四个方向内边距均为10px |
| 四个值 | Padding: 10px 20px 40px 0Px; | 上:10px;右:20px;下:40px;左:80pX |
| 三个值 | padding:10px 40px 80x; | 上:10px;左右:40px;下:80pX |
| 两个值 | padding:10px 80px; | 上下:10px;左右:80px |
4. 盒子模型尺寸计算
默认情况：盒子尺寸=内容尺寸+border尺寸+内边距尺寸
结论：给盒子加border和padding会撑大盒子
解决：
- 手动减法：设置盒子尺寸时减去border和padding的尺寸
- 内减模式：会自动调整盒子，不会撑大盒子，语法：box-sizing : border-box
<style>div {width: 200px;height: 200px;/*手动减法*//* width: 160px;height: 160px; */background-color: pink;padding: 20px;box-sizing: border-box;}
</style>5. 外边距
作用：拉开两个盒子之间的距离（不会撑大盒子）
属性名：margin/margin-方位名词，支持多值写法
<style>div {width: 100px;height: 100px;background-color: orange;/* 外边距，不会撑大盒子 */margin-top: 50px;margin-left: 100px;}
</style>版心居中效果
<style>div {width: 100px;height: 100px;background-color: orange;/* 版心居中 */margin: 50px auto;}
</style>6. 外边距问题
6.1 外边距合并现象
场景：垂直排列的兄弟元素，上下margin会合并
现象：取两个margin中的较大值生效
6.2 外边距塌陷问题
场景：父子级的标签，子级的添加上外边距会产生塌陷问题。
现象：导致父级一起向下移动。
解决方法：
- 取消子级margin，父级设置padding（推荐）
- 出现塌陷问题后，父级设置overflow:hidden
- 出现塌陷问题后，父级设置border-top
7. 行内元素内外边距问题
场景：行内元素添加margin和padding，无法改变元素垂直位置。
解决方法：给行内元素添加line-height可以改变垂直位置。
<style>span {/* margin 和 padding 属性，无法改变垂直位置 */margin: 50px;padding: 20px;/*行高可以改变垂直位置 */line-height: 100px;}
</style>8. 盒子圆角
作用：设置元素的外边框为圆角。
属性名：border-radius
属性值：数字+px/百分比
<style>div {width: 100px;height: 100px;background-color: orange;/* 从左上角顺时针赋值，没有赋值的取对角值 */border-radius: 20px;}
</style>8.1 正圆形状应用
给正方形盒子设置圆角属性值为宽高的一半/50%。
<style>img {width: 200px;height: 200px;border-radius: 100px;/* 或者 */border-radius: 50%;}
</style>8.2 胶囊形状应用
给长方形盒子设置圆角属性值为盒子高度的一半。
<style>div {width: 200px;height: 50px;background-color: orange;border-radius: 25px;}
</style>9. 盒子阴影
作用：给元素设置阴影效果
属性名：box-shadow
属性值：x轴偏移量 y轴偏移量 模糊半径 扩散半径 颜色 内外阴影
注意：
- x轴偏移量和Y轴偏移量必须书写
- 默认是外阴影，内阴影需要添加inset
<style>div {margin: 5px auto;width: 200px;height: 80px;background-color: orange;box-shadow: 2px 5px 10px 1px rgba(0, 0, 0, 0.5)}
</style>10. 元素溢出
作用：控制溢出元素的内容显示方式。
属性名：overflow
| 属性值 | 效果 |
| hidden | 溢出隐藏（推荐） |
| scroll | 溢出滚动（无论是否溢出，都显示滚动条位置） |
| auto | 溢出滚动（溢出才显示滚动条位置） |