Berapakah jenis model kotak html yang ada?

Terdapat dua jenis model kotak HTML: 1. Model kotak W3C, yang padding dan jidarnya tidak disertakan dalam lebar dan tinggi yang ditentukan 2. Model kotak IE, yang padding dan sempadannya disertakan Dalam yang ditentukan lebar dan tinggi.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi HTML5, komputer Dell G3.

1. Pengenalan

• Dalam penghasilan laman web, halaman yang kompleks dibahagikan kepada blok kecil satu demi satu.
• Melalui bahagian ini, proses pembangunan laman web dipecahkan kepada beberapa bahagian dan kompleks dipermudahkan, bagi mencapai tujuan mengurangkan kerja pembangunan dan mengurangkan tekanan penyelenggaraan.
• Dalam halaman web, fikirkan blok yang dibahagikan ini sebagai kotak. Hanya dengan memahami model kotak kita boleh menaip dengan lebih baik dan menulis antara muka tapak web yang lebih baik

---

2. Susun atur kotak

Fikirkan elemen dalam HTML sebagai segi empat tepat A kotak (bekas yang menyimpan kandungan), setiap bekas terdiri daripada kandungan elemen, padding, sempadan dan margin.

ps: Nilai margin lalai penyemak imbas ialah 8px!

---

3. Dua model kotak

• model kotak w3c: padding dan sempadan tidak disertakan dalam lebar dan ketinggian yang ditetapkan. Lebar sebenar objek adalah sama dengan jumlah nilai lebar yang ditetapkan, sempadan dan padding, iaitu (Lebar elemen = padding sempadan lebar, sifat ini berkelakuan seperti model kotak dalam mod standard).

• Model kotak IE: padding dan jidar disertakan dalam lebar dan tinggi yang ditentukan. Lebar sebenar objek adalah sama dengan nilai lebar yang ditetapkan Walaupun sempadan dan padding ditakrifkan, lebar sebenar objek tidak akan diubah, iaitu (Lebar elemen = lebar).

ps: Secara amnya, model kotak w3c standard digunakan Jika anda perlu menggunakan model kotak IE, anda boleh menggunakan saiz kotak atribut untuk mengubah suainya.

• model kotak w3c

.test1{
	box-sizing:content-box;
	width:200px;
	padding:10px;
	border:15px solid #eee;
}

• Model kotak IE

.test1{
	box-sizing:border-box;
	width:200px;
	padding:10px;
	border:15px solid #eee;
}

IV >Perbezaan antara model kotak W3C dan model kotak IE ialah takrifan lebar dan tinggi yang berbeza.

W3C percaya bahawa lebar dan tinggi ialah lebar kawasan kandungan (termasuk hanya kandungan khusus yang dipaparkan oleh nod)

IE percaya bahawa lebar dan tinggi adalah kesan sebenar daripada kesan paparan (termasuk keseluruhan kandungan nod)

Cadangan berkaitan: "

tutorial video html

"

Atas ialah kandungan terperinci Berapakah jenis model kotak html yang ada?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!