css - 视口(viewport)单元 VW 重叠 - 每个视口(viewport)小于 100 vw？

Question

根据我的理解，1vw 是视口(viewport)宽度的 1/100，因此在给定的视口(viewport)中有 100vw。但是，当我有两个宽度为 25vw 的 div 时，一个位于距右边缘 25vw 的位置，一次位于距左边缘 25vw 的位置，并且它们重叠很多。这适用于多个浏览器，为什么会这样？

#sign_up_button{
    position: fixed;
    padding: none;
    top: 68vh;
    right: 25vw;
    width: 25vw;
    border: solid;
}
#login_button{
    position: fixed;
    top: 68vh;
    left: 25vw;
    width: 25vw;
    border: solid;
}

<div id="sign_up_button">Test</div>
<div id="login_button">Test</div>

Answer 1

您需要在宽度本身中包含边框大小:实际上您的 div 宽度是 25vw + <border size> , 所以使用 box-sizing属性以便在宽度定义中包含边框

div {
  -webkit-box-sizing: border-box;  
  -moz-box-sizing: border-box;  
  box-sizing: border-box;  
}

更多信息:https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing