CSS3 Box Ukuran
Properti CSS3 box-sizing memungkinkan kita untuk memasukkan padding dan perbatasan di lebar elemen dan tinggi.
Tanpa CSS3 box-sizing Properti
Secara default, lebar dan tinggi dari suatu elemen dihitung seperti ini:
width + padding + border = lebar aktual elemen
height + padding + border = tinggi sebenarnya elemen
Ini berarti: Bila Anda mengatur lebar / tinggi elemen, elemen sering muncul lebih besar dari yang Anda telah menetapkan (karena perbatasan elemen dan padding ditambahkan ke ditentukan lebar / tinggi elemen).
Ilustrasi berikut menunjukkan dua <div> elemen dengan lebar tertentu yang sama dan tinggi:
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
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, properti box-sizing memecahkan masalah ini.
Dengan CSS3 box-sizing Properti
Properti CSS3 box-sizing memungkinkan kita untuk memasukkan padding dan perbatasan di lebar total elemen dan tinggi.
Jika Anda mengatur kotak-sizing: border-box; pada padding elemen dan perbatasan termasuk dalam lebar dan tinggi:
.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;
}
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 sudah menggunakan box-sizing: border-box; bagi banyak elemen form (tetapi tidak semua - input dan textareas terlihat berbeda di width: 100%;).
Menerapkan ini untuk semua elemen aman dan bijaksana:
* {
box-sizing: border-box;
}
0 komentar:
Posting Komentar