重点
- css选择器有哪些！优先级！哪些属性可以继承！
- 伪元素、伪类区别
- 说说你对盒子模型的理解！
- BFC（块级格式上下文）
- 清除浮动的几个方式
- 行内元素、块级元素、空元素
- 说说对Css预编语言的理解！以及 Sass、Less、Stylus 的区别
八股文
注释
选择器
- css选择器有哪些！优先级！哪些属性可以继承！
- CSS 选择器有哪些组合方式！
- 伪元素、伪类区别
- CSS 选择器命名规则
- 无效选择器有什么用途！
- 什么是渐进性增强样式！
- 如何优化选择器，提高性能！
- !important 的作用和弊端，如何避免！
- 如何限制 CSS 选择器的作用域！
单位
- CSS 中有哪些单位！
- 百分比 % 相对于谁！
- 如何实现两栏布局，右侧自适应！三栏布局中间自适应呢！
- 圣杯布局
- 双飞翼布局
- 多方法实现三栏布局
- 瀑布流布局
- 品布局
- 实现简易计算器
- 如何使用css完成视差滚动效果！
- 元素水平垂直居中的方法有哪些！如果元素不定宽高呢！
- 元素水平垂直居中
- min-width、max-width、width的包含(优先级)关系
- 说说flexbox（弹性盒布局模型）,以及适用场景！
- 介绍一下grid网格布局
- 浮动布局
- 行内元素、块级元素、空元素
- 如何适配不同机型的安全距离！
- flex布局，子元素宽度失效问题
- html页面禁止滚动条,css如何不让出现滚动条？
- 盒子flex为1实现内部滚动，并撑满剩余空间
字体
动画
- 对比过渡和动画
- 如何优化 CSS 动画的性能！
- 对比 CSS 动画和 JS 动画！
- 纯 CSS 实现打字机效果
- 纯 CSS 实现暗黑、夜间模式
- 纯 CSS 实现骨架屏
- 实现元素淡出和右侧划入同时进行的动画效果
原理
设计
- 让Chrome支持小于12px 的文字方式有哪些！区别！
- 实现小于 1px 像素的边
- 对比多方法实现图标
- 多方法实现圆角边框
- 多方法实现小三角
- css中，有哪些方式可以隐藏页面元素！区别！
- 实现文字描边
- 实现渐变背景
- 对比常见图片格式和 base64 图片！
- 为什么要重置浏览器默认样式，对比 Reset.css 和 Normalize.css！
工程化
- 说说对Css预编语言的理解！以及 Sass、Less、Stylus 的区别
- Webpack 处理 SASS 文件时，sass-loader, css-loader，style
- 如何压缩 CSS 大小，如何去除无用的 CSS！
- 什么是 CSS 模块化，有哪几种实现方式！
- 页面导入样式时，使用 link 和 @import 有什么区别！
- 如何自动压缩图片！
- 如何自动添加浏览器私有前缀属性！
- 对比媒体查询与按需引入 CSS！