1. Satuan panjang dalam CSS
Dalam CSS, banyak nilai yang menggunakan panjang sebagai nilainya. Atribut model kotak adalah beberapa atribut nilai yang jelas: lebar, tinggi, margin, padding, dan batas. Selain itu , ada banyak atribut CSS yang nilainya juga merupakan nilai panjang, seperti offset offset, ukuran box-shadow atau ukuran font, spasi, dll. Ada banyak satuan panjang dalam CSS. Mari kita bahas di bawah ini tentang satuan panjang dan kegunaannya.
2. Pengenalan singkat (berapa satuan panjang :)
Ada dua jenis satuan panjang di CSS: panjang absolut dan panjang relatif .
Panjang absolut: px, in, cm, mm, pt, pc;
Panjang relatif: em, rem, ex, vh, vw, vmin, vmax, %, fr.
3. Pengenalan rinci
1. Satuan panjang mutlak
Satuan panjang absolut mewakili ukuran fisik sebenarnya. Ukurannya tetap dan tidak akan berubah karena perubahan ukuran elemen lainnya. Tabel berikut mencantumkan satuan panjang absolut yang didukung di CSS.
px: mewakili piksel. Piksel relatif terhadap resolusi layar. Halaman ditampilkan dalam piksel yang tepat dan tidak akan berubah karena perubahan ukuran elemen lainnya. Piksel masih merupakan satuan pengukuran yang paling umum, misalnya: untuk windows Resolusi yang digunakan pengguna Mac adalah 96 piksel/inci, sedangkan resolusi yang digunakan pengguna Mac umumnya 72 piksel/inci. , satuan dalam bahasa JavaScript umum adalah piksel yang digunakan.
div{lebar:200 piksel;}in: inci adalah file pengukuran fisik, tetapi di bidang CSS, inci hanya dipetakan langsung ke dalam piksel. (1 inci == 2,54cm == 96 piksel)
div{lebar:2 inci;}cm : Sentimeter adalah satuan pengukuran fisik yang familiar dan berguna. Itu juga dipetakan ke dalam piksel. (1cm == 37,8 piksel)
div{lebar:20cm;}mm: Milimeter adalah satuan pengukuran fisik dengan besaran kecil. (1mm == 0,1cm == 3,78 piksel )
div{lebar:200mm;}p t: Titik juga merupakan satuan fisik panjang. (1pt == 1/72 inci == 96/72 piksel)
div{lebar:20pt;}pc: Pica sama dengan poin, kecuali (1pc == 12pt).
div{lebar:20pt;}Contoh:
<!DOCTYPEhtml><html><head><title>Satuan panjang absolut</title><style>.box{width:4in;height:4.5cm;border:2mmsolidblack;font-size:16px;}.pt{font {ukuran font: 2pt;}.pc{font-size:3pc;}</style></head><body><divclass=box>Ini adalah font 16px<pclass=pt>Ini adalah font 2pt</p><pclass =pc>Ini adalah font 3pc</p></div></body></html>Hasil yang disajikan adalah sebagai berikut:
2. Satuan panjang relatif
Satuan panjang relatif berarti satuan ini tidak memiliki nilai tetap. Nilainya dipengaruhi oleh atribut elemen lainnya (seperti ukuran jendela browser dan ukuran elemen induk). tata letak. Berikut Tabel ini mencantumkan satuan panjang relatif yang didukung dalam CSS.
em: em adalah unit relatif, relatif terhadap ukuran font teks dalam objek saat ini. Jika ukuran font dalam baris saat ini belum disetel, maka itu relatif terhadap ukuran font default browser. Awalnya pengukuran typesetting didasarkan pada ukuran huruf kapital M font saat ini ketika font-family diubah, ukurannya tidak akan berubah, tetapi ketika font-size diubah, ukurannya akan berubah. em akan mewarisi ukuran font elemen induk. (Ada contoh em dan rem di bawah)
Tanpa aturan CSS apa pun: (1em == 16px == 0,17in == 12pt == 1pc == 4,2mm == 0,42cm)
div{lebar:40em;}re em: rem adalah unit relatif seperti em, tetapi tidak seperti em, rem selalu relatif terhadap elemen root (seperti: root{}), tidak seperti em, yang menggunakan metode kaskade untuk menghitung Ukuran. Satuan relatif ini lebih mudah digunakan.
div{lebar:40rem;}misal: Satuan panjang relatif, relatif terhadap tinggi karakter Ukuran font default. Berbeda dengan em, em tidak akan berubah ketika font-family diubah, namun unit ex akan berubah karena nilai unit dan font tersebut memiliki hubungan batasan khusus.
div{lebar:40ex;}ch: Konotasi ch mirip dengan tinggi ex relatif terhadap x, hanya saja ch didasarkan pada lebar karakter 0, bukan tinggi karakter x. 1ch adalah lebar angka 0. Ketika fontfamily berubah, ch juga akan berubah.
div{lebar:40ch;}vw: vw (lebar sudut pandang) adalah satuan lebar visual (lebar jendela). 1vw sama dengan satu persen dari lebar area visual. Satuan vw sangat mirip dengan persentase of vw berlaku untuk semua elemen. Hal yang sama, terlepas dari elemen induknya atau lebar elemen induknya, seperti unit rem selalu relatif terhadap elemen akar. (Ada contoh vh dan vw di bawah)
div{lebar:40vw;}vh: Satuan vh (tinggi viewport) dan vw (lebar viewport) adalah sama. Perbedaan vh relatif terhadap tinggi area visual (tinggi jendela).
div{lebar:40vh;}vmin: Nilai vmin adalah nilai yang lebih kecil di antara vw dan vh saat ini. Dalam contoh penggunaan tipe ukuran standar, dibandingkan dengan unit vw dan vh yang menentukan sendiri ukuran layar, vmin adalah metrik yang lebih berguna.
div{lebar:40vmin;}vmax: Nilai vmax adalah nilai terbesar antara vw dan vh.
div{lebar:40vmaks;}% : Persen, nilai panjang dalam persentase didasarkan pada nilai panjang elemen induk dengan atribut yang sama. Contoh: jika lebar suatu elemen adalah 450px dan lebar elemen turunannya disetel ke 50%, maka lebar elemen turunannya disetel ke 50%. elemen anak dirender Lebarnya 225px. (Jika tidak ada nilai spesifik yang ditetapkan untuk semua elemen induk, menyetel persentase tinggi akan menyebabkan nilai semua elemen menjadi 0).
div{lebar:40%;}fr: Satuan panjang yang digunakan dalam tata letak kisi. Dalam tata letak kisi, kita sering menggunakan fr untuk penghitungan.
Pernyataan berikut mendeklarasikan grid dengan tiga garis. Tinggi baris pertama adalah 30px, tinggi baris kedua juga 30px, dan tinggi baris ketiga adalah 60px.
baris-templat-kisi:30px1fr2fr;
Contoh:
<!DOCTYPEhtml><html><head><title>Satuan panjang relatif</title><style>.box{width:60vw;height:88vh;border:1exsolidblack;font-size:16px;}.info{font- ukuran:2em;}.ex>span{font-size:3ex;}.ch>span{fon t-size:4ch;}</style></head><body><divclass=box>Ini adalah font 16px<pclass=info>Ini adalah font 2em</p><pclass=ex>x:< span>Ini font 3ex</span></p><pclass=ch>0: <span>Ini font 4ch</span></p></div></body></ html>Ditampilkan di bawah ini:
3. Ringkasan satuan panjang:
(1) Pertama-tama kita perlu memahami satu hal, yaitu berapa sebenarnya resolusi layarnya? Kita tahu bahwa pada resolusi yang berbeda, ukuran pikselnya berbeda, jadi halaman web yang sama, dalam px Saat digunakan sebagai satuan panjang, ukuran yang ditampilkan berbeda pada resolusi berbeda. Pada resolusi rendah, pikselnya lebih besar dan detailnya kurang jelas meskipun halaman yang ditampilkan juga besar, namun buram.
(2) Faktanya, semua satuan, baik satuan relatif maupun absolut, (bila ditampilkan di layar) pada akhirnya diubah menjadi satuan px, jadi secara umum, saat membuat halaman web, satuan dasar Pilih px daripada pt, karena pt adalah juga dikonversi ke px untuk ditampilkan melalui DPI browser (misalnya DPI FireFox adalah 96, maka 9pt = 12px). Tidak hanya pt, cm, in, mm dan satuan lainnya juga diubah menjadi px, jadi absolut atau relatif akan berubah pada resolusi yang berbeda resolusi yang berbeda. Resolusi tetap tidak berubah pada 3cm.
(3) Menurut saya pt masih merupakan unit yang sangat berguna, terutama saat mencetak. Sekarang beberapa halaman web telah diimplementasikan untuk menampilkan satu halaman dan mencetak dengan cara lain. Saya ingin mencetak Gunakan pt Nah, karena untuk resolusi yang berbeda-beda, semua halaman yang dicetak memiliki ukuran yang sama. Ini ciri pertama dari satuan absolut, namun tetap harus diingat bahwa pada tampilan, satuan ini tidak mewakili panjang fisik sebenarnya, itu juga perlu disesuaikan dengan ukuran piksel sebenarnya (ini terkait dengan resolusi).
(4) Faktanya, kita dapat memahaminya seperti ini, menganggap px sebagai satuan absolut (satuan absolut pada tampilan), dan satuan lain didasarkan padanya, seperti em, yang merupakan tinggi relatif terhadap font teks saat ini ( Misalkan ukuran font teks saat ini adalah 12px, dan kita atur font baru menjadi 1.5em, maka ukuran font baru diubah menjadi 12 * 1.5 = 18px), yang perlu Anda ingat adalah em adalah tinggi relatif terhadap elemen induk. Misalkan kita menyetel font menjadi 12px di div pertama, 1,5em di level kedua, dan 1,5em di level ketiga. Tampilan fontnya adalah: level pertama 12px, level kedua 18px, level ketiga 18*1.5 = 27px.