css - 视口单元大众重叠 - 每个视口少于 100 个大众？

Question

据我了解，1vw 是视口宽度的 1/100，因此给定视口中有 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