Question

我希望将子元素完美地放在其父元素中。孩子的正确身高和宽度似乎是14vw。我从16vw中减去2vw（来自父母和孩子的边界量）得到了这个数字，这是父母的宽度和高度。然而，当我调整浏览器大小时，孩子的底部边框与父母之间存在明显的差距。右边界之间的差距也较小。

视口宽度似乎不像我预期的那样。有关为什么会出现这种情况的任何解释？

我还注意到，当我检查开发人员工具中的border元素时，它总是一个整数。如果视口宽度是浏览器宽度的1％，那么似乎不应该是这种情况。

body {
  height: auto;
  width: auto;
  margin: 0 auto;
}
.container {
  width: 16vw;
  height: 16vw;
  border: 1vw solid black;
  margin: 0 auto;
}
.child {
  width: 14vw;
  height: 14vw;
  position: relative;
  border: 1vw solid #654321;
}

<body>
  <div class='container'>
    <div class='child'></div>
  </div>
</body>

Answer 1

实际上，浮点大小是正确的。您可以看到https://developer.mozilla.org/en-US/docs/Web/CSS/length或https://www.w3.org/TR/2005/WD-css3-values-20050726/。它说：

可以插入CSS数据类型的值以允许动画。在这种情况下，它们被插值为实数，浮点数。插值发生在计算值上。插值的速度由与动画相关的计时功能决定。

我猜您的情况会发生，因为浏览器无法呈现例如0.5px边框宽度，因此它始终必须使用舍入的整数边框值。

您可以通过让内部.child填充整个空间并将其自己的边框大小包含在其维度中来实际解决此问题：

width: 100%;
height: 100%;
box-sizing: border-box;

请参阅：https://jsfiddle.net/dsLpa7kg/

为什么视口宽度不适用于边框？

1 个答案: