Adakah Lebar CSS Menghormati Tempat Perpuluhan: Peratusan lwn Piksel?

Tempat Perpuluhan dalam Lebar CSS: Dihormati atau Bulat?

Apabila membuat reka bentuk CSS, anda mungkin tertanya-tanya sama ada tempat perpuluhan dalam lebar CSS dihormati atau bulat. Sama ada penyemak imbas menghormati atau mengabaikan tempat perpuluhan bergantung pada sama ada anda berurusan dengan nilai peratusan atau piksel.

Lebar Peratusan

Untuk lebar peratusan, tempat perpuluhan ialah dihormati sepenuhnya. Lebar 49.5% akan menduduki 49.5% daripada ruang yang ada. Contohnya:

.percentage {
  width: 49.5%;
}

Lebar Piksel

Sebaliknya, tempat perpuluhan untuk lebar piksel tidak dihormati. Mereka sentiasa dibundarkan kepada nombor bulat terdekat. Lebar 122.5px akan menjadi 123px. Contohnya:

.pixel {
  width: 122.5px;
}

Untuk menggambarkan perbezaan, pertimbangkan contoh berikut:

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

Di sini, blok pertama ialah 50% daripada ruang yang tersedia. Blok kedua ialah 50.5% daripada ruang yang ada. Tetapi oleh kerana tempat perpuluhan tidak dihormati untuk lebar piksel, ia dibundarkan kepada 51px. Blok ketiga ialah 51% daripada ruang yang tersedia, yang menjadi 102px.

Atas ialah kandungan terperinci Adakah Lebar CSS Menghormati Tempat Perpuluhan: Peratusan lwn Piksel?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!