HTML面试题CSS盒模型_html面试题CSS盒模型详解【大全】-html教程-PHP中文网

box-sizing是决定盒模型行为的唯一关键开关：content-box下width/height仅指内容区，实际尺寸=width+padding+border；border-box下width/height即元素总宽高，内容区自动收缩。

html面试题css盒模型_html面试题css盒模型详解【大全】

直接说结论：box-sizing 是决定盒模型行为的唯一关键开关，不设它，width 和 height 永远只算内容区；设了 box-sizing: border-box，才算你“肉眼看到的宽高”。几乎所有布局错乱、响应式失效、组件尺寸失控，根源都在这里没统一。

为什么 `width: 200px` 的元素实际占了 224px？

这是标准盒模型（box-sizing: content-box）的默认行为：浏览器把 width 当作纯内容宽度，然后额外加上 padding 和 border。

比如：

.box {
  width: 200px;
  padding: 10px;
  border: 2px solid #000;
}

它的实际占用宽度是 200 + 10×2 + 2×2 = 224px。但开发者常误以为“我写了 200px，它就该是 200px”——这个认知差就是 bug 温床。

常见错误现象：

Flex 容器里子项溢出容器，检查发现子项 width: 100% + padding 后超出了父容器
Grid 列宽计算不准，因为 grid-template-columns: 1fr 1fr 下每个格子又加了 padding 和 border
表单控件（如 input）在不同浏览器中宽度不一致，因各浏览器对默认 padding 和 border 处理不同

`box-sizing: border-box` 怎么用才真正生效？

它不是“设一次就全局管用”的属性，必须显式应用到目标元素上，且继承性为 no（不继承）。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

实操建议：

项目起步时，在 CSS 入口文件顶部加重置规则：
```
*,
*::before,
*::after {
  box-sizing: border-box;
}
```
避免只写 div { box-sizing: border-box; } —— 这漏掉了 input、button、textarea 等原生表单元素
若用 CSS-in-JS 或 scoped style（如 Vue SFC），需确保该规则能穿透到子组件内部元素，否则局部样式可能覆盖重置
注意：伪元素 ::before/::after 也必须单独声明 box-sizing，否则它们仍按 content-box 计算

JS 获取元素宽高时，`offsetWidth` 和 `getBoundingClientRect()` 有什么区别？

二者都返回渲染后的像素值，但计算依据和适用场景不同：

offsetWidth 返回的是元素自身的 border-box 尺寸（含 padding + border，不含 margin），且兼容性极好（IE6+）
getBoundingClientRect() 返回的是该元素相对于视口的完整矩形信息（width、height、top、left 等），其 width/height 与 offsetWidth/offsetHeight 值通常一致，但它是实时计算、受滚动影响
关键差异：当元素被缩放（transform: scale(0.8)）时，offsetWidth 返回原始尺寸，而 getBoundingClientRect().width 返回缩放后的真实渲染宽度
不要用 style.width 或 currentStyle（已废弃）——它们要么只读行内样式，要么只在 IE 有效

面试常考的“父子 margin 重叠”和盒模型有关吗？

无关。margin 重叠（collapsing margins）是 BFC（块级格式化上下文）规则导致的，和 box-sizing 或盒模型计算方式无直接关系。

但容易混淆的点在于：当父元素没有形成 BFC（例如没设 overflow: hidden、display: flow-root 等），其 margin-top 会和第一个子元素的 margin-top 合并，此时父元素的 offsetHeight 可能比预期小——看起来像“盒模型没算对”，其实是渲染层的布局规则在起作用。

真正要警惕的是：别指望靠改 box-sizing 来解决 margin 重叠。该创建 BFC 的地方，就得老老实实加触发条件。

复杂点在于，盒模型影响的是“单个元素的尺寸解释”，而 margin 重叠影响的是“多个元素之间的空间关系”——两者共存于同一 DOM 节点，但运行在不同阶段，调试时得分开判断。