块级元素是否等效于设置100vw宽度？两容器差异解析

块级元素的默认宽度表现并不等同于设置width:100vw，二者存在不少深层差异，结合你的示例具体拆解：

1. 盒模型计算逻辑完全不同 #

块级元素默认是width: auto，它的宽度会自动填充父容器的可用空间，并且会自动容纳padding和border——也就是说，给默认块级元素加内边距或边框，它的总宽度（内容+内边距+边框）会保持和父容器一致，内容宽度会自动收缩来适配。

而设置width:100vw的元素，宽度固定为视口宽度的100%，此时padding和border会额外加到这个宽度上，导致元素总宽度超出视口。比如你的示例里两个div都加了padding:10px：

• .container-1（默认宽度）的总宽度等于body的宽度，内容宽度是body宽度 - 20px（左右各10px内边距）；
• .container-2（width:100vw）的总宽度是100vw + 20px，缩小浏览器窗口就能看到它会触发横向滚动条，而第一个div不会。

2. 受父容器约束的差异 #

块级元素的width:auto完全依赖父容器的可用宽度，如果把这两个div放到一个width:500px的容器里，.container-1会自动适配成500px总宽度，而.container-2还是会保持100vw的宽度，完全不受父容器限制。

3. 滚动条的影响差异 #

当页面出现纵向滚动条时，100vw会包含滚动条的宽度，而块级元素的width:auto会自动减去滚动条宽度，保证内容和视口可显示区域对齐。这意味着width:100vw的元素会被滚动条挡住一部分，或者直接触发横向滚动，而默认块级元素不会有这个问题。

示例代码 #

<head>
    <style>
        * {
          margin: 0;
          padding: 0;
        }
        
        body {
          font-weight: bold; 
          font-size: 30px; 
          font-family: sans-serif;
        }
        
        div {
          padding: 10px; 
        }
        
        .container-1 {
          background-color: tomato;
        }
        
        .container-2 {
          width: 100vw; 
          margin-top: 20px; 
          background-color: limegreen; 
        }
    </style>
</head>
<body>
<div class="container-1">
  HELLO WORLD! (default width)
</div>

<div class="container-2">
  HELLO WORLD! (vw width)
</div>
</body>

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