CSS前端面试问题分类整理

CSS在面试中出现不多，但作为贯通整个前端的必备语言，对CSS的考察能够了解前端面试者的基础，好奇心以及编码习惯等。
早期，面试题多以CSS属性，选择器，继承为基础，IE兼容性、各种布局作为更高级别的前端的筛选。
近几年，Mobile First理念深入人心，快应用，小程序如雨后春笋版崛起，支付方式日趋多样。Flash正式退出历史舞台，CSS在动画和可视化领域大显身手。工程化领域，模块化成为标准，less、sass和postCSS劲头依旧，从三层分离，组件化到CSS原子化，从面向对象到BEM，CSS原子化再被提及。浏览器领域，PC端，IE被Edge取代，Chrome仍旧保持领先，而移动端的前端运行环境却更加碎片化。刚刚摆脱IE6的前端开发者，面临更多样的移动端，不得不在IOS、安卓和各种超级应用入口间兼容，加强性能优化。Flex和Gird布局，让曾经的双飞翼，圣杯变得容易，流式开发，响应式，自适应仍占据web主流，刘海儿屏，水滴屏，挖孔屏，全面屏，不同尺寸，分辨率和DPI的屏幕，仍需要前端多花心思布局。CSS3获得了广泛兼容，CSS4蓄势待发。
面对如此发展快速的前端，很多开发者直呼“学不动”。其实，很多概念，如原子化，很早就有，今天能够再次被推广，得益于它能够大幅提高CSS的复用度，解决大型项目随功能增多，CSS日趋庞大，维护过于困难的问题。那么，我们就一定要在大型项目中使用它吗？答案是否定的。具体还要结合项目来看。
作为前端，我们常常面临各种技术栈的选择，具有良好的技术应用能力，能够快速上手，解决问题固然重要，但作为考核前端的面试，对比会什么，面试官通常更重视面试者的学习能力和好奇心。愿意学习，并且擅于学习的前端开发者，在实际工作中，更容易适应工作环境，上手业务。
无论前端如何发展，概念，设计、布局、原理、性能、工程化和规范，始终对前端非常重要，本文将从这些话题出发，整理CSS常见面试题。
回答这些题目并不难，重要的是理解考察点，适当拓展或深入，知其然更知其所以然，依然以CSS原子化为例：

什么是CSS原子化？
及格的回答是：定义
有经验的回答是：定义 背景 解决了什么问题 怎么解决的
几乎满分的回答是：与组件化等对比 辩证地说明 CSS原子化 应用场景 谈谈自己在项目中的使用和体会

CSS 概念

• CSS 中有哪些选择器，优先级如何？
• CSS 中值有哪些单位，%是相对于谁，移动端常用哪些及原因？
• CSS 中有哪些定位方式，相对定位是相对于谁，什么是脱离文档流？
• 什么是浮动？
• 伪元素和伪类的区别？
• 什么是媒体查询，什么是响应式，对比按需编译？
• 介绍 CSS3/CSS4 新特性？
• 介绍 CSS 过渡和动画？
• 对比 CSS 加载的方式（外部引入link，import，嵌入和行内）？

CSS 设计

• 如何引入字体，设备没有宋体怎么办，字体大小多少合适，奇数好还是偶数好，如何平滑清晰字体？
• 颜色值都有哪几种表示方法？
• 多方法实现图标并对比（特殊符号、图片、svg、iconFont等）
• 多方法实现圆角边框
• 多方法实现小三角，多用于对话气泡
• 多方法隐藏和移除元素并对比
• 多方法实现文字阴影
• 多方法实现渐变背景
• 多方法实现高度 100% 的容器
• 对比常见图片格式和 base64 图片？
• 为什么要重置 CSS 样式，对比常用的 Reset.css 和 Normalize.css?
• 纯 CSS 实现响应式图片（不同屏幕，加载不同大小图片）
• 纯 CSS 实现骨架屏
• 纯 CSS 实现夜间、深色模式
• CSS 布局
• 多方法实现水平居中
• 多方法实现垂直居中
• 多方法实现两栏、三栏、三明治布局
• 圣杯布局
• 双飞翼布局
• 瀑布流布局
• 品布局
• 多方法实现简易计算器
• 满屏视差滚动

CSS 实践

• 解释纵向外边距重叠的现象，如何避免？
• 实现小于 1px 像素的边
• 解决滚动穿透问题
• 如何清除浮动
• 如何写小于10像素的字
• 如何用JS获取CSS样式表中样式

CSS 原理

• 什么是盒模型，什么是弹性盒模型？
• 什么是块级格式上下文，如何创建 BFC？
• 什么是 z-index，什么是叠加上下文？
• 什么是 CSS 树，浏览器是如何解析和渲染 CSS 的？
• CSS 选择器解析顺序是怎样的？
• style 和 computedStyle 的区别？
• 加载 CSS 是否会阻塞页面渲染？

CSS 性能

• CSS 选择器的优化级是，如何减少层级？
• 什么是重排和重绘，更改哪些属性会触发重排和重绘，如何避免？
• 如何用 CSS 开启硬件加速？
• 对比 CSS 动画和 JS 动画？
• 如何优化 CSS 动画的性能？

CSS 工程

• Less、Sass/Scss、postCSS是什么并对比?
• Webpack 中，sass-loader, css-loader，style-loader 作用是什么，配置顺序？
• 如何压缩 CSS 大小，如何去除无用的 CSS？
• 什么是 CSS 模块化，有哪几种实现方式？
• 如何自动压缩，转换图片格式，如何将 CSS 引用的小图片自动转成 base64 编码？
• 如何自动添加浏览器私有前缀属性？

CSS 方法论

• 什么是 CSS 组件化和原子化？
• CSS 有作用域吗？（实现作用域的方式）
• 对比 BEM, ITCSS, Atomic CSS, Utility-first CSS, SMACSS, OOCSS？
• CSS 属性的建议书写顺序，为什么？
• important! 的作用和弊端，如何避免？

CSS 综合

• 从表现、原理、性能和 SEO 等方面，对比 display:none、visibility:hidden 和 opacity:0
• HTTP2.0 时代，CSS Sprites 还有用吗，为什么？
• 你在开发中都遇到过哪些兼容性问题，你是如何解决的？
• 你最喜欢的 CSS 功能是什么？
• 当你忘记一个 CSS 属性时，你一般如何做？
• 结合项目谈谈你是如何学习 CSS 的？