CSS 结构伪类选择器 伪元素选择器 盒子模型

---

正文开始。

1. 结构伪类选择器

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

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

例如：

1.1 :nth-child(公式)

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

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

例如：

2. 伪元素选择器

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

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

注意：

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

例如：

3. 盒子模型

作用：布局网页，摆放盒子和内容

3.1 盒子模型的重要组成部分

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

例如：

<style>
	div {
		/* 内容区域 */
		width: 200px;
		height: 200px;
		bacdground-color: red;
		/* 内边距 */
		padding: 20px;
		/* 边框线 */
		border: 1px solid black;
		/* 外边距 */
		margin: 30px;
	}
</style>

3.2 盒子模型 - 边框线

属性名：border
属性值：边框线粗细 线条样式 颜色（不区分顺序）

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

<style>
	div {
		width: 200px;
		height: 200px;
		bacdground-color: red;
		
		/* 粗细为2像素的红色虚线边框 */
		border: 2px dashed red;
		
		/* 粗细为2像素的红色实线边框 */
		/* border: 2px solid red; */
		
		/* 粗细为2像素的红色点线边框 */
		/* border: 2px dotted red; */
	}
</style>

CSS 中允许单独对某一方向的边框线进行设置：

• 属性名：border-方位名词
• 属性值：边框线粗细 线条样式 颜色

方位名词	说明
top	顶部
right	右侧
left	左侧
bottom	底部

例如：

<style>
	div {
		width: 200px;
		height: 200px;
		background-color: red;

		border-top: 1px solid black;
		border-right: 2px dashed red;
		border-left: 3px dotted green;
		border-bottom: 2px dashed pink;
	}
</style>

3.3 盒子模型 - 内边距

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

例如：

<style>
	div {
		width: 200px;
		height: 200px;
		background-color: red;

		/* 所有方向一起设置 */
		/*padding: 20px;*/

		padding-top: 10px;
		padding-right: 20px;
		padding-left: 5px;
		padding-bottom: 30px;
	}
</style>

盒子模型内边距的多值写法：

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

3.4 盒子模型 - 尺寸计算

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

所以给盒子设置border / padding属性会撑大盒子，我们可以通过以下两种方法来避免：

• 手动减掉border / padding的尺寸
• 内减模式：box-sizing:border-box使 border / padding 不对盒子大小产生影响。

3.5 盒子模型 - 外边距

作用：拉开两个盒子之间的距离
属性名：margin
属性值：与 padding 写法、含义相同

<style>
	div {
		width: 200px;
		height: 200px;
		background-color: red;

		/* 外边距为20像素 */
		/* margin: 20px; */
		
		/* 垂直方向外边距为零，水平方向使盒子在浏览器中居中 */
		/* 版心居中的前提是盒子有宽度 */
		margin: 0 auto;
	}
</style>

外边距的多值写法：与 padding 多值写法相同。

3.6 盒子模型 - 元素溢出

作用：控制溢元素的内容的显示方式
属性名：overflow

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

例如：

3.7 外边距问题 - 合并现象

场景：垂直排列的兄弟元素，上下 margin 会合并
现象：取两个 margin 中较大值生效

3.8 外边距问题 - 塌陷问题

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

解决方法：

• 取消子集 margin，父级设置 padding（推荐）
• 父级设置 overflow:hidden
• 父级设置 border-top

3.9 行内元素 - 内外边距问题

场景：行内元素添加margin / padding时，无法改变元素垂直位置
解决方法：给行内元素添加line-height可以改变垂直位置

3.10 盒子模型 - 圆角

作用：设置元素的外边框为圆角。
属性名：border-radius
属性值：数字+px / 百分比（圆角半径）
多值写法：从左上角顺时针赋值，没有赋值的角与对角取值相同

常见应用:

• 正圆形状：给正方形盒子设置圆角属性值为宽高的一半或50%。
• 胶囊形状：给长方形盒子设置圆角属性值为盒子高度的一半。

3.11 盒子模型 - 阴影

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

注意：

• X轴偏移量和Y轴偏移量必须书写
• 默认是外阴影，内阴影需要添加inset

例如：

box-shadow: 2px 4px 10px 1px rgba(0,0,0,0.5);

4. 清除默认样式

作用：清除默认的样式。

例如：

<style>
	/* 清除内外间距 */
	* {
		margin: 0;
		padding: 0;
	}
	/* 清除列表的项目符号 */
	li {
		list-style: none;
	}
</style>