A Look Into Boxing CSS3

Artikel ini adalah sebahagian daripada kami "Siri Tutorial HTML5 / CSS3" - khusus untuk membantu menjadikan anda pereka dan / atau pemaju yang lebih baik. Tekan di sini untuk melihat lebih banyak artikel dari siri yang sama.

Tidak lama dahulu, apabila kita mencipta kotak dalam laman web, katakan dengan a div, kami nyatakan 100px untuk kedua-dua lebar dan ketinggian, diikuti oleh padding untuk 10px dan sempadan 10px juga.

 div width: 100px; ketinggian: 100px; padding: 10px; sempadan: 10px pepejal #eaeaea;

Pelayar akan memperluas saiz kotak ke 140px, di mana jumlah ini 140px dari jumlah lebar / ketinggian terdiri dari penambahan padding dan juga sempadan seperti berikut; 100px [lebar / ketinggian] + (2 x 10px [padding]) + (2 x 10px [sempadan]).

Walau bagaimanapun, kadang-kadang keputusan ini bukan apa yang kita harapkan. Kadang-kadang, kita perlu kotak untuk sentiasa ada 100px tidak kira padding atau sempadan yang ditambah.

Untuk mengatasi masalah berulang ketika membuat susun atur halaman web, kita boleh menggunakan CSS3 kotak ukuran harta untuk mengawal bagaimana Model kotak CSS harus bekerja di pelayar.

Menggunakan box-sizing

The kotak ukuran harta mempunyai dua pilihan nilai, pertama kotak kandungan; yang merupakan nilai lalai, apabila menggunakan nilai ini, model kotak akan berkelakuan seperti yang telah dijelaskan di atas.

Dan yang kedua ialah kotak sempadan, di mana saiz kotak akan dikira dengan menggubal saiz kandungan tertentu dengan padding dan sempadan ditambah.

 div width: 100px; ketinggian: 100px; padding: 10px; sempadan: 10px pepejal #eaeaea; box-sizing: border-box; -moz-box-size: border-box; / * Firefox 1-3 * / -webkit-box-sizing: border-box; / * Safari * /

Sebagai contoh, apabila kita mempunyai kotak seperti apa yang telah kami terangkan di atas (100px persegi dengan 10 piksel untuk padding dan sempadan), saiz kandungan akan berkurang kepada 60px, dan jumlah keseluruhan kotak kekal 100px, di mana persamaan pengurangan boleh dihuraikan seperti berikut; 100px [lebar / ketinggian] - ((2 x 10px [padding]) + (2 x 10px [sempadan])).

Demo
Muat turun Sumber

Sokongan Penyemak Imbas

The kotak ukuran harta adalah disokong dalam semua pelayar; Firefox 3.6+, Safari 3, Opera 8.5+ dan Internet Explorer 8 dan ke atas.

Jadi, jika anda tahu bahawa kebanyakan pelawat anda tidak akan menggunakan versi Internet Explorer di bawah 8, anda boleh menggunakan cadangan berguna ini (terima kasih kepada Paul Irish).

 * box-sizing: border-box; -moz-box-size: border-box; / * Firefox 1-3 * / -webkit-box-sizing: border-box; / * Safari * /

Coretan di atas akan memohon kotak ukuran harta kepada semua elemen pada halaman web anda.

Contoh

Dalam bahagian ini, kami akan menunjukkan kepada anda contoh kehidupan sebenar tentang bagaimana kami boleh menggunakannya kotak ukuran harta. Kami akan membuat navigasi mudah, berdasarkan markup HTML di bawah, dengan lima menu pautan di dalamnya.

  Menu 1
 Menu 2
 Menu 3
 Menu 4
 Menu 5

Kemudian, kami akan menambah beberapa gaya hiasan; seperti, tetapkan navigasi menetapkan lebar untuk 500px dan lebar pautan untuk 100px setiap satu, kemudian menyusun item senarai, dan memberi latar belakang yang berbeza untuk setiap menu pautan, supaya anda dapat melihat perbezaan di antara mereka.

 nav width: 500px; margin: 50px auto 0; ketinggian: 50px;  nav ul padding: 0; margin: 0;  nav li float: left;  nav a display: block-inline; lebar: 100px; ketinggian: 100%; warna latar belakang: #ccc; warna: # 555; teks-hiasan: tiada; font-family: Arial, sans-serif; saiz fon: 12pt; garis ketinggian: 300%; teks-align: center;  nav a display: block-inline; lebar: 100px; ketinggian: 100%; warna: # 555; teks-hiasan: tiada; 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; sempadan kanan: 0;

Pada ketika ini, navigasi kami kelihatan normal.

Walau bagaimanapun, masalah akan muncul apabila kita menambah sempadan kiri atau kanan ke menu pautan.

 nav a border-left: 1px solid #aaa; sempadan kanan: 1px pepejal # f3f3f3;

Menu akan melimpah ke bawah, kerana lebar pautan tidak lagi 100px. Sekarang 102px, menyebabkan lebar keseluruhan pelayaran menjadi 10px lebih lama maka kami telah menyatakan di atas (500px).

Untuk mengatasi masalah ini, kami perlu memohon kotak ukuran harta, seperti berikut:

 nav a border-left: 1px solid #aaa; sempadan kanan: 1px pepejal # f3f3f3; box-sizing: border-box; -moz-box-size: border-box; -webkit-box-size: border-box;

Demo
Muat turun Sumber

Bacaan lanjut

Dan akhirnya, jika anda adalah jenis cabaran, dan ingin menggali lebih mendalam ke dalam subjek ini, kami telah mengumpulkan beberapa rujukan yang dipilih untuk anda:

Memahami Model Kotak CSS - Tech Republic
Bug bersaiz kotak di Firefox - BugZilla
Box-sizing FTW - Paul Irish