什么是HTML模板的盒模型_网页尺寸控制核心法【基础】-html教程-PHP中文网

推荐使用 border-box 是因它让 width/height 直接代表总尺寸，避免 content-box 下 width: 100% + padding + border 导致溢出；全局设 * { box-sizing: border-box; } 可一劳永逸。

什么是html模板的盒模型_网页尺寸控制核心法【基础】

box-sizing 不是盒模型本身，而是控制尺寸怎么算的开关。默认 content-box 模式下，你写的 width: 200px 只管内容区，padding 和 border 是额外加在它外面的——结果实际宽度变成 200 + 左右 padding + 左右 border，稍不注意就撑破容器。

为什么 width: 100% 的 div 总是溢出父容器

根本原因不是写错了百分比，而是浏览器默认用 content-box：父容器设了 padding: 16px 或 border: 1px，子元素 width: 100% 仍只填满“内容区”，但总宽 = 100% + padding + border → 必然溢出。
常见于卡片、表单区域、响应式栅格内部嵌套。
解决办法不是手动 calc(100% - 32px)，而是统一切换计算逻辑：

* { box-sizing: border-box; } 全局生效（必须放在所有样式之前）
对表单控件单独加固：input, textarea, select, button { box-sizing: border-box; }
旧版浏览器需补前缀：-webkit-box-sizing、-moz-box-sizing、-ms-box-sizing

border-box 模式下 padding 和 border 不再“偷空间”

启用 border-box 后，width 和 height 指的是最外层盒子的总尺寸。内容区自动收缩腾位置，padding 和 border 不再导致尺寸膨胀。

例如：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

div {
  width: 200px;
  padding: 12px;
  border: 2px solid #333;
  box-sizing: border-box;
}

此时该 div 占用的水平空间严格等于 200px，内容区只剩 200 - 12×2 - 2×2 = 172px 宽。改 padding 不会影响布局流，这对组件复用和断点切换非常关键。

哪些地方最容易漏掉 box-sizing 设置

不是所有元素都“听话”。以下几类常被忽略，且各浏览器默认行为不一致：

input 和 textarea：Chrome 默认有 padding，Firefox 更“紧”，Safari 对 box-sizing 的继承逻辑曾有 bug
button：自带 border 和 padding，且部分旧版 IE 下 box-sizing 不生效
自定义组件封装时：如果父组件用了 border-box，但子组件样式未重置，内部 padding 仍会叠加
第三方 UI 库（如 Bootstrap 4+）已内置 border-box，但若你项目里混用了老版本或手写样式，冲突就会暴露

margin 始终不参与 box-sizing 计算

这是最容易误解的一点：box-sizing 只影响 width/height 如何包含 padding 和 border，margin 永远是“盒子外面”的距离，不会被锁进 width 里，也不会因 border-box 改变行为。
所以 margin 合并、塌陷问题依然存在，不能靠 box-sizing 解决。
要处理父子塌陷，还是得用 overflow: hidden、padding 替代或触发 BFC。