一、结构伪类选择器

作用：根据元素的结构关系查找元素。

选择器	说明
E:first-child	查找第一个E元素
E:last-child	查找最后一个E元素
E:nth-child(N)	查找第N个E元素（第一个元素N值为1）

:nth-child(公式)
作用：根据元素的结构关系查找多个元素

功能	公式
偶数标签	2n
奇数标签	2n+1；2n-1
找到5的倍数的标签	5n
找到第五个以后的标签	n+5
找到第五个以前的标签	-n+5

二、伪元素选择器

作用：创建虚拟元素（伪元素）用来摆放装饰性内容。

选择器	说明
E::before	在E元素里面最前面添加一个伪元素
E::after	在E元素里面最后面添加一个伪元素

注意：

• 必须设置content:" "属性，用来摆放装饰性内容，如果没有内容，则引号留空即可
• 伪元素默认是行内显示模式
• 权重和标签选择器相同

用在以下情况：

三、盒子模型

1.盒子模型-组成
作用：布局网页，摆放盒子和内容
盒子模型重要组成部分：

• 内容区域 - width&height
• 内边距 - padding（出现在内容与盒子边缘之间）
• 边框线 - border
• 外边距 - margin（出现在盒子外面）

2.盒子模型 - 边缘线
属性名：border（bd）
属性值：边框线粗细 线条样式 颜色（不区分顺序）
常用线条样式

属性值	线条样式
solid	实线
dashed	虚线
dotted	点线

3.盒子模型-内边距
作用：设置内容与盒子边缘之间的距离
属性名：padding/padding-方位名词

div{
	padding: 30px;

	padding-top:30px; 
	padding-right:30px; 
	padding-bottom:30px;
	padding-left:30px;

	width: 200px;
	height: 200px;
	background-color: pink;
} 

4.盒子模型-内边距-多值写法
padding多值写法

取值个数	示例	含义
一个值	padding: 10px	四个方向内边距均为10px
四个值	padding: 10px 20px 40px 80px	上：10px；右：20px；下：40px；左：80px
三个值	padding: 10px 40px 80px	上：10px；左右：40px；下：80px
两个值	padding: 10px 80px	上下：10px；左右：80px

记忆方法：从上开始顺时针转一圈，如果当前方向没有数值，则取值和对面一样。

5.盒子模型-尺寸计算

• 默认情况
  盒子尺寸=内容尺寸+border尺寸+内边距尺寸

• 结论：给盒子加border / padding会撑大盒子

• 解决：

  • 手动做减法，减掉border / padding尺寸
  • 内减模式：box-sizing：border-box

6.盒子模型-外边距
作用：拉开两个盒子之间的距离
属性名：margin
提示：与padding属性值写法、含义相同

版心居中margin：0 auto;

7.清除默认样式
清除标签默认样式，比如：默认的内外边距。

* {
		margin: 0;
		padding: 0;
}

一般会同时写内减box-sizing: border-box;

去除列表的项目符号

li{
	list-style:none;
}

8.盒子模型-元素溢出
作用：控制溢出元素的内容的显示方式。
属性名：overflow
属性值：

属性值	效果
hidden	溢出隐藏
scroll	溢出滚动（无论是否溢出，都显示滚动条的位置）
auto	溢出滚动（溢出才显示滚动条位置）

9.外边距问题-合并现象
场景：垂直并排的兄弟元素，上下margin会合并
现象：取两个margin中的较大值生效

10.外边距问题-塌陷问题
场景：父子级标签，子级的添加上外边距会产生塌陷问题
现象：导致父级一起向下移动

解决办法：

取消子级margin，父级设置padding

父级设置overflow：hidden

父级设置border-top

11.行内元素-内外边距问题
场景：行内元素添加margin和padding，无法改变元素垂直位置
解决方法：给行内元素添加line-height可以改变垂直位置

12.盒子模型-圆角
作用：设置元素外边框为圆角。
属性名：border-radius
属性值：数字+px / 百分比

记忆从左上角顺时针复制，没有取值的角与对角相同

• 常见应用-正圆形状
  • 给正方形盒子设置圆角属性值为宽高的一半 / 50%
• 常见应用-胶囊形状
  • 给长方形盒子设置圆角属性为盒子高度的一半

13.盒子模型-阴影
作用：给元素设置阴影效果
属性名：box-shadow
属性值：X轴偏移量 Y轴偏移量 模糊半径 扩散半径 颜色 内外阴影

注意：
x轴偏移量和y轴偏移量必须书写
默认是外阴影，内阴影需要添加inset