css面试题及答案【集合目录】

news2025/10/31 17:58:03

在这里插入图片描述

前言：欢迎浏览和关注本专栏《前端就业宝典》，不管是扭螺丝还是造火箭，多学点知识总没错。这个专栏是扭螺丝之上要造火箭级别的知识，会给前端工作学习的小伙伴带来意想不到的帮助。

本专栏将前端知识拆整为零，主要包含html、css、javascript、Vue、React、浏览器、计算机网络、前端性能优化、前端工程化、手写核心代码的一些面试题及答案等。

CSS可算是前端开发三驾马车之一，其作用就是装饰页面，让炫酷潇洒清新自然得以实现。CSS的面试题可以有很多很多，下面这些你都会吗，会的话学习一下。

CSS基础

CSS选择器及其优先级
CSS中可继承与不可继承属性有哪些
display的属性值及其作用
display的block、inline和inline-block的区别
隐藏元素的方法有哪些
link和@import的区别
transition和animation的区别
display:none与visibility:hidden的区别
伪元素和伪类的区别和作用？
对requestAnimationframe的理解
对盒模型的理解
为什么有时候⽤translate来改变位置⽽不是定位？
li 与 li 之间有看不见的空白间隔是什么原因引起的？如何解决？

CSS3中有哪些新特性

替换元素的概念及计算规则
常见的图片格式及使用场景
对 CSSSprites 的理解
什么是物理像素，逻辑像素和像素密度，为什么在移动端开发时需要用到@3x, @2x这种图片？
margin 和 padding 的使用场景
对line-height 的理解及其赋值方式
CSS 优化和提高性能的方法有哪些？
CSS预处理器/后处理器是什么？为什么要使用它们？
::before 和 :after 的双冒号和单冒号有什么区别？
display:inline-block 什么时候会显示间隙？
单行、多行文本溢出隐藏
Sass、Less 是什么？为什么要使用他们？
对媒体查询的理解？
对 CSS 工程化的理解
如何判断元素是否到达可视区域
z-index属性在什么情况下会失效
CSS3中的transform有哪些属性

页面布局

常见的CSS布局单位px、em、rem的区别及使用场景
两栏布局的实现
三栏布局的实现
水平垂直居中的实现
如何根据设计稿进行移动端适配？
对Flex布局的理解及其使用场景
响应式设计的概念及基本原理

定位与浮动

为什么需要清除浮动？清除浮动的方式
使用 clear 属性清除浮动的原理？
对BFC的理解，如何创建BFC
什么是margin重叠问题？如何解决？
元素的层叠顺序
position的属性有哪些，区别是什么
display、float、position的关系
absolute与fixed共同点与不同点
对 sticky 定位的理解