前端面试题：CSS布局与适配
CSS布局方案
Flexbox弹性布局是目前最常用的方案，通过display: flex将元素变为弹性容器，配合justify-content控制主轴对齐、align-items控制交叉轴对齐，可轻松实现元素水平垂直居中。Grid布局则适用于二维布局场景，通过grid-template-columns和grid-template-rows定义网格模板，grid-column和grid-row控制单元格跨行跨列。
移动端适配方案
rem适配通过JS动态设置html的font-size，按设计稿比例转换px到rem，适配灵活但需要额外JS；vw/vh方案使用视口单位，纯CSS实现无需JS，但需注意刘海屏问题；弹性布局+媒体查询适合简单页面，但断点维护成本高。实际项目推荐rem+flex组合方案，rem处理尺寸，flex处理布局，媒体查询作为补充。
响应式设计
通过媒体查询@media (max-width: 768px)针对不同屏幕尺寸调整样式，移动优先设计先针对小屏设备开发再逐步增强。图片自适应需设置max-width: 100%保持纵横比，避免图片变形。
性能优化
避免使用低效选择器如div > p > a，优先使用类选择器。减少重排重绘，使用transform和opacity触发GPU加速，避免频繁修改布局属性。CSS加载会阻塞渲染，应将CSS放在头部，JS放在底部或使用async/defer异步加载。
