CSS - 计算不准确

Question

我有一个 ul 元素和 5 个孩子 <li>。

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

<ul> 有一个display: flex 属性。 我尝试使用 <li> 上的 calc 属性来均匀调整列表项的大小：

calc:(100% / 5);

这会给出所需的结果并均匀调整 5 个 <li> 块的大小

现在我在所有的右侧添加了边框，但最后一个子 <li> 元素。所以我从<ul>的总宽度中减少了所有边框的总宽度。

calc:((100% - 8px) / 5);

这也可以正常工作，并均匀地调整带有边框的 <li> 块的大小。

ul {
  width: 600px;
  height: 300px;
  margin: 0;
  padding: 0;
  display: flex;
  background: red;
}

li {
  list-style: none;
  display: block;
  width: calc((100% - 0.8px) / 5);
  height: 100%;
  border-right: 0.2px solid black;
  background: blue;
}

li:last-child {
  border-right: none;
}

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

现在我尝试在视口单元 vw 中设置边框宽度而不是 px，但它给出了不同的结果。

ul {
  width: 600px;
  height: 300px;
  margin: 0;
  padding: 0;
  display: flex;
  background: red;
}

li {
  list-style: none;
  display: block;
  width: calc((100% - 0.8vw) / 5);
  height: 100%;
  border-right: 0.2vw solid black;
  background: blue;
}

li:last-child {
  border-right: none;
}

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

从上面的sn-p可以看出，右边有一点空间。这会随着更宽的视口而变得更大（尝试查看 sn-p 整页）。所以我认为问题在于这里的vw 单位和弹性框。

那么这个错误的原因是什么？

编辑：

从提供的答案和 cmets 中，我看到还有其他更合适的方法来实现我想要做的事情。我很欣赏这些答案，但这些不是我问题的答案。由于calc 在这种情况下显示错误，因此当我尝试在其他情况下（不仅仅是边框）使用calc 和视口单位时，很可能会导致更多问题。所以我需要知道原因和“calc”修复。

Answer 1

像素 (px)：绝对像素。例如，20px 在任何屏幕上实际上都是 20 像素。如果显示器为 1980x1200，并且您将元素的高度设置为 200 像素，则该元素将占用 200 像素。

视口高度/宽度 (vw/vh)：相对于视口的大小（基本上是浏览器窗口）。

1px = (100 / document.documentElement.clientWidth)vw 1px = (100 / 500) = 0.2vw

Answer 2

您似乎正在使用flex 将您的lis 分发到您的ul 中。在这种情况下，您不需要calculate 宽度来使它们相等。这就是flex 应该做的事情。

看这个例子：

* { box-sizing: border-box; margin: 0; padding: 0; }
ul, li { list-style: none; }
ul { width: 600px; height: 300px; background: red; display: flex; }
li {
  flex: 1 0 auto;
  border-right: 0.8vw solid black;
  background: blue;
}
li:last-child { border-right: none; }

<ul>
  <li></li><li></li><li></li><li></li><li></li>
</ul>

在容器上指定flex dsiplay 时，您只需对子项应用flex 属性，以使它们表现为灵活的项目。在您的特定用例中，您需要以下内容：

1. flex-grow：设置为 1。这将使您的 li 增长到填满整个 ul 宽度。
2. flex-shrink：设置为 0。您不希望您的 li 缩小。
3. flex-basis：设置为auto。您希望您的 li 自动增长到均衡宽度。

所以，你看，你根本不需要calc。

您也无需专门将display: block 应用到您的lis。根据这里的规格：https://www.w3.org/TR/css-flexbox-1/#flex-items

一个flex项目的显示值被阻塞：如果指定 显示生成弹性容器的元素的流入子项 是一个内联级别的值，它计算到它的块级等价物

正如 cmets 中的 @BoltClock 所指出的，列表项已经被阻止。

边界

现在，来到边界。在您的第一个示例中，您以0.2px 为单位指定了宽度。这是没有意义的。虽然规格允许小数像素，但它会将其四舍五入到显示器上可用的最近像素，通常为 1。

在第二个示例中，您希望边框随视口缩放。那挺好的。 0.8vw 没问题。

请看我发布的示例，in this fiddle。调整结果窗口的大小，您将看到边框相对于视口大小发生变化。

最后，您可能想要也可能不想设置box-sizing。这取决于你的布局。无论您使用什么，都始终如一地使用它。

Answer 3

您无需进行计算即可为您的 li 添加内部内容。如果你给 box-sizing: border-box; 属性，border 和 padding 不会使容器变大。

ul {
  width: 600px;
  height: 300px;
  margin: 0;
  padding: 0;
  display: flex;
  background: red;
}

li {
  list-style: none;
  display: block;
  width: calc(100% / 5);
  height: 100%;
  border-right: 2px solid black;
  background: blue;
  box-sizing: border-box;
}

li:last-child {
  border-right: none;
}

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>