HTML/CSS 核心基础面试：语义化、盒模型、布局、响应式、优先级、BFC
本章聚焦前端面试中最高频的 HTML/CSS 基础考点。面试官常通过这些问题考察你对浏览器渲染原理、代码可维护性、布局控制力以及异常场景的应对能力。掌握以下回答框架和卡片，能帮你快速组织语言、突出深度、避开常见坑。
Q1：请解释 HTML 语义化的意义，并举例说明如何正确使用语义化标签。
面试官考察点：对标签语义的理解；SEO与可访问性意识；实际项目中区分结构的经验。
回答框架：①定义语义化 → ②好处（可读性/SEO/无障碍/维护性）→ ③常用标签示例 → ④错误用法对比 → ⑤总结最佳实践。
示例回答（90字）：语义化指用含义清晰的标签描述内容，如 <nav> 导航、<article> 独立文章。好处：提升代码可读性与维护性、帮助搜索引擎理解页面、增强屏幕阅读器支持。避免滥用 <div>，但无合适语义时可结合 ARIA 属性使用。
可能追问：①<section> 和 <article> 的区别？②对屏幕阅读器具体如何影响？③什么时候必须用 <div>？
<article>），也不要完全拒绝 <div>。无合适语义时用 <div> + role 属性更可靠。
Q2：请解释 CSS 盒模型，如何切换标准盒模型与 IE 盒模型？BFC 是什么，如何触发？
面试官考察点：盒模型底层理解；box-sizing 实际应用；BFC 原理与常见场景（清除浮动、防止 margin 合并等）。
回答框架：①标准盒模型 vs IE 盒模型 → ② box-sizing 切换 → ③ BFC 定义与作用 → ④触发方式（列举5种）→ ⑤结合布局问题（如防止折叠）总结。
示例回答（95字）：标准盒模型 width=content；IE 盒模型 width=content+padding+border。用 box-sizing:border-box 切换。BFC 是独立渲染区域，可清除浮动、阻止 margin 合并。触发：overflow:hidden、float:left、display:flow-root、position:absolute 等。
可能追问：①BFC 与 IFC 的区别？②如何用 BFC 解决父容器高度塌陷？③overflow:clip 是否触发 BFC？
overflow:hidden 触发 BFC 时注意内容可能被裁剪。
Q3：如何实现左侧固定、右侧自适应的两栏布局？列举至少三种方法并比较优缺点。
面试官考察点：布局能力（flex/grid/float/calc）；兼容性权衡；响应式意识；对 BFC 的实际运用。
回答框架：①列举方案（flex/float/grid/calc+块级）→ ②每种方案代码核心 → ③对比：简洁性/兼容性/清除浮动/响应式支持 → ④给出推荐（flex 兼顾兼容与简洁）。
示例回答（100字）：① flex:父 display:flex，左侧 flex:0 0 200px，右侧 flex:1。② float:左侧 float:left，右侧 overflow:hidden 触发 BFC。③ grid:grid-template-columns:200px 1fr。flex 最推荐，兼容 IE10+；grid 最简洁但 IE 不支持；float 需处理高度塌陷。
可能追问：①左侧高度不固定时哪种方案更好？②如何做移动端响应式切换（变为上下排列）？③calc 方案的缺点？
| 考点 | 核心要点 | 面试加分话术 |
|---|---|---|
| CSS 选择器优先级 | !important > 行内 > ID > class/属性/伪类 > 元素/伪元素。权重叠加计算。 | “我通常避免使用 !important，而是通过提升选择器权重来覆盖，这样更可控且利于后续维护。” |
| 响应式设计策略 | 媒体查询 + 相对单位（rem/vw/%）+ 弹性布局（flex/grid）+ 视口设定（meta viewport）。 | “我会优先使用 flex/grid + 百分比布局，只在需要特定断点时用媒体查询，避免硬编码 px。” |
| 移动端 1px 问题 | 伪元素 + transform:scaleY(0.5) 或 viewport + rem 方案，配合 devicePixelRatio。 | “通常用伪元素设置 1px 边框再 scale 缩小，兼容性好；高 dpr 设备效果清晰。” |
box-sizing:border-box 统一盒模型，结合 BFC 解决 margin 合并和浮动问题。这样能减少 90% 的常见 CSS 坑。”