「2021」高频前端面试题汇总之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有哪些属性
  • 二、页面布局
  • • 1. 常见的CSS布局单位
    • 2. px、em、rem的区别及使用场景
    • 3. 两栏布局的实现
    • 4. 三栏布局的实现
    • 5. 水平垂直居中的实现
    • 6. 如何根据设计稿进行移动端适配？
    • 7. 对Flex布局的理解及其使用场景
    • 8. 响应式设计的概念及基本原理
  • 三、定位与浮动
  • • 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的线