Properti ukuran CSS mengacu pada properti lebar dan tinggi elemen. Meskipun sangat sederhana, ini adalah keterampilan yang harus dikuasai. CSS menyediakan beberapa atribut seperti lebar, tinggi, lebar maksimal, lebar minimum, tinggi maksimal, dan tinggi minimum untuk mengatur lebar dan tinggi elemen. Mari kita perkenalkan secara singkat di bawah.
1.tinggi
(1) Tetapkan tinggi elemen: atribut tinggi
Tinggi: Properti menentukan tinggi suatu elemen.
① Cakupan dan objek penerapan: Area konten default
Objek yang berlaku: semua elemen
elemen inline yang tidak dapat diganti, kolom tabel, grup kolom
Cakupan aplikasi: Secara default, atribut ini menentukan ketinggian area konten.
② Ubah cakupan aplikasi:
Jika ukuran kotak diatur ke border-box, properti ini menentukan tinggi area perbatasan.
③ Tidak berlaku
Elemen sebaris yang tidak diganti: Atribut ini diabaikan.
Elemen sebaris: tidak dapat mengatur ketinggian.
④ Penggantian nilai atribut
Properti min-height dan max-height mengesampingkan ketinggian.
(2) Tata bahasa tingkat tinggi
tinggi: otomatis|panjang|%|mewarisi;
Berisi nilai atribut eksperimental: [ <length> |. <persentase> ] && [ border-box |. content-box ]? tersedia |
/*Nilai kata kunciKeywordvalue*/height:auto;/*Nilai panjang<panjang>nilai*/height:120px;height:10em;/*Nilai persentase<percentage>nilai*/height:75%;/*Nilai kata kunci globalNilaiGlobal*/ tinggi:mewarisi;tinggi:awal;tinggi:tidak disetel;
2.lebar
(1) Atur lebar elemen: atribut lebar
① Area yang berlaku
Area Konten: Secara default, ini mengatur lebar area konten.
Tidak termasuk: Anda dapat menambahkan padding, batas, dan margin di luar area konten.
Ubah area yang berlaku: Namun jika ukuran kotak diatur ke kotak perbatasan, ini akan menentukan lebar area perbatasan.
② Elemen yang berlaku
Semua elemen kecuali elemen berikut
Elemen yang tidak dapat diterapkan: elemen sebaris, baris tabel, dan grup baris yang tidak dapat diganti
Elemen sebaris yang tidak diganti akan mengabaikan atribut ini.
③ Penutup
Properti min-width dan max-width mungkin menggantikan lebar.
(2) Sintaks lebar
lebar: otomatis |.panjang|.%|.
Berisi nilai atribut eksperimental: [ <length> |. <persentase> ] && [ border-box |. content-box ]? tersedia |.
/*Nilai panjang<panjang>nilai*/lebar:300px;lebar:25em;/*Nilai persentase<persentase>nilai*/lebar:75%;/*Nilai kata kunci Nilai kata kunci*/lebar:25emborder-box;lebar:75 % kotak konten ;width:max-content;width:min-content;width:available;width:fit-content;width:auto;/*Nilai globalNilai Global*/width:inherit;width:initial;width:unset;
3. lebar maksimal dan tinggi maksimal
Atribut max-width dan max-height digunakan untuk mengatur lebar maksimum dan tinggi maksimum masing-masing area konten elemen. Ketika properti max-width dan max-height ditentukan, nilai sebenarnya dari properti lebar dan tinggi akan kurang dari atau sama dengan nilai properti max-width dan max-height, terlepas dari nilai aktualnya. nilai properti lebar atau tinggi. Nilai opsional untuk properti max-width dan max-height adalah sebagai berikut:
Ambil contoh atribut max-width: (karakteristik atribut max-height serupa)
(1) Apabila nilai atribut max-width lebih kecil dari atribut width, maka nilai atribut width akan didefinisikan ulang menjadi nilai yang sama dengan atribut max-width;
(2) Jika nilai atribut max-width lebih besar dari width, maka atribut max-width akan diabaikan;
(3) Jika nilai atribut max-width lebih kecil dari min-width, maka atribut max-width akan diabaikan.
4. lebar minimum dan tinggi minimum
Atribut min-width dan min-height digunakan untuk mengatur lebar minimum dan tinggi minimum area konten elemen. Ketika atribut min-width dan min-height ditentukan, terlepas dari nilai sebenarnya dari atribut lebar atau tinggi. atribut lebar dan tinggi Nilai sebenarnya akan lebih besar atau sama dengan nilai properti min-width dan min-height. Nilai opsional untuk properti min-width dan min-height adalah sebagai berikut:
Ambil contoh atribut min-width: (atribut min-height memiliki karakteristik serupa)
(1) Jika nilai atribut min-width lebih kecil dari lebar, maka atribut min-width akan diabaikan;
(2) Bila nilai atribut min-width lebih besar dari lebar, maka nilai atribut min-width akan didefinisikan ulang ke nilai yang sama dengan atribut min-width;
(3) Bila nilai atribut min-width lebih besar dari max-width, maka atribut max-width akan diabaikan.