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% です。 2 番目のブロックは、使用可能なスペースの 50.5% です。ただし、ピクセル幅には小数点以下の桁が考慮されないため、51px に丸められます。 3 番目のブロックは利用可能なスペースの 51% で、102 ピクセルになります。

以上がCSS の幅は小数点以下の桁を考慮しますか? パーセンテージとピクセルの比較?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。