border看起来比容器窄是因为默认box-sizing为content-box，边框在宽高外部；改用box-sizing: border-box并配合width: 100%即可使边框与容器同宽。
为什么 border 看起来比容器窄？
默认情况下，border 是加在 width 和 height 外部的。比如设了 width: 200px + border: 5px solid #000，实际占用宽度是 210px（左右各+5px），导致边框“撑出”容器，视觉上不贴合边缘。
box-sizing: border-box 是关键
它让 width 和 height 包含 padding 和 border，这样设置 width: 100% 时，边框自然就和容器同宽了。
- 必须显式声明，HTML5 不默认启用
- 建议全局重置：
*, *::before, *::after { box-sizing: border-box; } - 单独使用也有效：
.container { width: 100%; border: 2px solid #333; box-sizing: border-box; }
配合 width: 100% 才真正“同宽”
仅设 box-sizing 不够——如果元素本身没占满父容器，边框还是不会拉满。
- 确保父容器有明确宽度（如
width: 300px或max-width: 100%） - 子元素用
width: 100%+box-sizing: border-box - 避免
margin或float干扰流式布局 - Flex/Grid 容器中，
width: 100%可能被忽略，改用flex: 1或grid-column: 1 / -1
常见失效场景与排查点
即使写了 box-sizing，边框仍“缩进”或“溢出”，大概率是这些原因：
立即学习“前端免费学习笔记（深入）”；
- 父容器有
padding，子元素width: 100%只占内容区，不是整个父盒 —— 改用width: 100%;+margin: -父padding值，或更稳妥地用calc(100% + 2 * 父padding) - 用了
display: inline-block导致换行/空格产生间隙 —— 改为display: block或移除 HTML 中的空白符 - CSS 优先级被覆盖 —— 检查是否被其他规则（如第三方库、浏览器默认样式）重置了
box-sizing - 某些旧版 Android WebView 对
box-sizing支持不全 —— 加前缀：-webkit-box-sizing,-moz-box-sizing
边框和容器同宽这件事，核心就两行：确保父容器可测量，再让子元素用 box-sizing: border-box + width: 100%。其余都是围绕这两点打补丁。
