HTML 与 CSS

前端面试的 CSS 题考的是"细节 + 实战"，能讲清盒模型、BFC、Flex 布局基本就能过关。

Q1: 盒模型是什么？标准盒模型和 IE 盒模型的区别？ 「🟢 校招/初级」

考察点：CSS 最基础的概念。

参考答案：

• 标准盒模型（box-sizing: content-box）：width/height 只包含 content，实际占用 = width + padding + border。
• IE 盒模型（box-sizing: border-box）：width/height 包含 content + padding + border，更直观。
• 实际开发中常用 border-box 做全局重置，避免布局计算。

追问延伸：

• 外边距折叠（margin collapsing）在什么情况下发生？
• 行内元素的 margin/padding 表现有什么不同？

Q2: 什么是 BFC？怎么触发？ 「🟡 中级」

考察点：CSS 布局的核心机制。

参考答案：

• BFC（Block Formatting Context）：块级格式化上下文，内部元素按 BFC 规则排列，与外部互不影响。
• 规则：内部块级元素垂直排列；同一个 BFC 内相邻块级元素的垂直 margin 会折叠；BFC 区域不与浮动元素重叠；计算高度时包含内部浮动元素。
• 触发方式：overflow: hidden/auto、display: flow-root（现代推荐）、float 非 none、position: absolute/fixed、Flex/Grid 容器。

追问延伸：

• BFC 怎么解决外边距折叠？
• 两栏布局怎么用 BFC 实现？

Q3: Flex 布局的核心属性？ 「🟢 校招/初级」

考察点：现代布局基本功。

参考答案：

• 容器属性：display: flex、flex-direction（主轴方向）、justify-content（主轴对齐）、align-items（交叉轴对齐）、flex-wrap（换行）。
• 子项属性：flex-grow（放大比例）、flex-shrink（缩小比例）、flex-basis（初始大小）、order（排列顺序）、align-self。
• 简写：flex: 1 = flex: 1 1 0%（可放大可缩小，初始 0）。

追问延伸：

• justify-content: space-between 和 space-around 的区别？
• 怎么用 Flex 实现垂直居中？

Q4: 怎么实现水平垂直居中？ 「🟢 校招/初级」

考察点：CSS 布局综合能力，高频题。

参考答案：

• Flex（推荐）：display: flex; justify-content: center; align-items: center;
• Grid：display: grid; place-items: center;
• 定位 + transform：position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
• 定位 + margin auto：position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto;（需已知尺寸或 flex/grid）

追问延伸：

• 不定宽高的元素怎么居中？
• 移动端 1px 边框问题怎么解决？（transform: scale(0.5)）

Q5: 定位方式有哪些？ 「🟢 校招/初级」

考察点：CSS 定位机制。

参考答案：

• static：默认，正常文档流。
• relative：相对自身偏移，不脱离文档流。
• absolute：相对最近的非 static 祖先定位，脱离文档流。
• fixed：相对视口定位，脱离文档流。
• sticky：滚动到阈值前按 relative，之后按 fixed（需指定 top）。

追问延伸：

• z-index 在什么情况下生效？（需要 positioned 元素）
• 层叠上下文（stacking context）是什么？

Q6: 响应式布局怎么做？ 「🟡 中级」

考察点：移动端适配能力。

参考答案：

• 媒体查询：@media (max-width: 768px) { ... }，按断点调整布局。
• rem / em：rem 相对根元素，em 相对父元素；动态设置根字号实现等比缩放。
• vw / vh：视口单位，1vw = 视口宽度的 1%。
• Flex / Grid：天然支持弹性布局，减少硬编码尺寸。
• 图片响应式：<picture> + srcset，按分辨率加载不同图片。

追问延伸：

• rem 和 vw 各有什么优缺点？
• 移动端 300ms 点击延迟是什么？怎么解决？