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>

此處，第一個區塊是可用空間的 50%。第二個區塊佔可用空間的 50.5%。但由於像素寬度不考慮小數位，因此四捨五​​入為 51px。第三塊是可用空間的 51%，即 102px。

以上是CSS 寬度是否尊重小數位：百分比與像素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！