CSS计算不准确

Question

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

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

的<ul>有display: flex属性。 我尝试使用钙财产上<li>均匀大小我的列表项：

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代替像素的边框宽度，但它给出了一个不同的结果。

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>

正如你可以从上面的代码段看到，有空间向右一点点。随着更宽的视口，这会变得更大（尝试查看片段的整个页面）。所以我认为问题在于这里的vw单位和flexbox。

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

编辑：

从提供的答案和评论，我已经看到了还有其他更恰当的approches达到什么我要怎样做。我赞赏这些答案，但这些不是我的问题的答案。由于calc在这种情况下显示错误，因此当我尝试在其他情况下（而不仅仅是边框）尝试使用calc和视口单元时，很可能会导致更多问题。所以我需要知道原因和“calc”修复。

Answer 1

你不需要做calc来为你的li添加内容。如果您给0123,支柱，边框和填充不会使容器增长。

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>

Answer 2

看来你正在使用flex分发您ul里面你li秒。在这种情况下，您不需要使用宽度来使这些宽度相等。这就是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应用于您的li s。按照这里的规格：https://www.w3.org/TR/css-flexbox-1/#flex-items

柔性项的显示值被blockified：如果一个元件产生的柔性容器 的同流子的指定 显示是直列级值，它计算到它的块级别相当于

正如@BoltClock在注释中指出的那样，列表项已被封锁。

国界

现在，来到边境。在第一个示例中，您指定了0.2px单位的宽度。这没有意义。尽管规格允许使用分数像素，但它会将其舍入到显示屏上可用的最接近像素，通常为1.

在您的第二个示例中，您希望边框与视口一起缩放。那很好。没有问题的0.8vw。

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

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

Answer 3

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

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

1px =（100/document.documentElement.clientWidth）vw 1px =（100/500）= 0。2vw