CSS 面试题

CSS 选择器的优先级

非常基础，略过

link 和 @import 的区别

• link 属于 HTML，@import 是 CSS 提供的
• 页面被加载时 link指向的css文件会被加载，@import引用的css会等待页面被加载完再加载
• @import 必须放在引入它的文件的头部

隐藏页面元素的方式

• opacity: 0 依然占据空间，可以交互
• visibility: hidden 占据空间，不可交互
• overflow: hidden 隐藏溢出部分
• display: none 彻底隐藏元素
• z-index: -9999 将层级放大底部，切忌使用
• transform: scale(0, 0) 占据空间，不可交互，切忌使用

px em rem 的区别

• px：绝对单位
• em，相对单位，如果自身定义了font-size，以自身字体大小为准，否则以父字体大小元素为准
• rem，相对单位，相对于根元素 html 的字体大小

CSS 定位属性

• static
• relative
• fixed
• sticky

为什么动画中常用translate改变元素的位置

translate 是 transform 的一个值，改变 transform 或 opacity 不会触发浏览器重新布局(reflow)或重新绘制(repaint)，只会触发复合（compositons）。

transform 使浏览器为元素创建一个 GPU 图层，但改变绝对定位会导致 DOM 树的更新，进行 CPU 计算。