(1)面试题目
常考的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 定位的理解
四、场景应用
- 实现一个三角形
- 实现一个扇形
- 实现一个宽高自适应的正方形
- 画一条0.5px的线
- 设置小于12px的字体
- 如何解决 1px 问题?
(2)思维导图
下图对CSS面试题的考察频率进行了大致的区分,可以选择性的学习: