# CSS 面试题

# 为什么用 translate 来改变位置而不是定位

• 改变 transform 或 opacity 不会触发浏览器重排（reflow）或重绘（repaint），只会触发复合（compositions）。
• ⽽改变绝对定位会触发重新布局，进⽽触发重绘和复合。
• transform 使浏览器为元素创建⼀个 GPU 图层，但改变绝对定位会使⽤到 CPU，因此 translate 更⾼效，可以缩短平滑动画的绘制时间。
• translate 改变位置时，元素依然会占据其原始空间，绝对定位就不会发⽣这种情况。

# margin 负值问题

• margin-top 和 margin-left 负值，元素向上、向左移动
• margin-right 负值，右侧元素左移，自身不受影响
• margin-bottom 负值，下方元素上移，自身不受影响

# 形成 BFC 的常见条件

• float 不是 none
• position 是 absolute 或 fixed
• overflow 不是 visible
• display 是 flex inline-block 等