干货精讲 | 初级CSS面试高频考题

1. CSS 选择器的优先级是如何计算的？!important 会覆盖所有优先级吗？

1.1 考点

CSS权重计算规则、各类选择器优先级层级、!important特殊属性、样式覆盖底层逻辑

1.2 知识点详解

一、选择器优先级计算规则

CSS优先级通过**权重（四位进制数值）**判定，数值越大优先级越高，从高到低层级固定，同级样式后写覆盖先写：

内联样式：权重 1000，直接写在标签style属性中的样式
ID选择器：权重 0100，例：#box
类/伪类/属性选择器：权重 0010，例：.list、:hover、 $type="text"$
标签/伪元素选择器：权重 0001，例：div、p、::before
通配符/继承样式：权重 0000，优先级最低，无法覆盖上述所有选择器

权重计算为累加形式，不可进位。例如：1个类选择器(10) + 1个标签选择器(1) = 11，永远小于ID选择器(100)。

二、!important 属性详解

!important 用于强制提升样式优先级，常规场景下可以覆盖所有普通选择器、内联样式的权重，但并非万能：

同一元素多个样式同时添加 !important：依旧遵循权重规则，权重高者生效；权重相同，后写覆盖先写

css 复制代码

<div id="name" class="name"></div>


id > class; 因此都带import, 同样是id > class
#name {
    color: red !important; 
}

.name {
    color: green !important;
}

开发最佳实践：禁止滥用!important，会破坏CSS层级结构，难以维护，仅应急场景使用

1.3 答案

CSS优先级按照权重划分，层级从高到低：内联样式>ID选择器>类/伪类/属性选择器>标签选择器>通配符与继承样式，权重累加且不进位，同级样式后置覆盖前置。

!important能强制提升样式优先级，可覆盖绝大多数常规样式，但不能直接覆盖另一条带有!important的高权重样式

2. display: none 和 visibility: hidden 有什么区别？

2.1 考点

元素渲染机制、页面重排与重绘、占位空间、DOM事件触发规则

2.2 知识点详解

两者都能实现元素隐藏效果，但在页面占位、渲染性能、事件响应三个核心维度存在本质区别，具体对比如下：

对比维度	display: none	visibility: hidden
页面占位	不占用任何页面空间，元素直接从文档流移除	保留原有页面占位，仅视觉层面隐藏
渲染机制	触发重排+重绘，性能消耗更高	仅触发重绘，无重排操作，性能更优
DOM事件	元素彻底失效，无法绑定、触发任何事件	元素本体存在，可绑定事件，只是用户无法肉眼交互
继承特性	子元素同步隐藏，无法单独显示子元素	子元素可通过设置visibility: visible单独展示

使用场景：需要彻底移除元素并释放空间用display: none；仅隐藏视觉、保留布局结构用visibility: hidden。

2.3 答案

占位区别：display: none元素脱离文档流，不占用页面空间(对应vue中的v-show)；visibility: hidden保留元素占位；
渲染区别：前者触发重排加重绘，性能差，后者仅触发重绘；
事件区别：前者无法触发任何DOM事件，后者元素可绑定事件；
4继承区别：前者子元素全部隐藏，后者子元素可单独设置显示。

3. position: relative、absolute、fixed、sticky 有什么区别？各自参照的定位上下文是什么？

3.1 考点

定位属性底层逻辑、文档流特性、定位参照物、实际业务使用场景

3.2 知识点详解

3.1 relative（相对定位）

文档流：不脱离正常文档流，原始占位保留，不会影响周边元素布局
参照物：元素自身默认原始位置
用途：微调元素位置、作为子元素absolute定位的父级容器

3.2 absolute（绝对定位）

文档流：脱离正常文档流，释放原始占位，漂浮于页面上层
参照物：就近查找父级元素中，第一个设置过position（非static）的容器；若无，则参照根元素html
用途：弹窗、悬浮按钮、图标叠加等叠加类布局

3.3 fixed（固定定位）

文档流：脱离正常文档流
参照物：浏览器视口（viewport），不受页面滚动、父级容器影响
用途：顶部导航栏、底部tab栏、回到顶部按钮、全局弹窗

3.4 sticky（粘性定位）

文档流：常态下不脱离文档流，触发固定状态后脱离文档流
参照物：同时参照自身父容器与浏览器视口
特性：滚动页面时，元素未到达阈值为相对定位；到达阈值后切换为固定定位
用途：列表吸顶、分类标题粘性悬浮

3.3 答案

relative：相对自身原始位置定位，不脱离文档流，一般用于微调元素；

absolute：脱离文档流，参照最近非static父元素；

fixed：脱离文档流，固定参照浏览器视口，适配全局悬浮组件；

sticky：粘性定位，常态相对定位、触发阈值后固定，参照父容器与视口，多用于吸顶布局。

4. 什么是 BFC（Block Formatting Context）？它有什么特性？哪些情况会触发 BFC？

4.1 考点

CSS格式化上下文原理、布局隔离机制、浮动与边距塌陷解决方案

4.2 知识点详解

一、BFC定义

BFC全称块级格式化上下文，是浏览器独立的渲染隔离区域。BFC内部元素的渲染规则不会影响外部元素，外部元素也不会干扰内部，是浏览器用于规范块级元素布局的底层机制。

二、核心特性

内部块级元素垂直排列，从上到下依次渲染
同一个BFC内部，相邻块级元素的上下外边距会发生边距塌陷，取最大值而非累加
BFC区域不会与浮动元素产生重叠，可用于解决文字环绕问题
计算BFC高度时，会将内部浮动元素高度纳入计算，解决高度塌陷
BFC为独立隔离容器，内外布局互不干扰

三、触发BFC的常见条件

根元素 html（默认自带BFC）
浮动元素：float属性不为none
绝对定位元素：position为absolute/fixed
display属性：inline-block、flex、grid、table-cell
overflow属性：hidden、auto、scroll（最常用清除浮动方案）

4.3 答案

BFC即块级格式化上下文，是浏览器独立的布局隔离区域。

特性：内部元素垂直排布、解决浮动高度塌陷、隔绝内外布局、防止元素与浮动重叠，但同级元素会出现外边距塌陷。

常用触发方式：设置overflow:hidden、元素浮动、绝对定位、display设为inline-block/flex等。

5. Flex 布局的 flex-grow、flex-shrink、flex-basis 分别代表什么？

5.1 考点

弹性盒子分配规则、剩余空间分配、空间压缩机制、flex简写属性

5.2 知识点详解

三个属性均作用于Flex容器内的子项，用于控制子元素在主轴上的尺寸，flex完整语法：flex: grow shrink basis，默认值 flex:0 1 auto。

一、flex-basis

设置弹性子项的基础初始尺寸，优先级高于width/height；默认值auto，直接读取元素自身宽高；支持px、百分比等单位，用于划定元素原始大小。

二、flex-grow

放大比例，控制子项分配容器剩余空闲空间的权重；默认值0（不分配多余空间）。若多个子项设置grow值，剩余空间按数值比例分配。

三、flex-shrink

缩小比例，当子项基础尺寸总和超出容器宽度时，控制元素压缩权重；默认值1（自动压缩）；设置为0时，元素禁止被压缩。

补充常用简写

flex:1 = flex:1 1 0%：均分剩余空间，自适应放大缩小
flex:auto = flex:1 1 auto：基于自身尺寸，自适应分配空间
flex:none = flex:0 0 auto：固定尺寸，不放大、不压缩

5.3 答案

flex-basis：指定弹性子项初始基础尺寸，优先级高于宽高属性；

flex-grow：元素放大权重，用于分配容器剩余空闲空间，默认0不放大；

flex-shrink：元素缩小权重，容器空间不足时自动压缩元素，默认1可压缩，0禁止压缩。

6. CSS 盒子模型是什么？box-sizing: border-box 和 content-box 有什么区别？

6.1 考点

盒子模型组成结构、两种盒模型计算规则、前端开发最佳实践

6.2 知识点详解

一、CSS盒子模型

所有HTML元素都可以看作矩形盒子，由内到外分为四层：内容区(content)、内边距(padding)、边框(border)、外边距(margin)，决定元素整体尺寸与页面布局。

二、两种盒模型区别

1. content-box（标准盒模型，默认值）

开发者设置的width/height，仅代表内容区尺寸；元素真实整体尺寸计算公式：width + padding + border + margin。设置内边距、边框会直接撑大元素，容易导致布局错乱。

2. border-box（怪异盒模型）

开发者设置的width/height，代表内容+内边距+边框的总尺寸；内容区尺寸会自动自适应缩减，元素整体大小始终等于设定width/height，不受padding、border影响，是现代项目通用写法。

还记得怪异盒模型和标准盒模型是如何产生的吗？忘记了的去看一下上一篇文章哦！！

6.3 答案

CSS盒子模型由内容、内边距、边框、外边距四部分组成。

content-box为标准盒模型，width仅指代内容宽度，padding和border会撑大元素；

border-box为怪异盒模型

width包含内容、内边距、边框，修改内边距和边框不会改变元素整体尺寸，开发中推荐全局使用border-box。

7. 清除浮动的方法有哪些？为什么清除浮动是必要的？

7.1 考点

浮动副作用、高度塌陷成因、主流清除浮动方案及优缺点

7.2 知识点详解

一、为什么需要清除浮动

设置float的子元素会脱离正常文档流，父容器无法感知浮动子元素高度，导致父容器高度塌陷为0；进而引发布局错位、后续元素上浮重叠、页面排版崩坏等问题，因此必须清除浮动。

二、常用清除浮动方法

