Analisis kotak (mod kotak) dalam CSS_CSS/HTML

Artikel ini menggunakan ilustrasi kotak untuk menganalisis kotak (mod kotak) dalam CSS, mewujudkan model yang jelas untuk pembaca yang mempelajari CSS.

Corak kotak yang ditakrifkan oleh W3C adalah seperti berikut:

lebar dan tinggi menentukan lebar dan tinggi bahagian Kandungan, dan lebar jidar sempadan pelapik ditambah ke bahagian luar secara bergilir-gilir. Latar belakang akan mengisi bahagian padding dan kandungan.
Walau bagaimanapun, disebabkan isu reka bentuk penyemak imbas, kesan paparan pelayar yang berbeza akan menjadi agak berbeza.
Masalah menggandakan jidar kiri dan kanan
Apabila kotak terapung, jidar kiri dan kanan kotak dalam IE6 akan berganda
Jingar kiri bahagian dalam kiri jelas lebih besar daripada 5px.
Pada masa ini, tentukan atribut paparan dalaman sebagai sebaris.
Masalah dengan pengiraan ketinggian automatik kotak luar
Menurut definisi W3C, kotak luar tanpa atribut apungan tidak akan mengira ketinggian secara automatik Untuk mengira ketinggian, jelas: kedua-duanya mesti ditambah pada kotak terakhir lapisan dalam.
Opera, netscape, mozilla, dll. tidak akan mengira ketinggian kotak luar, tetapi Microsoft ie6 akan mengira ketinggian kotak luar secara automatik.

Kod di atas mempunyai latar belakang hitam dalam IE, tetapi jidar atas dan bawah tidak dikira dengan betul Selepas menambah div yang mengandungi atribut clear:both di bawah inner2, margin boleh dikira dengan betul. Tetapi masih tiada latar belakang hitam dalam Firefox Penyelesaian biasa adalah untuk menentukan ketinggian clear:kedua-dua div, atau memasukkan ruang lebar penuh, jadi ketinggian tambahan mesti ditambah. Penyelesaian yang lebih baik dalam talian ialah menambah atribut limpahan pada div luar dan menggunakan clear:kedua-duanya pada masa yang sama, supaya tiada ketinggian tambahan ditambahkan.

Oleh itu, atribut limpahan mesti ditakrifkan dalam lapisan luar css, dan atribut jelas mesti ditambah pada lapisan dalam pada penghujungnya.
Masalah pemusatan
Anda perlu menentukan lebar elemen dan menentukan jidar mendatar Jika reka letak anda terkandung dalam lapisan (bekas), seperti ini:
Anda boleh menentukannya seperti ini untuk memusatkannya. secara mendatar:
#wrap {
lebar:760px; /* Ubah suai kepada lebar lapisan anda*/
margin:0 auto;

Tetapi IE5/Win tidak dapat memaparkan definisi ini dengan betul Kami menggunakan helah yang sangat berguna untuk menyelesaikannya: gunakan atribut penjajaran teks di lapisan luar. Seperti ini:

#luar {
text-align:center;
}
#wrap {
width:760px; :0 auto;
text-align:left;

Peraturan text-align:center; #outer yang pertama mentakrifkan bahawa semua elemen #outer dalam IE5/Win dipusatkan (pelayar lain hanya memusatkan teks), dan text-align:left kedua ialah; Gerakkan teks dalam #warp ke kiri.
Oleh itu, dalam CSS dengan elemen berpusat, CSS luar harus mentakrifkan atribut text-align:center, pemusatan dalam hendaklah ditakrifkan dengan margin:x auto x auto, dan text-align harus ditakrifkan semula.