前端面试必背：CSS 高频核心知识点总结（超全整理）大家好，这篇文章给大家整理了前端面试中 CSS 最常问的核心知识点，

大家好，这篇文章给大家整理了前端面试中 CSS 最常问的核心知识点，内容覆盖盒子模型、选择器优先级、单位、隐藏元素、BFC、居中、布局、回流重绘、适配、动画等高频考点，适合面试复习、日常速查，直接复制就能用。

一、CSS 盒子模型

浏览器渲染页面时，会把元素看成一个盒子，包含：内容 content、内边距 padding、边框 border、外边距 margin。

标准盒模型（content-box）
- width/height 只包含 content
- 总宽度 = width + padding + border + margin
怪异盒模型（border-box）
- width/height 包含 content + padding + border
- 更符合直观布局，常用在移动端和组件里

css

box-sizing: content-box;   /* 标准盒模型（默认） */
box-sizing: border-box;    /* IE/怪异盒模型（推荐） */

二、CSS 选择器与优先级

常见选择器

标签选择器、类选择器、ID 选择器
后代选择器、子代选择器、相邻兄弟选择器
属性选择器、伪类选择器、伪元素选择器
群组选择器等

优先级（从高到低）

!important > 行内样式 > ID 选择器 > 类选择器 / 伪类 / 属性选择器 > 标签选择器 > 通配符

记住一句话：权重大的优先，权重相同就近覆盖。

三、em /px/rem /vw/vh 区别

px：绝对单位，像素，固定大小
em：相对单位，相对于父元素字体大小
rem：相对单位，相对于根元素 html 字体大小
vw：视口宽度，1vw = 1% 视口宽度
vh：视口高度，1vh = 1% 视口高度

使用场景

PC 端常用：px、%
移动端适配：rem、vw/vh、flex、grid

四、CSS 隐藏元素的方法及区别

display: none
- 不占空间，脱离文档流，不触发事件
visibility: hidden
- 占空间，隐藏，不触发事件
opacity: 0
- 占空间，透明，可以触发事件
transform: scale(0)
- 占空间，视觉隐藏，不触发事件
width:0; height:0; overflow:hidden
- 不占空间，内容隐藏
clip-path: polygon(0 0 0 0 0 0)
- 裁剪区域，视觉消失，原位置仍占空间

五、BFC 块级格式化上下文

是什么

一块独立的渲染区域，内部元素不会影响外部，外部也不会影响内部。

BFC 特点

计算 BFC 高度时，会包含浮动元素
BFC 区域不会与浮动元素重叠
可以解决 margin 重叠 问题

如何创建 BFC

overflow 不为 visible
float 不为 none
position: absolute / fixed
display: flex / grid / inline-block / table-cell 等

常见应用

清除浮动
解决外边距塌陷
防止文字环绕浮动元素

六、元素水平垂直居中方案（高频）

定位 + margin: auto
定位 + transform: translate (-50%, -50%)
定位 + 负 margin（需知道宽高）

Flex 布局（最常用）

css

display: flex;
justify-content: center;
align-items: center;

Grid 布局

css
```
display: grid;
place-items: center;
```
Table 布局

七、多栏布局实现

两栏布局

左侧固定，右侧自适应
实现：浮动、flex、calc()、grid

三栏布局

左右固定，中间自适应
实现：
- flex + order（内容优先渲染）
- grid
- 圣杯布局（浮动 + 负 margin + 定位）
- 双飞翼布局（浮动 + 负 margin + 内层盒子）

八、CSS 动画实现

transition：过渡动画，简单状态变化
transform：位移、旋转、缩放、倾斜
animation + @keyframes：自定义关键帧动画

九、回流（重排）与重绘

浏览器渲染流程

解析 HTML → DOM 树
解析 CSS → CSSOM 树
合成 → 渲染树 Render Tree
回流（Layout） ：计算元素位置、大小
重绘（Paint） ：绘制像素样式

关系

回流一定触发重绘
重绘不一定触发回流

会触发回流

窗口大小改变
添加 / 删除可见 DOM
元素几何属性变化（宽高、边距、位置）

会强制刷新队列（慎用连续读写）

offsetWidth/offsetTop
clientWidth/clientTop
scrollWidth/scrollTop

优化思路

批量修改 DOM，使用 documentFragment
离线操作：先 display:none，改完再显示
尽量使用 transform /opacity 做动画（只触发合成，不回流）

十、CSS 小技巧（高频手写）

1. CSS 画三角形

利用边框透明实现：

css

.triangle {
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-bottom-color: red;
}

也可用 clip-path。

2. 画 0.5px 线

css

height: 1px;
transform: scaleY(0.5);

3. 实现小于 12px 的文字

新版浏览器大多直接支持
老版本可用 transform: scale() 或 zoom

十一、响应式布局

是什么

页面根据屏幕大小自动适配布局、大小、位置。

实现方案

媒体查询 @media
flex /grid 弹性、网格布局
rem + 动态设置根字体
vw/vh、% 相对单位
图片自适应 max-width:100%

十二、CSS 预编译语言

扩展 CSS 语法，支持变量、嵌套、混合、函数、继承，便于维护。

常见预编译器

Sass：基于 Ruby，功能强，语法严谨
Less：基于 JS / Node.js，语法接近 CSS
Stylus：基于 Node.js，语法最灵活