CSS3 Box Ukuran
CSS3 box-sizing properti memungkinkan kita untuk memasukkan padding dan perbatasan di lebar total elemen dan tinggi.
Dukungan Browser
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
Nomor diikuti oleh -webkit- atau -moz- menentukan versi pertama yang bekerja dengan awalan.
| Milik | |||||
|---|---|---|---|---|---|
| box-sizing | 10.0 4.0 -webkit- |
8.0 | 29.0 2.0 -moz- |
5.1 3.1 -webkit- |
9.5 |
Tanpa CSS3 box-sizing Properti
Secara default, lebar dan tinggi dari suatu elemen dihitung seperti ini:
lebar + bantalan + border = sebenarnya lebar elemen
tinggi + bantalan + border = tinggi sebenarnya dari suatu elemen
Ini berarti: Ketika Anda mengatur lebar / tinggi dari elemen, elemen sering muncul lebih besar dari yang Anda telah menetapkan (karena perbatasan elemen dan padding ditambahkan ke elemen yang ditentukan lebar / tinggi).
Ilustrasi berikut menunjukkan dua <div> elemen dengan lebar tertentu yang sama dan tinggi:
Kedua <div> elemen di atas end dengan ukuran yang berbeda dalam hasil (karena div2 telah padding khusus):
Contoh
.div1 {
width: 300px;
height:
100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
} Cobalah sendiri " Jadi, untuk waktu yang lama pengembang web telah ditentukan nilai lebar yang lebih kecil dari yang mereka inginkan, karena mereka harus mengurangi keluar padding dan perbatasan.
Dengan CSS3, yang box-sizing properti memecahkan masalah ini.
Dengan CSS3 box-sizing Properti
CSS3 box-sizing properti memungkinkan kita untuk memasukkan padding dan perbatasan di lebar total elemen dan tinggi.
Jika Anda mengatur box-sizing: border-box; pada bantalan elemen dan perbatasan termasuk dalam lebar dan tinggi:
Berikut adalah contoh yang sama seperti di atas, dengan box-sizing: border-box; ditambahkan ke kedua <div> elemen:
Contoh
.div1 {
width: 300px;
height:
100px;
border: 1px solid blue;
box-sizing: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
} Cobalah sendiri " Karena hasil dari menggunakan box-sizing: border-box; jauh lebih baik, banyak pengembang ingin semua elemen pada halaman mereka untuk bekerja dengan cara ini.
Kode di bawah memastikan bahwa semua elemen yang berukuran dengan cara yang lebih intuitif ini. Banyak browser yang sudah menggunakan box-sizing: border-box; bagi banyak elemen bentuk (tetapi tidak semua - yang mengapa input dan area teks terlihat berbeda di width: 100%;).
Menerapkan ini untuk semua elemen aman dan bijaksana: