前端面试常考的CSS样式问题！！！

字体样式

描述	属性名称	效果描述
字体大小	font-size	调整文字大小
字体粗细	font-weight	调整文字粗细
字体倾斜	font-style	调整文字倾斜
行高	line-height	调整文字行距
字体族	font-family	指定字体类型
字体复合属性	font	复合属性，可同时设置多个字体相关属性
文本缩进	text-indent	调整首行文本的缩进量
文本对齐	text-align	设置文本的水平对齐方式
修饰线	text-decoration	添加或移除文本的修饰线
颜色	color	设置文字颜色

字体倾斜

属性名：font-style

属性值：

• 正常（不倾斜）:normal
• 倾斜：italic

清除文字倾斜效果：font-style:normal

<em>和<i>都是文字倾斜标签

行高

作用：设置多行文本的检举

属性名：line-height

属性值：

• 数字+px
• 数字（当前标签font-size属性值的倍数）

通过行高实现垂直居中效果：

​ 方法：行高属性值=盒子的高度值

​ 注意⚠️：只适用于单行文字的情况

扩展结论：

• 行高小于盒子高度，则文字偏上。
• 行高大于黑子高度，则文字偏下。

字体族

属性名：font-family

属性值：字体名称

衬线字体：

font-family属性最后设置一个字体族名名，网页开发建议使用无衬线字体。

字体符合属性

属性名：font

属性值：是否倾斜 -> 是否加粗 -> 字号/行高 -> 字体

（⚠️：有顺序要求！！！）

当然只有两个地方必须要写：字号和字体，其他可以省略：

font:10px "字体名称";

文本缩进

属性名：text-indent

属性值：

• 数字px
• 数字em（相对单位：1em就是当前元素1个文字的大小）

文本对齐

作用：控制内容水平对齐方式

属性名：text-align

属性值：

• center（居中对齐）
• left（左对齐）
• right（右对齐）

注意⚠️：

是给div盒子设置文字设置水平居中，对于图片居中是不可以实现的。text-align本质是控制内容的对齐方式，属性要设置给内容的父级。

如果一点要给图片居中的话，需要给图片外面套一个div盒子。

修饰线

属性名：text-decoration

属性值：

• none【无样式】
• underline【下划线】
• overlinde【上划线】
• line-through【删除线】

文字颜色

作用：更改文字颜色

属性名：color

属性值：

rgb表示法：

复合选择器

定义：由两个或多个基础选择器，通过不同的方式组合而成，

作用：更准确更高效的选择目标元素（标签）

后代选择器

后代选择器：选中某元素的后代元素。

选择器写法：父选择器（空格）子选择器{CSS属性}，父子选择器之间用空格隔开。

还可以直接类名 标签名也可以实现。

注意⚠️：后代选择器执行代码的时候，先执行孩子，后执行父亲，先找i后找ul。
例如：我们找刘德华，先确定刘德华（li），然后确定刘德华在淄博ul吃烧烤。

子代选择器

子代选择器：选中某元素的子代元素（最近的子级）

选择器写法：父选择器>子选择器{CSS属性}，父子选择器之间用>隔开。

错误写法❌正确写法✔️

并集选择器

并集选择器：选中多组标签设置相同的样式。

选择器写法：选择器1，选择器2，..，选择器N{CSS属性}，用逗号隔开。

交集选择器

交集选择器：选中同时满足多个条件的元素。

写法：标签.类名

伪类选择器

伪类选择器：伪类表示元素状态，选中元素的某个状态设置样式。

鼠标悬停状态：选择器:hover{CSS属性}

超链接伪类

超链接一共有四个状态：

（注意⚠️：这四个写法是有循序的，不能颠倒）

结构伪类选择器

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

• 选择器+first-child：查找第一个元素
• 选择器+last-child：查找
• 选择器+nth-child(m)：选择其中任意一个

使用公式查找多个元素:nth-child(公式)

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

伪元素选择器

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

• 选择器+::before：在元素里面的最前面添加一个伪元素。
• 选择器+::after：在元素里面的最后面添加一个伪元素。

注意⚠️：

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

CSS特性

层叠性

特点：

• 相同的属性会覆盖：后面的CSS属性覆盖前面的CSS属性
• 不同的属性会叠加：不同的CSS属性都生效

