width本身不使元素变大，但content-box下实际宽度=width+padding+border；改用border-box可让width表示总宽；flex/grid中width还受flex-basis、min/max-width等影响。
width 设置后元素变大？先确认你用的是哪个盒模型
CSS 的 width 属性本身不会“让元素变大”，但如果你看到设置了 width: 200px 后，元素在页面中占的空间远超 200px，大概率是因为你没意识到浏览器默认用的是 box-sizing: content-box（标准盒模型），而 padding 和 border 是额外加在 width 外面的。
content-box 下 width 只控制内容区，不是整体宽度
在 box-sizing: content-box（默认值）下，元素最终占据的水平空间是：
实际占用宽度 = width + padding-left + padding-right + border-left-width + border-right-width
比如：
.box {
width: 200px;
padding: 10px;
border: 5px solid #000;
}这个 .box 元素实际占宽是 200 + 10 + 10 + 5 + 5 = 230px。如果你只盯着 width 看，就容易误以为“设了 200 却变大了”。
立即学习“前端免费学习笔记（深入）”；
border-box 能让 width 真正代表总宽
想让 width 表示元素最外层边界宽度（即包含 padding 和 border），直接改盒模型：
- 全局重置推荐写法：
* { box-sizing: border-box; } - 单个元素设置：
box-sizing: border-box;
此时上面例子中，width: 200px 就真的等于总宽 200px，padding 和 border 会从这 200px 里“挤出来”，内容区自动缩小。
flex / grid 容器里的 width 行为更隐蔽
在 display: flex 或 display: grid 的子项上设 width，还可能被容器的 flex-basis、min-width 或 align-items 干扰。尤其当父容器有 flex-wrap: wrap 或子项未设 flex-shrink: 0 时，width 可能被压缩或拉伸——这时候查 computed style 里的 width 值，常会发现它和你写的不一致。
真正影响尺寸的往往是：
-
flex-basis（优先级高于width） -
min-width/max-width（会截断 width 计算） -
box-sizing是否统一（混合使用 content-box 和 border-box 容易算错）
遇到 flex 里 width “失灵”，先打开开发者工具，看 Elements 面板右下角的 Computed 标签页里 width 实际解析值是多少，再往上逐层检查 flex 相关属性和 box-sizing。
