CSS布局问题：road类div无法占满宽度的解决方案求助

我制作了一个包含道路、车道线及两侧车辆的页面布局，所有相关元素均嵌套在class为road的div中。我为该div设置width:100%属性后，它仍无法占满页面宽度，尝试解决但未成功，相关代码如下：

HTML代码 #

<div class="road">
    <div id="car-one" class="car-one">
        <div class="upper-body"></div>
        <div class="square-car"></div>
        <div class="wheels" id="tire-one"></div>
        <div class="wheels" id="tire-two"></div>
    </div>

    <div class="road-strips">
        <div class="stripe"></div>
        <div class="stripe"></div>
        <div class="stripe"></div>
        <div class="stripe"></div>
    </div>

    <div class="car-two">
        <div class="upper-body-two"></div>
        <div class="square-car-two"></div>
        <div class="wheels-two" id="tire-one2"></div>
        <div class="wheels-two" id="tire-two2"></div>
    </div>
</div>

CSS代码 #

.road {
    /* position: relative; */
    width: 100%;
    margin-top: 18.5em;
    height: 650px;
    background-color: gray;
    border: 1px solid black;
}

解决方案 #

这问题通常是浏览器默认样式和盒模型规则导致的，按以下步骤修复：

1. 清除body的默认边距
   浏览器默认会给body设置margin: 8px，这会让road的父容器（body）本身就没占满视口宽度，road的100%宽度自然也无法铺满页面。添加以下CSS：

body {
    margin: 0;
    padding: 0;
}

2. 设置盒模型为border-box
   你的road div设置了border: 1px solid black，默认的box-sizing: content-box下，元素的width仅包含内容宽度，border会额外增加总宽度，导致road超出父容器。给road加上box-sizing: border-box，让width包含border和padding：

.road {
    box-sizing: border-box;
    /* 保留原有样式 */
    width: 100%;
    margin-top: 18.5em;
    height: 650px;
    background-color: gray;
    border: 1px solid black;
}

3. （可选）全局统一盒模型
   如果页面其他元素也有类似宽度计算问题，可以全局设置盒模型，避免重复代码：

* {
    box-sizing: border-box;
}

完成以上操作后，road div就能正常占满页面宽度了。

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