3.3 CSS盒子模型
课程概要
- CSS盒子模型概述
- CSS内边距
- CSS边框
- CSS外边距
- CSS外边距合并
3.3.1 CSS盒子模型-概述
1、盒子模型的内容范围包括
margin（外边距）、border（边框）、padding（内边距）、content部分组成
height、width
3.3.2 CSS盒子模型-内边距
1、内边距
内边距在content外，边框外
2、内边距属性
| 属性 | 描述 |
|---|---|
| padding | 设置所有边距 |
| padding-bottom | 设置底边距 |
| padding-left | 设置左边距 |
| padding-right | 设置右边距 |
| padding-top | 设置上边距 |
3.3.3 CSS盒子模型-边框
1、CSS边框：
我们可以创建出效果出色的边框，并且可以应用于任何元素
2、边框的样式：
border-style: 定义了10个不同的非继承样式，包括none
3、边框的单边样式：
| style |
|---|
| border-top-style |
| border-left-style |
| border-right-style |
| border-bottom-style |
4、边框的宽度：
border-width
5、边框单边的宽度：
| style |
|---|
| border-top-width |
| border-left-width |
| border-right-width |
| border-bottom-width |
6、边框的颜色：
border-color
7、边框单边的颜色
| style |
|---|
| border-top-color |
| border-left-color |
| border-right-color |
| border-bottom-color |
8、CSS3边框
| CSS3边框 | 说明 |
|---|---|
| border-radius | 圆角边框 |
| box-shadow | 边框阴影 |
| border-image | 边框图片 |
box-shadow 背景阴影右移移动像素、下移移动像素、背景阴影透明度、颜色
3.3.4 CSS盒子模型-外边距
1、外边距：
围绕在内容边框的区域就是外边距，外边距默认为透明区域
外边距接受任何长度单位、百分数值
2、外边距常用属性
| 属性 | 描述 |
|---|---|
| margin | 设置所有边距 |
| margin-bottom | 设置底边距 |
| margin-left | 设置左边距 |
| margin-right | 设置右边距 |
| margin-top | 设置上边距 |
3.3.5 CSS盒子模型-外边距合并
1、外边距合并：
外边距合并就是一个叠加的概念