容器被撑开是因为默认content-box模型下width不包含padding和border；使用box-sizing: border-box可将宽度计算包含内边距和边框，推荐全局设置* { box-sizing: border-box; } 以统一布局行为。
当css容器的宽度被意外撑开时，通常是因为元素的实际占用空间超出了设定的width值。这常见于设置了padding或border后，容器比预期更宽。原因在于CSS的默认盒模型计算方式：width只表示内容区宽度，而padding、border和margin会在此基础上额外增加尺寸。
为什么容器会被撑开？
假设你给一个盒子设置如下样式：
width: 200px;
padding: 20px;
border: 5px solid #000;
按默认的content-box盒模型计算，这个盒子实际占用的宽度是：
200（内容） + 40（左右padding） + 10（左右border） = 250px
因此，即使设置了width为200px，它在页面中仍占用了250px，导致父容器可能被撑开。
立即学习“前端免费学习笔记（深入）”；
用box-sizing改变宽度计算方式
解决这个问题的关键是使用box-sizing属性。将它设为border-box后，width所设定的值将包括内容、padding和border：
box-sizing: border-box;
此时再设置width: 200px，浏览器会确保整个盒子（含内边距和边框）总宽度为200px，内容区自动压缩。这样就能避免因padding或border导致的溢出问题。
推荐实践：全局设置border-box
为避免频繁出现宽度撑开问题，建议在项目初始样式中统一设置：
* {
box-sizing: border-box;
}
这种写法让所有元素都采用border-box模型，使布局更可控，尤其在响应式设计或栅格系统中效果明显。需要特殊处理的元素可单独调整回content-box。
基本上就这些——理解盒模型差异，并用box-sizing统一管理宽度计算，能大幅减少布局错位问题。不复杂但容易忽略。