前端 CSS 面试高频问题整理（2025 最新版）

人工智能通过机器学习处理大量数据，提升决策效率。其应用涵盖医疗、金融等领域，但需解决伦理与隐私问题。未来趋势包括自动化与个性化服务，技术发展依赖算法优化与跨学科合作。

小二·

755人浏览 · 2025-10-16 10:30:48

小二· · 2025-10-16 10:30:48 发布

CSS 并不是面试重点考察的领域，但如果能在 CSS 领域有自己的见解和经验，会使自己更加脱颖而出。

1. 标准的 CSS 盒子模型？与低版本 IE 的盒子模型有什么不同？

标准盒子模型：宽度 = 内容的宽度（content）+ border + padding + margin
低版本 IE 盒子模型：宽度 = 内容宽度（content + border + padding）+ margin

2. `box-sizing` 属性？

用来控制元素的盒子模型的解析模式，默认为 content-box。

content-box：W3C 的标准盒子模型，设置元素的 height/width 属性指的是 content 部分的高/宽
border-box：IE 传统盒子模型，设置元素的 height/width 属性指的是 border + padding + content 部分的高/宽

3. CSS 选择器有哪些？哪些属性可以继承？

✅ 常见选择器：

ID 选择器：#myid
类选择器：.myclassname
标签选择器：div, h1, p
相邻选择器：h1 + p
子选择器：ul > li
后代选择器：li a
通配符选择器：*
属性选择器：a[rel="external"]
伪类选择器：a:hover, li:nth-child

✅ 可继承的属性：

font-size, font-family, color

❌ 不可继承的样式：

border, padding, margin, width, height

✅ 优先级（就近原则）：

!important > [ id > class > tag ]

!important 比内联样式优先级还高。

4. CSS 优先级算法如何计算？

元素选择符：1
class 选择符：10
id 选择符：100
元素标签：1000

!important 声明的样式优先级最高，如果冲突再进行计算。

如果优先级相同，则选择最后出现的样式。

继承得到的样式的优先级最低。

5. CSS3 新增伪类有哪些？

p:first-of-type：选择属于其父元素的首个 <p> 元素
p:last-of-type：选择属于其父元素的最后 <p> 元素
p:only-of-type：选择属于其父元素唯一的 <p> 元素
p:only-child：选择属于其父元素的唯一子元素
p:nth-child(2)：选择属于其父元素的第二个子元素
:enabled / :disabled：表单控件的禁用状态
:checked：单选框或复选框被选中

6. 居中布局

✅ 水平居中

行内元素：text-align: center
块级元素：margin: 0 auto
绝对定位 + transform
绝对定位 + 负边距
flex 布局：flex + justify-content: center

✅ 垂直居中

单行文本：line-height = height
absolute + transform
flex + align-items: center
table 方式：display: table-cell; vertical-align: middle
position + top + 负 margin

✅ 水平垂直居中

（1）已知宽高：绝对定位 + margin: auto

