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

据我了解，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>

最佳答案

您需要在宽度本身中包括边框大小：实际上您的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

关于css - 视口(viewport)单位VW重叠-每个视口(viewport)小于100 VW？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26552179/