Apakah model kotak css?

Model kotak CSS termasuk model kotak standard dan model kotak IE. Pengenalan terperinci: 1. Model kotak standard ialah model kotak lalai CSS Ia mentakrifkan lebar dan tinggi elemen sebagai lebar dan tinggi kawasan kandungan Dalam model kotak standard, jumlah lebar dan jumlah ketinggian elemen adalah sama dengan lebar kawasan kandungan dan tinggi ditambah dengan lebar padding, sempadan dan jidar 2. Model kotak IE ialah model kotak yang digunakan oleh pelayar Internet Explorer, lebar dan tinggi daripada elemen ditakrifkan sebagai lebar dan ketinggian kawasan kandungan Ditambah dan lebar sempadan.

Model kotak CSS bermakna dalam reka letak halaman web, elemen itu dianggap sebagai kotak segi empat tepat Kotak ini mengandungi kandungan, padding, jidar dan jidar. Terdapat dua jenis model kotak CSS: model kotak standard dan model kotak IE.

1. Model kotak standard:

Model kotak standard ialah model kotak lalai CSS, yang mentakrifkan lebar dan tinggi elemen sebagai lebar dan tinggi kawasan kandungan. Dalam model kotak standard, jumlah lebar dan jumlah ketinggian elemen adalah sama dengan lebar dan tinggi kawasan kandungan ditambah lebar padding, jidar dan jidar.

2. Model kotak IE:

Model kotak IE ialah model kotak yang digunakan oleh pelayar Internet Explorer. Dalam model kotak IE, lebar dan tinggi elemen ditakrifkan sebagai lebar dan tinggi kawasan kandungan ditambah lebar padding dan sempadan. Dalam model kotak IE, jumlah lebar dan jumlah ketinggian elemen adalah sama dengan lebar dan tinggi kawasan kandungan, tidak termasuk lebar jidar.

Untuk lebih memahami perbezaan antara dua model kotak ini, kita boleh menggambarkannya dengan contoh berikut:

Kod HTML:

html
<div id="box">Hello World</div>
```
CSS代码：
```css
#box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 1px solid black;
  margin: 10px;
}

Dalam model kotak standard, jumlah lebar dan jumlah ketinggian elemen adalah sama dengan lebar daripada kawasan kandungan dan ketinggian serta lebar pelapik, jidar dan jidar. Jadi, jumlah lebar elemen ini ialah 200px + 2 * 20px + 2 * 1px + 2 * 10px = 282px, dan jumlah ketinggian ialah 100px + 2 * 20px + 2 * 1px + 2 * 10px = 172px.

Dalam model kotak IE, jumlah lebar dan jumlah ketinggian elemen adalah sama dengan lebar dan tinggi kawasan kandungan ditambah lebar padding dan sempadan. Jadi, jumlah lebar elemen ini ialah 200px + 2 * 20px + 2 * 1px = 242px, dan jumlah ketinggian ialah 100px + 2 * 20px + 2 * 1px = 142px.

Dapat dilihat bahawa terdapat perbezaan antara model kotak standard dan model kotak IE apabila mengira jumlah lebar dan jumlah ketinggian elemen.

Dalam pembangunan sebenar, kita boleh mengawal model kotak mana yang digunakan oleh elemen melalui sifat bersaiz kotak CSS. Sifat bersaiz kotak mempunyai dua nilai: kotak kandungan dan kotak sempadan. kotak kandungan ialah model kotak standard, dan kotak sempadan ialah model kotak IE. Nilai lalai ialah kotak kandungan.

Sebagai contoh, jika kita ingin menggunakan model kotak IE, kita boleh menetapkan atribut saiz kotak kepada kotak sempadan:

css
#box {
  box-sizing: border-box;
}

Ringkasan:

Terdapat dua jenis model kotak dalam CSS: model kotak standard dan IE model kotak. Model kotak standard mentakrifkan lebar dan tinggi elemen sebagai lebar dan tinggi kawasan kandungan, manakala model kotak IE mentakrifkan lebar dan tinggi elemen sebagai lebar dan tinggi kawasan kandungan ditambah lebar padding. dan sempadan. Dalam pembangunan sebenar, kita boleh mengawal model kotak mana yang digunakan oleh elemen melalui sifat bersaiz kotak CSS.

Atas ialah kandungan terperinci Apakah model kotak css?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!