前端面试题：CSS 布局与响应式设计

1. CSS 布局模型有哪些？

• 标准盒模型与 border-box。
• 文档流布局、浮动布局、弹性盒、网格布局。
• 不同布局适合不同场景。

2. Flexbox 主要属性有哪些？

• 容器属性：display: flex、flex-direction、justify-content、align-items。
• 子项属性：flex、align-self、order。
• 适合一维布局。

3. Grid 与 Flexbox 有何差异？

• Grid 适合二维布局，控制行列。
• Flexbox 适合一维布局，控制主轴方向。
• 两者可组合使用。

4. 如何实现响应式设计？

• 使用弹性单位：rem、vw、%。
• 使用媒体查询 @media 适配不同屏幕。
• 通过断点和栅格系统组织布局。

5. 什么是移动优先？

• 先设计移动端样式，再逐步扩展到更大屏幕。
• 有利于性能和体验。

6. 如何处理不同设备像素密度？

• 使用 srcset 提供不同分辨率图片。
• 使用矢量图（SVG）或 icon font。

7. 你会如何优化复杂页面的样式维护？

• 采用模块化 CSS、BEM、CSS-in-JS 或预处理器。
• 避免全局选择器和层级过深。

8. 如何降低重排和重绘成本？

• 避免频繁修改 layout 相关样式。
• 批量更新样式，使用 transform / opacity 提升动画性能。