div {
  width: 200px;
  height: 200px;
  background: green;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

（2）已知宽高：绝对定位 + 负 margin

div {
  width: 200px;
  height: 200px;
  background: green;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -100px;
  margin-top: -100px;
}

（3）绝对定位 + `transform`

div {
  width: 200px;
  height: 200px;
  background: green;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

（4）Flex 布局

.box {
  height: 600px;
  display: flex;
  justify-content: center;  /* 水平居中 */
  align-items: center;      /* 垂直居中 */
}
.box > div {
  background: green;
  width: 200px;
  height: 200px;
}

7. `display` 有哪些值？说明它们的作用

inline（默认）：内联
none：隐藏
block：块显示
table：表格显示
list-item：项目列表
inline-block：行内块

8. `position` 的值？

static（默认）：按正常文档流排列
relative：相对定位，不脱离文档流，参考自身位置通过 top, bottom, left, right 定位
absolute：绝对定位，参考最近一个 position 不为 static 的祖先元素定位
fixed：固定定位，参照可视窗口

9. CSS3 有哪些新特性？

RGBA 和透明度
background-image / background-origin（content-box / padding-box / border-box） / background-size / background-repeat
word-wrap: break-word（对长不可分割单词换行）
文字阴影：text-shadow: 5px 5px 5px #FF0000
@font-face：定义自定义字体
圆角：border-radius
边框图片：border-image: url(border.png) 30 30 round
盒阴影：box-shadow: 10px 10px 5px #888888
媒体查询：定义两套 CSS，适配不同屏幕尺寸

10. 解释 CSS3 的 `flexbox`（弹性盒布局模型），以及适用场景？

弹性盒布局的目的是提供一种更高效的方式来对容器中的条目进行布局、对齐和分配空间。

传统布局：block 垂直排列，inline 水平排列
flexbox 无固定方向限制，可自由操作

✅ 适用场景：

移动端开发
Android 和 iOS 完美支持

11. 用纯 CSS 创建一个三角形的原理是什么？

原理：利用 border 的梯形渲染特性，将元素宽高设为 0，只保留一个方向的边框。

实现步骤：

创建一个带边框的方块：

.box {
  width: 100px;
  height: 100px;
  border: 3px solid;
  border-color: #1b93fb #1bfb24 #efad48 #ef4848;
}

增大边框：

border: 50px solid;

此时 border 呈现为梯形

将宽高设为 0：

width: 0;
height: 0;

四个三角形拼合成矩形

只保留一个方向的颜色：

border: 50px solid transparent;
border-left: 50px solid #ef4848;

✅ 三角形完成！

12. 一个满屏“品”字布局如何设计？

方法一：固定尺寸

上方块：margin: 0 auto 居中
下方两块：使用 float 或 inline-block 不换行
用 margin 调整位置居中

方法二：全屏布局

上方 div：宽度 100%
下方两个 div：各 50%，使用 float 或 inline-block 不换行

13. 常见的兼容性问题？

不同浏览器默认 margin 和 padding 不同 → * { margin: 0; padding: 0; }
IE6 双边距 bug：float 后横行 margin 变大 → display: inline
渐进识别技巧（IE Hack）：

{
  background-color: #f1ee18;           /* 所有识别 */
  background-color: #00deff\9;         /* IE6/7/8 识别 */
  +background-color: #a200ff;          /* IE6/7 识别 */
  _background-color: #1e0bd1;          /* IE6 识别 */
}

IE6/7 中小高度标签显示异常 → overflow: hidden 或 line-height 调整
IE 可用 getAttribute() 或常规方式获取自定义属性，Firefox 只能用 getAttribute() → 统一使用 getAttribute()
Chrome 中文界面下小于 12px 的文本强制为 12px → -webkit-text-size-adjust: none
超链接访问后 hover 失效 → 按顺序书写：a:link → a:visited → a:hover → a:active（L-V-H-A）

14. 为什么要初始化 CSS 样式？

因为浏览器兼容问题，不同浏览器对标签的默认值不同，不初始化会导致页面显示差异。

15. `absolute` 的 containing block 计算方式与正常流有何不同？

查找祖先中最近的 position 不为 static 的元素，然后判断：

若为 inline 元素：containing block 为能包含其第一个和最后一个 inline box 的 padding box 的最小矩形
否则：由该祖先的 padding box 构成
若都找不到：则为 initial containing block

补充：

static / relative：父元素内容框（不含 padding）
absolute：向上找最近的 absolute / relative 定位元素
fixed：containing block 为根元素（html / body）

16. `visibility: collapse` 在不同浏览器下的区别？

collapse 表现：
- Chrome：与 hidden 相同
- Firefox、Opera、IE：与 display: none 类似

17. `display: none` 与 `visibility: hidden` 的区别？

display: none：不显示，不占空间（回流 + 重绘）
visibility: hidden：隐藏，仍占空间（仅重绘）

18. `position` 与 `display`、`overflow`、`float` 的叠加效果？

position: absolute/fixed 优先级最高，此时 float 失效，display 值需调整
float 或 absolute 定位的元素只能是块元素或表格

19. 对 BFC（块级格式化上下文）的理解？

BFC 是一个独立的渲染区域，使内部元素与外部隔离，避免相互影响。

✅ 触发条件：

根元素
position: absolute/fixed
display: inline-block / table
float 元素
overflow !== visible

✅ 规则：

同一个 BFC 的两个相邻 Box 垂直排列
同一个 BFC 的两个相邻 Box 的 margin 会重叠
BFC 子元素的 margin box 左边与包含块 border box 左边接触（absolute 除外）
BFC 区域不与 float 元素重叠
计算 BFC 高度时，浮动子元素也参与计算
文字不会被浮动层覆盖

✅ 应用场景：

阻止 margin 重叠
清除浮动（包含浮动元素）
自适应两栏布局
防止被浮动元素覆盖

20. 为什么会出现浮动？何时需要清除浮动？清除方式？

✅ 浮动原因：

元素碰到包含块或浮动块时停留，脱离文档流，导致：

父元素无法撑开高度
非浮动元素跟随其后
前面元素需同步浮动，否则影响结构

✅ 清除方式：

父级设置 height
最后一个浮动元素后加 <div style="clear:both"></div>
父级设置 overflow: hidden 或 auto
父级设置 zoom: 1（IE）

21. 上下 margin 重合的问题？

在重合元素外包裹一层容器，并触发 BFC：

<div class="aside"></div>
<div class="text">
  <div class="main"></div>
</div>

.aside {
  margin-bottom: 100px;
  width: 100px;
  height: 150px;
  background: #f66;
}
.main {
  margin-top: 100px;
  height: 200px;
  background: #fcc;
}
.text {
  overflow: hidden; /* 触发 BFC */
}

22. 设置元素浮动后，`display` 值是多少？

自动变为 display: block

23. 移动端布局用过媒体查询吗？

是的。

HTML 中：

<link rel="stylesheet" href="xxx.css" media="only screen and (max-device-width:480px)">

CSS 中：

@media only screen and (max-device-width: 480px) {
  /* 样式 */
}

24. 使用过 CSS 预处理器吗？

✅ 原理：

将类 CSS 语言（如 Sass/Less）通过 Webpack 编译为浏览器可读的 CSS。

✅ 常用功能：

嵌套
变量
循环/条件语句
自动前缀
单位转换
mixin 复用

面试中可结合项目经验说明使用场景。

25. CSS 优化、提高性能的方法？

避免过度约束、后代选择器、链式选择器
使用紧凑语法，避免重复
类名应语义化，避免 !important
合并重复规则，精简代码

26. 浏览器如何解析 CSS 选择器？

从右向左解析，原因：

从左向右需频繁回溯，性能差
从右向左先筛选叶子节点，效率更高

解析后与 DOM Tree 结合生成 Render Tree，用于渲染。

27. 使用奇数还是偶数字体？为什么？

使用偶数字体。

偶数字号更易构成比例关系
Windows 点阵字体（中易宋体）仅提供 12、14、16px 点阵，奇数时显示稀疏

28. `margin` 和 `padding` 分别适合什么场景？

✅ `margin` 使用场景：

border 外侧添加空白
空白处不需要背景色
上下盒子空白需抵消

✅ `padding` 使用场景：

border 内侧添加空白
空白处需要背景色
空白希望为两者之和

兼容性：IE5/6 中 float 元素 margin 可能加倍 → display: inline 或改用 padding

29. 元素竖向百分比是相对于容器高度吗？

不是。

width 百分比：相对于父容器宽度
padding-top/bottom、margin-top/bottom 百分比：也相对于父容器宽度

30. 全屏滚动的原理？用到哪些 CSS 属性？

类似轮播，整体高度为 500%（5页），只显示 100%。

overflow: hidden
transition: all 1000ms ease
通过 transform: translateY() 或 margin-top 定位

31. 什么是响应式设计？原理？如何兼容低版本 IE？

定义：一个网站兼容多个终端，无需为每个终端做特定版本
原理：通过媒体查询检测设备尺寸
必要条件：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

低版本 IE 不支持响应式，可通过 JS 检测或使用 polyfill。

32. 视差滚动效果？

背景滚动速度慢于前景，形成 3D 效果。

实现方式：

CSS3：开发快，性能好，不兼容低版本
jQuery：兼容性好，控制精细，开发难度高
插件：如 parallax-scrolling，兼容性好

33. `::before` 和 `:after` 中双冒号与单冒号区别？

单冒号 :：用于伪类（如 :hover）
双冒号 ::：用于伪元素（如 ::before），CSS3 推荐写法

::before 和 ::after 是在元素内容前/后插入伪元素，不占用 DOM。

34. 对 `line-height` 的理解？

行高 = 两行文字基线的距离
若未设 height，则实际高度由 line-height 决定
单行文本垂直居中：line-height = height
多行文本垂直居中：建议 display: inline-block

35. 如何让 Chrome 支持小于 12px 的文字？

p {
  font-size: 10px;
  -webkit-transform: scale(0.8);
}

36. 让字体变清晰、变细的 CSS 方法？

-webkit-font-smoothing: antialiased;

在 iOS 上有效，Windows 无效。

37. `position: fixed` 在 Android 下无效如何处理？

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

38. 手动写动画，最小时间间隔是多久？为什么？

16.7ms（1000ms / 60Hz）
多数显示器刷新率为 60Hz，即每秒 60 帧

39. `li` 之间有空白间隔？原因及解决？

原因：空格、换行被视为字符，占据空间
解决方法：
- 将 li 写在一行
- float: left
- font-size: 0 或 letter-spacing: -3px

40. `display: inline-block` 何时显示间隙？

有空格时 → 移除空格
margin 为正值 → 使用负值
使用 font-size → 设为 0，或用 letter-spacing / word-spacing 调整

41. 高度自适应 div 中，一个 100px 高，另一个填满剩余高度？

.outer {
  position: relative;
  height: 100%;
}
.fill {
  position: absolute;
  top: 100px;
  bottom: 0;
  left: 0;
  right: 0;
}

42. `png`、`jpg`、`gif`、`webp` 图片格式说明？

格式	特点	适用场景
PNG	无损压缩，支持透明	图标、需要透明的图像
JPG	有损压缩，适合照片	大图、摄影类
GIF	支持动画，256色	简单动画
WebP	压缩率高，体积小	现代浏览器，追求性能（谷歌/Opera 支持）

43. `style` 标签写在 `body` 前还是后？区别？

写在 head 中：优先加载，避免 FOUC（样式失效闪烁）
写在 body 后：浏览器解析到时会停止渲染，等待样式加载，可能导致页面闪烁（尤其 IE）

44. `overflow` 属性处理溢出内容？

scroll：始终出现滚动条
auto：内容溢出时出现滚动条
visible：溢出内容显示在父元素外
hidden：溢出内容隐藏

45. CSS Sprites 是什么？

将多个小图合并为一张大图，通过 background-position 定位。

✅ 优点：

减少 HTTP 请求
提升页面性能
减少图片字节

46. `link` 与 `@import` 的区别？

特性	`link`	`@import`
功能	可定义 RSS、Rel 等	仅加载 CSS
加载时机	页面同步加载	页面加载完才加载
兼容性	所有浏览器	IE5+
JS 动态引入	支持	不支持

47. CSS 动画

✅ `transition`（过渡动画）

transition-property：属性
transition-duration：持续时间
transition-timing-function：缓动函数
transition-delay：延迟
钩子：transitionend

✅ `animation` / `@keyframes`

animation-name：动画名
animation-duration：时长
animation-timing-function：曲线
animation-delay：延迟
animation-iteration-count：次数
animation-direction：方向
animation-fill-mode：静止模式（forwards, backwards, both）
animation-play-state：暂停/运行

✅ 推荐动画属性（性能高）：

transform（translate, scale, rotate, skew）
opacity
color

48. 实现三栏布局的方法？

（1）Flex 布局

.container { display: flex; }
.left { width: 200px; }
.main { flex: 1; }
.right { width: 200px; }

简洁，主流方案，注意兼容性

（2）绝对定位

.left, .right { position: absolute; width: 200px; }
.left { left: 0; }
.right { right: 0; }
.main { margin: 0 200px; }

可让主内容优先加载

（3）双飞翼布局

.main { float: left; width: 100%; margin: 0 200px; }
.left { float: left; width: 200px; margin-left: -100%; }
.right { float: left; width: 200px; margin-left: -200px; }

（4）圣杯布局

.container { padding: 0 200px 0 200px; }
.main { float: left; width: 100%; }
.left { float: left; width: 200px; margin-left: -100%; position: relative; left: -200px; }
.right { float: left; width: 200px; margin-left: -200px; position: relative; right: -200px; }

两者均通过负 margin 实现三栏并排

49. CSS 优化方法（补充）

将样式写在单独 CSS 文件中，在 <head> 引入
避免使用 @import
减少选择器层级（建议 ≤3 层）
精简样式文件，删除无用样式
利用继承减少代码量
避免 !important

✅ 总结：CSS 虽非面试核心，但深入理解布局、兼容性、BFC、动画等，能显著提升面试表现。建议结合项目经验，讲清“为什么”。

📌 建议收藏 + 实践 + 复盘，祝你面试顺利，斩获 Offer！

北京朝阳AI社区

更多推荐

Java-LangChain4j-RAG篇

Java LangChain4j-ARG篇，基于LangChain4j调用大模型，本文主要讲解ARG概念、底层流程、使用等

北京朝阳AI社区

人工智能在医疗健康领域的创新应用

人工智能（AI）正在成为推动全球医疗健康体系革新的核心力量。从疾病诊断到药物研发，从医学影像识别到个性化治疗，AI技术正以前所未有的速度改变医疗行业的运行逻辑。它不再只是辅助医生的工具，而正成为医疗生态的“第二智慧中枢”。

北京朝阳AI社区

2026 年网络安全与执法专业毕设选题推荐：300 个热门精品题目

北京朝阳AI社区

所有评论(0)

查看更多评论

小二·

@weixin_52208686

已为社区贡献2条内容

前端 CSS 面试高频问题整理（2025 最新版）

小二·

1. 标准的 CSS 盒子模型？与低版本 IE 的盒子模型有什么不同？

2. box-sizing 属性？

3. CSS 选择器有哪些？哪些属性可以继承？

✅ 常见选择器：

✅ 可继承的属性：

❌ 不可继承的样式：

✅ 优先级（就近原则）：

4. CSS 优先级算法如何计算？

5. CSS3 新增伪类有哪些？

6. 居中布局

✅ 水平居中

✅ 垂直居中

✅ 水平垂直居中

（1）已知宽高：绝对定位 + margin: auto

（2）已知宽高：绝对定位 + 负 margin

（3）绝对定位 + transform

（4）Flex 布局

7. display 有哪些值？说明它们的作用

8. position 的值？

9. CSS3 有哪些新特性？

10. 解释 CSS3 的 flexbox（弹性盒布局模型），以及适用场景？

✅ 适用场景：

11. 用纯 CSS 创建一个三角形的原理是什么？

实现步骤：

12. 一个满屏“品”字布局如何设计？

方法一：固定尺寸

方法二：全屏布局

13. 常见的兼容性问题？

14. 为什么要初始化 CSS 样式？

15. absolute 的 containing block 计算方式与正常流有何不同？

补充：

16. visibility: collapse 在不同浏览器下的区别？

17. display: none 与 visibility: hidden 的区别？

18. position 与 display、overflow、float 的叠加效果？

19. 对 BFC（块级格式化上下文）的理解？

✅ 触发条件：

✅ 规则：

✅ 应用场景：

20. 为什么会出现浮动？何时需要清除浮动？清除方式？

✅ 浮动原因：

✅ 清除方式：

21. 上下 margin 重合的问题？

22. 设置元素浮动后，display 值是多少？

23. 移动端布局用过媒体查询吗？

24. 使用过 CSS 预处理器吗？

✅ 原理：

✅ 常用功能：

25. CSS 优化、提高性能的方法？

26. 浏览器如何解析 CSS 选择器？

27. 使用奇数还是偶数字体？为什么？

28. margin 和 padding 分别适合什么场景？

✅ margin 使用场景：

✅ padding 使用场景：

29. 元素竖向百分比是相对于容器高度吗？

30. 全屏滚动的原理？用到哪些 CSS 属性？

31. 什么是响应式设计？原理？如何兼容低版本 IE？

32. 视差滚动效果？

实现方式：

33. ::before 和 :after 中双冒号与单冒号区别？

34. 对 line-height 的理解？

35. 如何让 Chrome 支持小于 12px 的文字？

36. 让字体变清晰、变细的 CSS 方法？

37. position: fixed 在 Android 下无效如何处理？

38. 手动写动画，最小时间间隔是多久？为什么？

39. li 之间有空白间隔？原因及解决？

40. display: inline-block 何时显示间隙？

41. 高度自适应 div 中，一个 100px 高，另一个填满剩余高度？

42. png、jpg、gif、webp 图片格式说明？

43. style 标签写在 body 前还是后？区别？

44. overflow 属性处理溢出内容？

45. CSS Sprites 是什么？

✅ 优点：

46. link 与 @import 的区别？

47. CSS 动画

✅ transition（过渡动画）

✅ animation / @keyframes

✅ 推荐动画属性（性能高）：

48. 实现三栏布局的方法？

2. `box-sizing` 属性？

（3）绝对定位 + `transform`

7. `display` 有哪些值？说明它们的作用

8. `position` 的值？

10. 解释 CSS3 的 `flexbox`（弹性盒布局模型），以及适用场景？

15. `absolute` 的 containing block 计算方式与正常流有何不同？

16. `visibility: collapse` 在不同浏览器下的区别？

17. `display: none` 与 `visibility: hidden` 的区别？

18. `position` 与 `display`、`overflow`、`float` 的叠加效果？

22. 设置元素浮动后，`display` 值是多少？

28. `margin` 和 `padding` 分别适合什么场景？

✅ `margin` 使用场景：

✅ `padding` 使用场景：

33. `::before` 和 `:after` 中双冒号与单冒号区别？

34. 对 `line-height` 的理解？

37. `position: fixed` 在 Android 下无效如何处理？

39. `li` 之间有空白间隔？原因及解决？

40. `display: inline-block` 何时显示间隙？

42. `png`、`jpg`、`gif`、`webp` 图片格式说明？

43. `style` 标签写在 `body` 前还是后？区别？

44. `overflow` 属性处理溢出内容？

46. `link` 与 `@import` 的区别？

✅ `transition`（过渡动画）

✅ `animation` / `@keyframes`