相同的属性，后面会覆盖前面的。

注意⚠️：选择器类型相同则遵循层叠性，否则按选择器优先级判断。

优先级

优先级：也叫权重，当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则。

规则：选择器优先级高的样式生效。

​ 公式：通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important（选中标签的范围越大，优先级越低）

!important的使用

div{
	color:green !important;
}

优先级 叠加规则

叠加计算：如果是复合选择器，则需要权重叠加计算。

公式：（行内样式，id选择器个数，类选择器个数，标签选择器个数）

规则：

• 从左向右依次比较选个数，同一级个数多的优先级高，如果个数相同，则向后比较。
• !important权重最高。
• 继承权重最低。

选择器权重与特点：

选择器类型	权重	说明	特点或备注
通配符	0	没有权重
标签选择器	1	累加
类选择器/伪类选择器	10	累加
ID选择器	100	累加
行内	1000
!important	无穷		权重最高，覆盖其他所有选择器

（注意⚠️：没有进位，只是一个呈现而已）

继承的权重是0，无法直接修改li的样式

Emmet写法

Emmet写法：代码的简写方式，输入缩写VSCode会自动生成对应的代码。

HTML：

说明	标签结构	Emmet语法示例
类选择器	<div class="box"></div>	div.box
ID选择器	<div id="box"></div>	div#box
同级标签	<div></div><p></p>	div+p
父子级标签	<div><p></p></div>	div>p
多个相同标签	<span>1</span><span>2</span><span>3</span>	span*3
有内容的标签	<div>内容</div>	div（内容）

CSS：大多数简写方式为属性单词的首字母

说明	CSS属性	Emmet语法示例
宽度	width	w
背景色	background-color	bgc
多个属性	width:200px;height:100px;background-color:#fff;	w200+h100+bgc

背景

描述	属性
背景色	background-color
背景图	background-image
背景图平铺方式	background-repeat
背景图位置	background-position
背景图缩放	background-size
背景图固定	background-attachment
背景复合属性	background

背景图片

属性名：background=image:url(/图片路径)

背景图平铺防护窗

属性名：background-repeat

属性值：

• no-repeat不平铺
• repeat平铺（默认）
• repeat-x水平方向平铺
• repeat-y垂直方向平铺

背景图位置

属性名：background-position

属性值：水平方向位置 垂直方向位置

• 关键字：Left \right\top\bottom\center
• 坐标：数字px（正负都可以）
  • 水平：正数向右，负数向左
  • 垂直：正数向下，负数向上

扩展：

• 关键字取值方式写法，可以颠倒取值顺序
• 可以只写一个关键字，另一个方向默认为居中；
• 数字只写一个值表示水平方向，垂直方向为居中。

背景缩放

作用：设置背景图片大小

属性名：background-size

属性值：

• 关键字
  • cover：等比例缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。（一定要把盒子铺满）
  • contain：等比例缩放背景图片以完全装入背景区，可能背景区部分空白。（一定要显示完图）
• 百分比：根据盒子尺寸计算图片大小
• 数字+单位

背景固定

作用：背景不会随着元素的内容滚动

属性名：background-attachment

属性值：

• scroll（图片不固定，可以被滚动）

• fixed（图片固定不滚动）

背景复合属性

属性名：background

属性值：背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定（空格隔开各个属性值，不区分顺序）

显示模式

显示模式：标签（元素）的显示方式。

作用：布局网页的时候，根据标签的显示模式选择合适的标签摆放内容。

块级元素

• 独占一行
• 可以设置宽度和高度
• 宽度默认是父级的100%

举例：<div> <p> <h>

行内元素

• 一行可以显示多个
• 设置宽度和高度属性不生效
• 宽度和高度尺寸由内容撑开

举例：<strong> <span> <em> <a> <button>

行内块元素

• 一行可以显示多个
• 设置宽高属性生效
• 宽高尺寸也由内容撑开

举例：<img>``<input> <td>

转换显示模式

属性名：dispaly

属性值：

• block：转成->块级元素
• inline-block：转成->行内块元素
• inline：转为->行内元素

在开发中最常见的就是将行内元素转换成块级元素，具体转换方式如下：

a{
	display:block;
	width:30px;
	height:30px;
}