元素实际宽度不等于设置的width值，根本原因是CSS默认采用content-box盒模型，width仅指内容区宽度，padding和border额外增加；改为border-box可使width包含content、padding和border。
元素实际宽度不等于你写的 width 值，根本原因在于 CSS 默认采用 content-box 盒模型——它只把 width 当作内容区的宽度，而 padding 和 border 是额外加在外面的。
为什么设置 200px 却显示得更宽？
浏览器按这个公式算总宽度：
实际宽度 = width + 左右 padding + 左右 border
比如你写了：
那它最终占位是：200 + 10 + 10 + 3 + 3 = 226px。这不是 bug，是默认行为。
快速统一尺寸：用 border-box
把盒模型换成 border-box，就能让 width 指代“整个盒子的总宽”：
- width 包含 content + padding + border
- 内容区域会自动收缩，腾出空间给 padding 和 border
- 多个元素设相同 width，视觉上就真正等宽了
推荐全局启用（写在样式最前面）：
立即学习“前端免费学习笔记（深入）”；
* { box-sizing: border-box; }别忽略 display 类型的影响
有些元素天生不认 width：
-
<span>、<a>等 inline 元素：width/height 完全无效 - 解决办法：加
display: inline-block或display: block - flex 子项若没设
flex-basis，width 可能被 flex-grow 覆盖
检查父容器和布局上下文
即使 box-sizing 正确，这些情况也会干扰宽度表现：
- 父元素没设宽度（尤其百分比子元素）→ 给父元素明确 width 或用 flex/grid 布局
- 浮动元素未清除 → 父容器塌陷，子元素宽度失去参照
-
绝对定位元素 → width 相对于最近的
position: relative祖先，不是 viewport - min-width/max-width 冲突 → 比如
width: 300px; max-width: 200px，最终取 200px
