视口宽度缩小时div溢出body？媒体查询布局异常排查

核心原因在于CSS盒模型的宽度计算逻辑和媒体查询的触发时机不匹配：

1. 默认盒模型下宽度不含内边距
   你的div设置了width:950px和padding:3em，按照默认的content-box盒模型，width只代表内容区宽度，div的实际总宽度是 950px + 3em×2（左右内边距之和）。当视口宽度处于 950px 到 950px + 6em 这个区间时，媒体查询@media screen and (max-width: 950px)还未触发，div的总宽度超过了视口宽度，自然会出现水平滚动条，看起来就是div溢出了body的蓝色边框。

2. 媒体查询触发后宽度自适应
   当视口宽度缩小到≤950px时，媒体查询生效，width:auto会让div的内容区宽度自动适配父容器（body）的可用空间。此时div的总宽度（内容区+内边距）会等于body的内容区宽度（视口宽度减去body的2px左右边框），不会超出视口范围，滚动条也就随之消失了。

如果想避免中间出现滚动条的过渡阶段，可以把媒体查询的触发阈值调整为950px + 6em，或者给div添加box-sizing:border-box，让width属性包含内边距，这样div的总宽度固定为950px，媒体查询触发时就不会有溢出问题。

内容的提问来源于stack exchange，提问作者user9026