【前端】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 */
}