CSS 宽度是否尊重小数位：百分比与像素？

CSS 宽度中的小数位：尊重还是四舍五入？

在制作 CSS 设计时，您可能想知道 CSS 宽度中的小数位是否得到尊重或圆形。浏览器是否尊重或忽略小数位取决于您处理的是百分比值还是像素值。

百分比宽度

对于百分比宽度，小数位为充分尊重。 49.5% 的宽度将占据 49.5% 的可用空间。例如：

.percentage {
  width: 49.5%;
}

像素宽度

相反，不考虑像素宽度的小数位。它们总是四舍五入到最接近的整数。 122.5 像素的宽度将变为 123 像素。例如：

.pixel {
  width: 122.5px;
}

为了说明差异，请考虑以下示例：

#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><p>此处，第一个块是可用空间的 50%。第二个块占可用空间的 50.5%。但由于像素宽度不考虑小数位，因此四舍五入为 51px。第三块是可用空间的 51%，即 102px。</p></div>

以上是CSS 宽度是否尊重小数位：百分比与像素？的详细内容。更多信息请关注PHP中文网其他相关文章！