model kotak

Terdapat corak reka bentuk asas dalam CSS yang dipanggil model kotak Model kotak mentakrifkan cara elemen dalam halaman Web dihuraikan. Setiap elemen dalam CSS ialah model kotak, termasuk elemen html dan teg badan. Model kotak terutamanya termasuk atribut seperti lebar, tinggi, jidar, latar belakang, padding dan jidar, dan hubungan hierarki antara mereka boleh mempengaruhi satu sama lain Mari kita lihat paparan 3D model kotak:

<🎜. >

Seperti yang dapat dilihat dari gambar, atribut padding dan atribut kandungan disusun dengan atribut imej latar belakang dan atribut warna latar belakang ini wujud. paksi (koordinat skrin menegak) Perhubungan lata berbilang. Walau bagaimanapun, atribut sempadan, atribut margin dan atribut padding harus mempunyai hubungan selari pada satah dan tidak boleh membentuk hubungan melata pada paksi Z.

bersaiz kotak:

Model kotak dalam CSS terbahagi kepada dua jenis, yang pertama ialah model standard w3c, dan satu lagi ialah model tradisional IE , mereka adalah serupa kerana ia adalah model untuk mengira saiz unsur Secara khusus, ia bukanlah hubungan pengiraan antara lebar, tinggi, padding dan sempadan unsur dan saiz sebenar unsur tersebut kaedah kedua-duanya tidak konsisten Pada prinsipnya, Model kotak dibahagikan dengan sangat halus Apa yang kita lihat di sini terutamanya model kotak luar dan model kotak dalam, seperti yang ditunjukkan dalam formula pengiraan berikut:

<🎜. >

Model kotak standard W3C

Pengiraan saiz kotak luar (saiz ruang elemen)

tinggi ruang elemen = ketinggian kandungan + jarak dalam + sempadan + jarak luar

lebar ruang elemen =Lebar kandungan + padding + jidar + jarak luar

Pengiraan saiz kotak dalam (saiz elemen)

tinggi elemen = tinggi kandungan + padding + sempadan (tinggi ialah ketinggian kandungan)

lebar elemen = lebar kandungan + padding + jidar (lebar ialah lebar kandungan)

IE model kotak bawah tradisional (di bawah IE6, tidak termasuk versi IE6 atau "IE5.5+ di bawah QuirksMode")

Pengiraan saiz kotak luar (saiz ruang elemen)

tinggi ruang elemen = ketinggian kandungan + jarak luar (ketinggian mengandungi elemen Lebar kandungan, sempadan, pelapik)

Lebar elemen = lebar kandungan + jarak luar (lebar termasuk lebar kandungan elemen, sempadan, pelapik)

Pengiraan saiz kotak dalam (saiz elemen )

tinggi elemen = tinggi kandungan (tinggi termasuk lebar kandungan elemen, jidar dan pelapik)

lebar elemen = lebar kandungan (lebar termasuk lebar kandungan elemen, jidar dan pelapik)


Atribut saiz kotak baru ditambahkan dalam CSS3, yang boleh mentakrifkan kaedah penghuraian saiz model kotak terlebih dahulu Peraturan sintaks adalah seperti berikut:

box-sizing: content-box | border-box | inherit

kotak kandungan

Nilai atribut	Penerangan nilai atribut
	Nilai lalai, yang membolehkan elemen mengekalkan model kotak standard W3C, iaitu, lebar dan tinggi (lebar/tinggi) elemen adalah sama dengan lebar sempadan elemen ( sempadan) tambah padding elemen (padding) Tambah lebar atau tinggi kandungan elemen (lebar/tinggi kandungan), iaitu, lebar/tinggi elemen = sempadan + padding + lebar / tinggi kandungan
border-box	Takrifkan semula mod komposisi model kotak dalam CSS2.1, membenarkan elemen mengekalkan model kotak tradisional IE (versi IE6 dan ke bawah dan IE6-7 mod pelik), iaitu, lebar elemen atau ketinggian sama dengan lebar atau tinggi kandungan elemen. Seperti yang dapat dilihat daripada pengenalan model kotak di atas, lebar atau tinggi kandungan di sini termasuk sempadan, padding dan lebar kandungan atau ketinggian elemen (lebar atau tinggi kandungan di sini = lebar atau tinggi kotak—sempadan - padding).
warisi	Jadikan elemen mewarisi corak model kotak elemen induk

Yang paling kritikal ialah perbezaan antara kotak kandungan dan kotak sempadan dalam saiz kotak Perbezaan antara mereka boleh ditunjukkan dalam rajah di bawah, yang mempunyai analisis kotak yang berbeza model: