当 `body` 内容垂直溢出导致滚动条出现时，如果页面元素使用了 `100vw` 作为宽度或边框宽度，`html` 元素可能会出现意外的水平宽度扩张。这通常是由于 `vw` 单位在计算时包含了滚动条的宽度。本文将深入探讨 `vw` 单位的这一特性，并提供避免此问题以及实现斜角设计的现代css解决方案。
vw 单位与滚动条：问题的根源
在网页布局中，我们经常使用 vw (viewport width) 和 vh (viewport height) 单位来创建响应式设计。1vw 等于视口宽度的百分之一。然而，一个常见的误解是 100vw 总是等于可见的浏览器内容区域宽度。实际上，当页面内容垂直溢出，导致浏览器显示垂直滚动条时，100vw 会包含这个滚动条的宽度。
考虑以下场景，一个 div 元素被用来创建对角线效果，通过设置其右边框宽度为 100vw：
* {
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
html {
background-color: green; /* 用于观察html元素的背景 */
}
body {
background-color: red; /* 用于观察body元素的背景 */
}
body .diagonal {
border-top: 10vw solid blue;
border-right: 100vw solid purple; /* 问题所在：border-right宽度设置为100vw */
}<html>
<body>
SECTION 1
<div class="diagonal"></div>
Why does the html enlarge the width on the right when the body overflows the bottom of the page? Thanks
<br>text
<br>text
<br>Try by adding some text line and scrool left
<br>text
<br>text
<br>text
<br>text
<br>text
<br>text
<br>text
</body>
</html>当 body 中的文本行足够多，导致页面出现垂直滚动条时，你会发现 html 元素的背景色（绿色）在页面的右侧额外扩张了一部分。这是因为 .diagonal 元素的 border-right: 100vw 属性，在计算时包含了垂直滚动条的宽度。例如，如果滚动条宽度为 17px，那么 100vw 实际上会比可见内容区域宽 17px，从而导致 html 元素被撑开，进而产生水平滚动条或右侧空白区域。
理解 vw 的精确行为
根据 CSS 规范，vw 单位是相对于初始包含块的宽度。在大多数浏览器中，这个初始包含块的宽度在有垂直滚动条时会包含滚动条的宽度。这意味着 100vw 实际上是浏览器窗口的完整宽度，包括任何可能出现的垂直滚动条。
立即学习“前端免费学习笔记（深入）”；
这种行为对于需要精确匹配可见视口宽度的布局来说是一个陷阱。如果一个元素被设置为 width: 100vw 或其边框宽度为 100vw，并且页面同时出现了垂直滚动条，那么这个元素就会比你预期地更宽，从而导致水平滚动条的出现或父元素（如 html）的意外扩张。
解决方案与最佳实践
为了解决 100vw 带来的宽度扩张问题，并实现美观的斜角设计，我们可以采取以下策略。
1. 避免 100vw 导致的溢出
如果你的目标是让元素宽度或边框宽度与页面的 可见内容区域 宽度一致，并且不希望它包含滚动条，那么直接使用 100vw 是不合适的。
- 使用 width: 100%： 对于大多数情况，如果一个元素需要与其父容器的宽度一致，width: 100% 是更安全的选择。它会相对于其最近的块级父元素进行计算，并且通常不会包含滚动条的宽度（除非父元素本身被 vw 单位撑开）。
- 使用 calc() 函数： 如果你确实需要基于视口宽度进行计算，并且知道滚动条的固定宽度（例如，在某些操作系统和浏览器中滚动条宽度是固定的），你可以尝试使用 calc(100vw - <scrollbar-width>)。但这通常不推荐，因为滚动条宽度因系统、浏览器和用户设置而异，难以精确计算。
对于本例中的斜角边框，如果坚持使用边框实现，并且希望它与 body 的宽度对齐，可以尝试将 .diagonal 元素的 width 设置为 100%，然后调整边框宽度。但这种方法对于创建复杂的斜角效果仍然有限，且可能不是最直观的实现方式。
/* 修正示例：如果目标是让元素宽度与父元素body对齐 */
body .diagonal {
/* 移除 border-right: 100vw; */
width: 100%; /* 让div占据body的全部宽度 */
border-top: 10vw solid blue;
/* 如果只是想让它视觉上覆盖到右侧，需要更复杂的布局或使用其他技术。
对于斜角，通常不会用100vw的border-right。
此处如果仍设置border-right，其宽度会相对div自身宽度计算。
若要实现斜角，应考虑以下现代方法。
*/
}2. 创建斜角设计的现代方法
使用边框来创建复杂的斜角效果通常不是最佳实践，因为它在响应式和维护方面存在局限性。现代 CSS 提供了更强大和灵活的工具来实现此类设计。
a. 使用 clip-path
clip-path 属性允许你定义一个可见区域，超出该区域的内容将被裁剪。这对于创建各种多边形和不规则形状非常有用。
.diagonal-clip-path {
width: 100%;
height: 150px; /* 设定一个高度 */
background-color: blue;
/* 使用 clip-path 创建一个斜角 */
clip-path: polygon(0 0, 100% 0, 100% 80%, 0% 100%); /* 顶部左侧，顶部右侧，底部右侧（20%向上），底部左侧 */
}<div class="diagonal-clip-path"></div>
b. 使用 transform: skew()
通过 transform 属性的 skew() 函数，你可以倾斜一个元素，从而创建斜角效果。通常需要结合伪元素或额外的 div 来实现。
.diagonal-skew {
position: relative;
width: 100%;
height: 150px;
overflow: hidden; /* 隐藏倾斜后超出边界的部分 */
background-color: transparent; /* 父元素透明 */
}
.diagonal-skew::before {
content: '';
position: absolute;
top: 0;
left: -50%; /* 调整位置以覆盖整个宽度，可能需要根据倾斜角度调整 */
width: 200%; /* 确保倾斜后能覆盖整个父元素宽度 */
height: 100%;
background-color: purple; /* 斜角的颜色 */
transform: skewY(-5deg); /* 沿Y轴倾斜，创建斜角 */
transform-origin: top left; /* 倾斜的基点 */
}<div class="diagonal-skew"> <!-- 内容放置在斜角之上 --> </div>
c. 使用 linear-gradient 作为背景
linear-gradient 可以创建线性渐变，通过巧妙地设置颜色停止点，可以模拟出硬边斜角。
.diagonal-gradient {
width: 100%;
height: 150px;
/* 使用渐变创建斜角，例如一个从左下到右上的斜线 */
background: linear-gradient(to top right, transparent 50%, purple 50%);
/* 或者更复杂的斜角，根据需求调整角度和颜色停止点 */
/* background: linear-gradient(150deg, blue 50%, purple 50%); */
}<div class="diagonal-gradient"></div>
注意事项
- vw 单位的适用场景： vw 单位非常适合用于需要与视口尺寸直接相关的元素，例如全屏背景图片、字体大小（
