问题 ​

1. css 常用单位有哪些，有什么区别 ​

• px：像素，最常用
• em：相对单位，1em 等于自身（若自身未设置则继承其祖先元素）的 font-size 大小
• rem：相对单位，1rem 等于 html 的 font-size 大小，css3 新增属性
• vw/vh：相对单位，1vw 就是视口宽度的 1%，1vh 就是视口高度的 1%
• mm：毫米物理单位，比如 A4 纸大小是 297*210mm

2. link 标签与 @import 区别？ ​

• link：

  • html 标签，
  • link 引入的样式权重高于 @import 的权重

• @import：

  • css 语法
  • 全局 dom 加载完毕后才会加载
  • 单页面应用如 vue 脚手架的 css 预处理器会将 @import 的样式合并到一个文件

3. CSS 的解析顺序？ ​

从右向左解析，即找到最先作用在元素上的属性，再往左的属性就可以丢弃了。

4. CSS 优先级？ ​

5. CSS3 有哪些新特性？ ​

• 伪元素、伪类选择器 ::before、::after、:not()、empty()、:nth-child(n)...
• 形变 transform
• 过渡 transition
• 动画 animation
• box-shadow、border-radius 等
• 变量 var()、currentColor
• 布局 flex、 grid

6. 伪类与伪元素的区别？ ​

7. 实现一个三角形？ ​

利用 border 三边透明实现

8. margin 重叠问题？ ​

重叠规则以及 BFC

9. CSS 盒模型？ ​

两种盒模型区别，以及说说项目中如何使用

• 标准模型
• 怪异模型

10. z-index 的作用？ ​

说说水平七阶层叠

11. float 的使用以及带来的问题？ ​

主要是高度塌陷，以及清除浮动的方法，还有 BFC 问题

12. 说说 oveflow 属性？ ​

除了属性介绍外，可以说说触发 BFC

13. visibility: hidden 与 display: none 的区别？ ​

• visibility: hidden：会被渲染，占据空间，只会作用在自身，子元素可以设置显示，只会触发重绘，绑定事件不会触发
• display: none：不会被渲染，不占据文档空间，所有后代元素不会显示，切换触发回流

14. flex 有哪些属性？ ​

先做 flex 介绍，主轴、交叉轴，父容器属性，项目（成员）属性；
特别是 flex: 1 是代表什么意思

15. 如何实现一个盒子的水平垂直居中，至少2种实现 ​

• flex 实现
• 定位 + margin: 0 实现
• 定位 + transform 实现

16. 说说 position 属性？ ​

主要说下 sticky 特性

17. 移动端 chrome 浏览器不支持 12px 以下字体，如何处理？ ​

18. display: inline-block 产生间隙问题？ ​

19. 什么是 BFC ？ ​

块级格式化上下文，主要说说它如何产生以及解决什么问题

20. 什么是 CSS 预处理器？它的优缺点是什么？ ​

常见的 CSS 预处理器有 LESS、Sass、Stylus，它们增加了嵌套、mixin、变量、循环、函数等动态的功能，将这些特定写法的 CSS 处理为规范的 CSS，增强了 css 代码的复用性，，使我们能够更便捷的进行模块化开发，极大的提高了工作效率。

优点：

• 相比 CSS 更便于维护
• 支持嵌套写法
• 支持变量（特别适用于设置系统主题）
• 支持 mixins 复用
• 支持函数等（比如背景图片的多个 dpr 图处理）

缺点：

• 浏览器无法直接解析，需要借助编译工具；

21. 什么是 CSS 后处理器？ ​

一般用来将符合规范的 CSS 增加特定浏览器兼容前缀，如 PostCSS

22. inherit、initial 与 unset 区别？ ​

• inherit：关键字指定一个属性应从父元素继承它的值
• initial：关键字用于设置 CSS 属性为它的默认值
• unset：如果这个属性有从父级继承的值，则将该属性重新设置为继承的值（inherit）；否则将该属性重新设置为初始值（initial）