Rumah > hujung hadapan web > tutorial css > Adakah Lebar CSS Menghormati Tempat Perpuluhan: Peratusan lwn Piksel?

Adakah Lebar CSS Menghormati Tempat Perpuluhan: Peratusan lwn Piksel?

Susan Sarandon
Lepaskan: 2024-12-24 05:07:17
asal
864 orang telah melayarinya

Do CSS Widths Respect Decimal Places: Percentage vs. Pixel?

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%;
}
Salin selepas log masuk

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;
}
Salin selepas log masuk

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;
}
Salin selepas log masuk
<div>
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan