Tampilan Ke Ukuran Kotak CSS3

Artikel ini adalah bagian dari kami "Seri Tutorial HTML5 / CSS3" - didedikasikan untuk membantu Anda menjadi desainer dan / atau pengembang yang lebih baik. Klik disini untuk melihat lebih banyak artikel dari seri yang sama.

Belum lama berselang, saat kita membuat kotak di halaman web, katakanlah dengan a div, kami tentukan 100px untuk lebar dan tinggi, diikuti oleh lapisan untuk 10px dan perbatasan sekitar 10px demikian juga.

 div width: 100px; tinggi: 100px; padding: 10px; perbatasan: 10px solid #eaeaea;

Browser akan memperluas ukuran kotak menjadi 140px, di mana jumlah ini 140px dari total lebar / tinggi terdiri dari penambahan lapisan dan perbatasan sebagai berikut; 100px [lebar / tinggi] + (2 x 10px [padding]) + (2 x 10px [batas]).

Namun, kadang-kadang hasil ini tidak seperti yang kita harapkan. Terkadang, kita membutuhkan kotak untuk selalu seperti itu 100px terlepas dari padding atau batas ditambahkan.

Untuk mengatasi masalah berulang seperti saat membuat tata letak halaman web, kita dapat menggunakan CSS3 ukuran kotak properti untuk mengontrol bagaimana Model kotak CSS harus bekerja di browser.

Menggunakan ukuran kotak

Itu ukuran kotak properti memiliki dua opsi nilai, pertama kotak konten; yang merupakan nilai default, saat menggunakan nilai ini model kotak akan berperilaku seperti yang telah kami jelaskan di atas.

Dan yang kedua adalah kotak perbatasan, di mana ukuran kotak akan dihitung dengan mengurangi ukuran konten yang ditentukan dengan padding dan pembatas ditambahkan.

 div width: 100px; tinggi: 100px; padding: 10px; perbatasan: 10px solid #eaeaea; ukuran kotak: kotak batas; -moz-box-sizing: border-box; / * Firefox 1-3 * / -webkit-box-sizing: border-box; / * Safari * /

Misalnya, ketika kami memiliki kotak seperti yang kami jelaskan di atas (100px persegi dengan 10 piksel untuk bantalan dan batas), ukuran konten akan berkurang menjadi 60px, dan ukuran total kotak tetap 100px, di mana persamaan pengurangan dapat dijelaskan sebagai berikut; 100px [lebar / tinggi] - ((2 x 10px [padding]) + (2 x 10px [batas])).

Demo
Sumber Unduhan

Dukungan Browser

Itu ukuran kotak properti adalah didukung di semua browser; Firefox 3.6+, Safari 3, Opera 8.5+ dan Internet Explorer 8 dan yang lebih tinggi.

Jadi, jika Anda tahu bahwa sebagian besar pengunjung Anda tidak akan menggunakan versi Internet Explorer di bawah 8, Anda dapat menggunakan rekomendasi yang bermanfaat ini (terima kasih kepada Paul Irish).

 * ukuran kotak: kotak batas; -moz-box-sizing: border-box; / * Firefox 1-3 * / -webkit-box-sizing: border-box; / * Safari * /

Cuplikan di atas akan menerapkan ukuran kotak properti ke semua elemen di halaman web Anda.

Contoh

Di bagian ini, kami akan menunjukkan kepada Anda contoh nyata tentang bagaimana kami dapat memanfaatkan ini ukuran kotak milik. Kami akan membuat navigasi sederhana, berdasarkan markup HTML di bawah ini, dengan lima menu tautan di dalamnya.

  Menu 1
 Menu 2
 Menu 3
 Menu 4
 Menu 5

Kemudian, kami akan menambahkan beberapa gaya dekoratif; seperti, atur navigasi perbaiki lebar untuk 500px dan lebar tautan untuk masing-masing 100px, kemudian sebaris item daftar, dan berikan latar belakang yang berbeda untuk setiap menu tautan, sehingga Anda dapat melihat perbedaan di antara mereka.

 nav width: 500px; margin: 50px otomatis 0; tinggi: 50px;  nav ul padding: 0; margin: 0;  nav li float: left;  nav a display: inline-block; lebar: 100px; tinggi: 100%; warna latar: #ccc; warna: # 555; teks-dekorasi: tidak ada; font-family: Arial, sans-serif; ukuran font: 12pt; garis-tinggi: 300%; perataan teks: tengah;  nav a display: inline-block; lebar: 100px; tinggi: 100%; warna: # 555; teks-dekorasi: tidak ada; font-family: Arial, sans-serif;  nav li: nth-child (1) a background-color: # E9E9E9; border-left: 0;  nav li: nth-child (2) a background-color: # E4E4E4;  nav li: nth-child (3) a background-color: #DFDFDF;  nav li: nth-child (4) a background-color: # D9D9D9;  nav li: nth-child (5) a background-color: # D4D4D4; border-right: 0;

Pada titik ini, navigasi kami terlihat normal.

Namun, masalah akan muncul ketika kita menambahkan batas kiri atau kanan ke menu tautan.

 nav a border-left: 1px solid #aaa; border-right: 1px solid # f3f3f3;

Menu akan meluap ke bawah, karena lebar tautan tidak lagi 100px. Sekarang 102px, menyebabkan lebar total navigasi menjadi 10px lebih lama dari yang kami tentukan di atas (500px).

Untuk mengatasi masalah ini, kita perlu menerapkan ukuran kotak properti, sebagai berikut:

 nav a border-left: 1px solid #aaa; border-right: 1px solid # f3f3f3; ukuran kotak: kotak batas; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;

Demo
Sumber Unduhan

Bacaan lebih lanjut

Dan akhirnya, jika Anda adalah tipe petualang, dan ingin menggali lebih dalam tentang subjek ini, kami telah mengumpulkan beberapa referensi yang dipilih untuk Anda:

Memahami Model Kotak CSS - Tech Republic
Bug ukuran kotak di Firefox - BugZilla
Kotak-ukuran FTW - Paul Irish