根本原因是box-sizing: content-box导致width: 100%不包含padding和border，实际总宽=100%+padding+border而溢出；需全局设 , ::before, *::after { box-sizing: border-box; }并用computed面板验证生效。
流式布局里宽度错位，90% 是因为没统一 box-sizing，且没把 padding 和 border 算进总宽——不是代码写错了，是盒模型理解偏差导致的。
为什么 width: 100% 还会溢出？
默认 box-sizing: content-box 下，width: 100% 只管内容区，加上 padding: 16px 和 border: 1px solid 后，实际宽度 = 100% + 32px + 2px，必然撑破父容器。
- 常见现象：Flex 容器里子项换行、Grid 列被压缩、导航栏右侧消失、表单输入框溢出
- 检查方法：用开发者工具选中元素 → 看右侧面板的「Box Model」图示，对比「Computed width」和你写的
width值是否一致 - 根本原因：不同元素可能混用两种盒模型（比如重置样式漏了
input或button），导致局部计算失衡
如何全局启用怪异盒子模型？
加一行通配重置最稳妥，但要注意它不适用于所有场景：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
-
* { box-sizing: border-box; }—— 简单粗暴，覆盖全部元素 -
*, *::before, *::after { box-sizing: border-box; }—— 更完整，包含伪元素（推荐） - 避免写在局部 CSS 文件开头，否则可能被后续
box-sizing: content-box覆盖（尤其第三方 UI 库） - 个别需要精确控制内容区尺寸时（如 Canvas 容器、SVG viewBox 适配），得单独设回
content-box
border-box 下 padding 和 border 怎么影响内容区？
box-sizing: border-box 不是“忽略” padding/border，而是把它们从 width/height 里扣掉——内容区自动收缩，但总占地不变。
- 例如：
width: 200px; padding: 20px; border: 2px solid→ 内容区实际宽 = 200 − 40 − 4 = 156px - 如果
padding+border>width（比如width: 50px; padding: 30px;），内容区会被压成负值，浏览器按 0 渲染，文字直接不可见 - 响应式断点里慎用大
padding：小屏下width: 100vw+padding: 2rem可能让内容区归零
表格流式布局宽度失控怎么办？
表格的列宽算法和普通盒子无关，box-sizing 对 <td> 无效，必须另想办法：<ul>
<li>
<code>table-layout: fixed 必须配合 table 的明确 width（如 width: 100%），否则退化为 auto 模式
<col width="120">，再看第一行 <th width="20%">，其余行的 <code>width 属性全被忽略overflow-x: auto，而不是直接加在 <table> 上<li>真正流式替代方案：<code>display: grid + grid-template-columns: repeat(auto-fit, minmax(120px, 1fr))，比调 table 稳定得多盒模型不是开关，是计算逻辑。哪怕写了 border-box，只要某处漏了 margin 或父容器用了 max-width 却没设 width，宽度仍会意外漂移——问题常藏在看不见的继承链里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
