是否尊重 CSS 宽度中的小数位？

Question

在做 CSS 设计时我一直想知道的事情。

是否尊重 CSS 宽度中的小数位？或者它们是圆形的？

 .percentage {
  width: 49.5%;
}

或者

.pixel {
  width: 122.5px;
}

原文由 Alastair Pitts 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果它是百分比宽度，那么是的，它是受尊重的：

 #outer {
    width: 200px;
}

#first {
    width: 50%;
    height: 20px;
    background-color: red;
}

#second {
    width: 50.5%;
    height: 20px;
    background-color:green;
}

#third {
    width: 51%;
    height: 20px;
    background-color:blue;
}

 <div id="outer">
    <div id="first">&nbsp;</div>
    <div id="second">&nbsp;</div>
    <div id="third">&nbsp;</div>
</div>

正如 Martin 指出的那样，当您使用小数像素时，事情就会崩溃，但是如果您的百分比值产生整数像素值（例如示例中 200 像素的 50.5%），您将获得合理的预期行为。

编辑： 我更新了示例以显示小数像素发生了什么（在 Chrome 中，值被截断，因此 50、50.5 和 50.6 都显示相同的宽度。）

 #percentage {
    width: 200px;
    color: white;
}

#percentage .first {
    width: 50%;
    height: 20px;
    background-color: red;
}

#percentage .second {
    width: 50.5%;
    height: 20px;
    background-color:green;
}

#percentage .third {
    width: 51%;
    height: 20px;
    background-color:blue;
}

#pixels {
    color: white;
}

#pixels .first {
    width: 50px;
    height: 20px;
    background-color: red;
}

#pixels .second {
    width: 50.5px;
    height: 20px;
    background-color:green;
}

#pixels .third {
    width: 50.6px;
    height: 20px;
    background-color:blue;
}

#pixels .fourth {
    width: 51px;
    height: 20px;
    background-color:red;
}

 <div id="percentage">
    <div class="first">50%=100px</div>
    <div class="second">50.5%=101px</div>
    <div class="third">51%=102px</div>
</div>
<br />
<div id="pixels">
    <div class="first">50px</div>
    <div class="second">50.5px</div>
    <div class="third">50.6px</div>
    <div class="fourth">51px</div>
</div>

原文由 Skilldrick 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

即使在绘制页面时将数字四舍五入，完整的值也会保留在内存中并用于后续的子计算。例如，如果您的 100.4999px 框绘制为 100px，则其宽度为 50% 的子项将计算为 .5*100.4999 而不是 .5*100。依此类推到更深层次。

我创建了深度嵌套的网格布局系统，其中父宽度为 em，子宽度为百分比，并且在上游包含最多四位小数点产生了显着影响。

边缘情况，当然，但要记住一些事情。

原文由 natekoechley 发布，翻译遵循 CC BY-SA 2.5 许可协议