【前端】CSS面试八股
网上现有资料已经很丰富了，我挑了些自己押面试题时总结过的来写。
Q：回流和重绘
A：
- 回流reflow：计算元素的几何，引发layout
- 重绘repaint：更新元素可见样式，引发paint
回流的成本比重绘高得多，因为它涉及重新计算元素的几何属性和页面布局。
Q：transform、opacity、filter、will-change创建动画
A：既不会触发reflow也不会repaint，当使用transform或opacity时，跳过layout和paint阶段，直接在GPU中处理变换，浏览器只需要composite已有图层而非render页面。
注意，并非所有transform都能免除回流。
Q：flex：1和flex：auto有什么区别
A：是否严格分成三等分
Q：grid-template-columns 中fr是什么意思
A：fr=分数单位，比如：200px 2fr 1fr，第一列固定200px，剩余按2:1分配
Q：iframe和微前端
A：
- iframe：简单粗暴，快速原型开发
- 微前端：灵活高效，复杂SPA模块化，长期维护的大型应用
都能实现样式隔离与沙盒
子应用可以独立开发部署，不影响主应用，两者可以用不同技术栈
Q：css选择器优先级
A：
| 选择器 | 优先级 |
|---|---|
| style=“width: 100px” | 1000 |
| #id { width: 100px } | 100 |
| .class { width: 100px }，:hover | 10 |
| div { width: 100px }，::before | 1 |
| * { width: 100px } | 0 |
Q：CSS属性继承：属性继承是为了解决文本内容样式传递问题
A：
- 能继承：color，font，visibility，line-height，font-family【字体样式需要在嵌套结构中保持一致】。
- 不能继承：盒子6件套（width，height，background，border，margin，padding），position，display，float。
Q：强制继承
A：对非字体属性用inherit。
Q：transition和animation动画有什么区别
A：
Q：CSS3的伪类，伪元素，单冒号，双冒号
A：
- 伪类：状态变化。选择元素的特定状态（如鼠标悬停，第几个子元素）。
语法：CSS1/2用单冒号，CSS3支持用双冒号，但伪类仍推荐单冒号。
- 伪元素：虚拟内容。创建不在DOM中的虚拟元素（如首字母，前后内容）
语法：CSS3推荐用双冒号，但单冒号仍然兼容
注意：伪元素必须配合content属性使用（即使是空字符串content: “”）
Q： BFC是什么
A：块级格式化上下文，一个独立的渲染区域，有自己的渲染规则，与外部元素不会互相影响。
/* BFC触发方式 */
.q1 {float: left; /* 值不为none */
}
.q2 {position: absolute;
}
.q3 {display: inline-block;
}
.q4 {overflow: hidden; /* 值不为visible */
}