【面试题】金九银十，你准备好面试了吗? (30w字前端面试题总结)（CSS）

​

（1）面试题目

常考的CSS面试题：

一、CSS基础

1. CSS选择器及其优先级

2. CSS中可继承与不可继承属性有哪些

3. display的属性值及其作用

4. display的block、inline和inline-block的区别

5. 隐藏元素的方法有哪些

6. link和@import的区别

7. transition和animation的区别

8. display:none与visibility:hidden的区别

9. 伪元素和伪类的区别和作用？

10. 对requestAnimationframe的理解

11. 对盒模型的理解

12. 为什么有时候⽤translate来改变位置⽽不是定位？

13. li 与 li 之间有看不见的空白间隔是什么原因引起的？如何解决？

14. CSS3中有哪些新特性

15. 替换元素的概念及计算规则

16. 常见的图片格式及使用场景

17. 对 CSSSprites 的理解

18. 什么是物理像素，逻辑像素和像素密度，为什么在移动端开发时需要用到@3x, @2x这种图片？

19. margin 和 padding 的使用场景

20. 对line-height 的理解及其赋值方式

21. CSS 优化和提高性能的方法有哪些？

22. CSS预处理器/后处理器是什么？为什么要使用它们？

23. ::before 和 :after 的双冒号和单冒号有什么区别？

24. display:inline-block 什么时候会显示间隙？

25. 单行、多行文本溢出隐藏

26. Sass、Less 是什么？为什么要使用他们？

27. 对媒体查询的理解？

28. 对 CSS 工程化的理解

29. 如何判断元素是否到达可视区域

30. z-index属性在什么情况下会失效

31. CSS3中的transform有哪些属性 二、页面布局

32. 常见的CSS布局单位

33. px、em、rem的区别及使用场景

34. 两栏布局的实现

35. 三栏布局的实现

36. 水平垂直居中的实现

37. 如何根据设计稿进行移动端适配？

38. 对Flex布局的理解及其使用场景

39. 响应式设计的概念及基本原理

三、定位与浮动

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

四、场景应用

1. 实现一个三角形
2. 实现一个扇形
3. 实现一个宽高自适应的正方形
4. 画一条0.5px的线
5. 设置小于12px的字体
6. 如何解决 1px 问题？

（2）思维导图

下图对CSS面试题的考察频率进行了大致的区分，可以选择性的学习： 

​