一、选择器
1.结构伪类选择器
（1）作用:根据元素的结构关系查找元系
（2）选择器
| 选择器 | 说明 |
|---|---|
| E:first-child | 查找第一个E元素 |
| E:last-child | 查找最后一个E元素 |
| E:nth-child(N) | 查找第一个E元素 |
（3）E:nth-chid(公式)
作用：根据元素的结构关系查找多个元素
2.伪元素选择器
（1）作用：创建虚拟元素（伪元素），用来摆放装饰性的内容
（2）选择器
| 选择器 | 说明 |
|---|---|
| E::before | 在E元素里面最前面添加一个伪元素 |
| E::after | 在E元素里面最前面添加一个伪元素 |
（3）注意：
- 必须设置 content:" "属性，用来设置伪元素的内容，如果没有内容,则引号留空即可
- 伪元素默认是行内显示模式
- 权重和标签选择器相同
盒子模型
1.盒子模型——组成
- 内容区域：width&height
- 内边距：pagging（出现在内容与盒子边缘之间）
- 边框线：border
- 外边距：mardin（出现在盒子外面）
1.1边框线
（1）属性名：border
（2）属性值：边框宽度(粗细) 边框样式 边框颜色
（3）设置单方向边框线
1.2内边距
（1）作用：设置内容与盒子边缘之间的距离
（2）属性名：padding/padding-方位名词
（3）多值写法：从顶端顺时针赋值，无值则取其对面值
1.3尺寸计算
（1）默认情况：盒子尺寸=内容尺寸+border尺寸+内边距尺寸
（2）结论：给盒子加border或padding会撑大盒子
（3）解决办法：
- 手动做减法，减掉border/padding的尺寸
- 内减模式：box-sizing：border-box
1.4外边距
（1）作用：拉开两个盒子之间的距离
（2）属性名：margin
（3）提示：与padding属性值写法、含义相同
（4）版心居中：将宽度设为auto
2.清除默认样式
*{
margin:0;
padding:0;
}
3.问题
3.1元素溢出
（1）作用：控制溢出元素的内容和显示方式
（2）属性名：overflow
（3）属性值
3.2外边距问题——合并现象
（1）场景：垂直排列的兄弟元素上下margin会合并
（2）现象：取两个margin中间的较大值生效
3.3外边距问题——塌陷问题
（1）场景：父子级的标签，子级的添加上外边距会产生塌陷问题
（2）现象：导致父级一起向下移动
（3）解决办法：
- 取消子级margin，父级设置padding
- 父级设置overflow-hiding（溢出隐藏）
- 父级设置border-top
3.4行内元素——内外边距问题
（1）场景：行内元素添加margin和padding无法改变元素垂直位置
（2）解决方法：给行内元素添加line-height可以改变垂直位置
4.盒子模型——圆角
（1）作用：设置元素的外边框为圆角
（2）属性名：border-radius
（3）属性值：数字+px/百分比
（4）属性值是圆角半径
（5）常用模型：
- 正圆模型：给正方形盒子设置圆角属性值为宽、高的一半/50%
- 胶囊形状：给长方形盒子设置圆角属性值为盒子高度的一半
5.盒子模型——阴影
（1）作用：给元素设置阴影效果
（2）属性名：box-shadow
（3）属性值： X轴偏移量 y轴偏移量 模糊半径 扩散半径 颜色 内外阴影
（4）注意：
- X轴偏移量和y轴偏移量必须书写
- 默认是外阴影，内阴影需要添加inset