额外空标签法：在浮动元素末尾添加空div，设置clear:both；优点：简单易懂；缺点：新增冗余DOM节点，代码不优雅。
父级overflow：给父容器设置overflow:hidden；原理：触发BFC自动计算浮动高度；优点：代码简洁；缺点：溢出内容会被隐藏。
伪元素清除法（推荐）：给父类添加clearfix类，通过::after伪元素实现清除浮动；无冗余节点、无副作用，企业项目通用方案。

伪元素核心代码示例：

css 复制代码

.clearfix::after { 
    content: ""; 
    display: block;
    clear: both; 
    visibility: hidden;
    height: 0; 
}

7.3 答案

清除浮动的原因：浮动元素脱离文档流，造成父容器高度塌陷，引发页面布局错乱。

常用方法：1. 末尾添加空标签并设置clear:both；2. 父容器设置overflow:hidden触发BFC；3. 使用伪元素::after清除浮动（最优方案）。

8. px、em、rem、vw、vh 的区别和使用场景是什么？

8.1 考点

CSS单位底层参照、适配原理、移动端/PC端适配方案选型

8.2 知识点详解

一 px（像素）

属性：绝对单位，参照设备物理像素
特点：固定尺寸，适配性差，无法自动适配不同屏幕
场景：PC端固定布局、边框、图标、小尺寸固定元素

二 em

属性：相对单位，参照自身父元素字体大小
特点：存在层级嵌套叠加问题，维护难度高
场景：早期移动端适配，现阶段极少单独使用

三 rem

属性：相对单位，参照根元素html字体大小
特点：统一适配基准，可通过JS动态修改根字体适配多屏幕
场景：传统移动端H5整体布局适配

四 vw/vh

属性：视口相对单位，1vw=视口宽度1%，1vh=视口高度1%
特点：纯CSS适配，无需JS辅助，适配精度更高
场景：现代移动端、小程序、大屏自适应布局

8.3 答案

px是绝对像素单位，用于PC固定布局；

em相对父级字体，嵌套易混乱，现已少用；

rem相对根字体，适配简单，多用于传统移动端H5；

vw/vh基于浏览器视口，纯CSS自适应，适配现代移动端与大屏项目。

9. 什么是 CSS 垂直居中？至少说出三种实现方式。

9.1 考点

页面布局核心能力、不同居中方案优缺点、固定/不定宽高元素适配

9.2 知识点详解

CSS垂直居中指让子元素在父容器竖直方向居中对齐，分为固定宽高 、不定宽高两种场景，以下为三种最常用企业级方案：

方式一：Flex布局（万能方案，推荐）

无需区分元素宽高，一行代码即可实现水平+垂直居中，现代项目首选：

css 复制代码

.parent { 
 display: flex; 
 justify-content: center; /* 水平居中 */
 align-items: center; /* 垂直居中 */ 
}

方式二：定位+margin负值（适配固定宽高）

子元素宽高已知，通过绝对定位+负margin偏移实现居中：

css 复制代码

.parent { position: relative; } 

.child { 
 position: absolute; 
 top: 50%; left: 50%; 
 width: 200px; 
 height: 100px; 
 margin-left: -100px;
 margin-top: -50px; 
}

方式三：定位+transform（适配不定宽高）

不受元素宽高限制，利用transform自身偏移实现居中：

css 复制代码

.parent { position: relative; } 

.child { 
 position: absolute; 
 top: 50%; 
 left: 50%; 
 transform: translate(-50%,-50%); 
}

9.3 答案

垂直居中是让子元素在父容器竖直方向居中的布局方式，常用三种实现：

Flex布局，父容器设置display:flex，搭配align-items:center，万能适配；
绝对定位+负margin，仅适配固定宽高元素；
绝对定位+transform偏移，适配所有宽高元素。

10. :nth-child() 和 :nth-of-type() 有什么区别？

10.1 考点

CSS结构伪类匹配规则、筛选逻辑差异、实际使用踩坑点

10.2 知识点详解

一、:nth-child(n)

筛选逻辑：不区分标签类型，遍历父容器下所有同级子元素，匹配排序第n的元素，再判断是否符合指定标签，双重校验。

示例：div p:nth-child(2)，代表父元素下第二个子元素，且该元素必须是p标签。

二、:nth-of-type(n)

筛选逻辑：先按标签分组，在父容器内单独筛选指定类型的标签，在同类型标签中匹配第n个元素。

示例：div p:nth-of-type(2)，代表父元素下所有p标签里的第二个p元素，忽略其他类型标签。

核心区别总结

页面存在多种混杂标签时，两者结果差异极大；仅父容器内子元素标签完全一致时，两个伪类效果相同。

10.3 答案

nth-child：遍历父级全部子元素，按整体顺序匹配第n个元素，再校验标签类型；

nth-of-type：先筛选指定标签类型，仅在同类标签内按顺序匹配。简单来说，前者全局排序，后者同类内排序。