width设200px却占224px是因为默认box-sizing: content-box，width仅指内容区，padding和border额外叠加；改用border-box可使width包含content、padding和border，全局设置* { box-sizing: border-box; }即可解决。
width设了200px，实际占位224px？查box-sizing
因为默认box-sizing: content-box，width只管内容区，padding和border额外加在外部。比如width: 200px; padding: 10px; border: 2px solid #000;，总宽就是200 + 2×10 + 2×2 = 224px。
解决方法很简单：全局加这条规则，一劳永逸：
* { box-sizing: border-box; }
但注意：table、textarea、button等替换元素或特殊布局下，box-sizing可能被浏览器重置或忽略；inline元素（如<span></span>）设box-sizing也无效——它本来就不响应width。
父容器width: 100% + 子元素padding，直接超宽
常见翻车场景：父容器width: 100%，子元素width: 100%; padding: 16px; → 实际撑出滚动条或换行。
- 根本原因不是子元素“不听话”，而是
100% + padding在content-box下天然溢出 - 别靠
calc(100% - 32px)硬减——小数精度误差、多层嵌套时易错，且维护成本高 - 更稳做法：父容器设
box-sizing: border-box，子元素直接写width: 100%; padding: 16px;，总宽严格守界
Flex子项设width还撑开容器？检查min-width
Flex布局里，即使写了width: 200px，子项仍可能把容器顶宽——尤其含图片、长文本或固定尺寸内容时。
这是因为Flex子项默认min-width: auto，会保护内容最小可读宽度，max-width或width压不住它。
- 必须显式加
min-width: 0解除保护 - 别只写
flex: 1，它等价于flex: 1 1 0%，但min-width: auto仍在生效 - 推荐写法：
flex: 0 1 auto;+min-width: 0;，再配max-width: 200px才真正可控
百分比width在table里失效？table-layout说了算
<table>默认<code>table-layout: auto，列宽由内容最长项决定，width: 50%或max-width对<td>基本没用。<p>想让表格响应式收缩，三步缺一不可：</p>
<ul><li>给<code><table>设<code>table-layout: fixed
width: 100%和max-width: 800px
<td>内长文本需单独处理：<code>overflow-wrap: break-word或max-width: 0; overflow: hidden; text-overflow: ellipsis;最易忽略的是：哪怕table-layout: fixed生效，<col>或第一行<th>没设<code>width，列宽仍可能塌缩或撑爆——必须显式定义基准列宽。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
