Berücksichtigen CSS-Breiten Dezimalstellen: Prozent vs. Pixel?

Dezimalstellen in CSS-Breiten: berücksichtigt oder gerundet?

Beim Erstellen von CSS-Designs fragen Sie sich vielleicht, ob Dezimalstellen in CSS-Breiten berücksichtigt werden oder gerundet. Ob der Browser die Dezimalstellen berücksichtigt oder ignoriert, hängt davon ab, ob es sich um Prozent- oder Pixelwerte handelt.

Prozentbreiten

Bei Prozentbreiten handelt es sich um die Dezimalstellen voll respektiert. Eine Breite von 49,5 % nimmt 49,5 % des verfügbaren Platzes ein. Zum Beispiel:

.percentage {
  width: 49.5%;
}

Pixelbreiten

Im Gegensatz dazu werden Dezimalstellen für Pixelbreiten nicht berücksichtigt. Sie werden immer auf die nächste ganze Zahl gerundet. Aus einer Breite von 122,5 Pixel würden 123 Pixel werden. Zum Beispiel:

.pixel {
  width: 122.5px;
}

Um den Unterschied zu veranschaulichen, betrachten Sie das folgende Beispiel:

#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>

Hier beträgt der erste Block 50 % des verfügbaren Platzes. Der zweite Block umfasst 50,5 % der verfügbaren Fläche. Da jedoch Dezimalstellen bei der Pixelbreite nicht berücksichtigt werden, wird auf 51 Pixel gerundet. Der dritte Block nimmt 51 % des verfügbaren Platzes ein, was zu 102 Pixeln wird.

Das obige ist der detaillierte Inhalt vonBerücksichtigen CSS-Breiten Dezimalstellen: Prozent vs. Pixel?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!