Apakah model kotak

Model kotak ialah cara untuk menerangkan ruang yang diduduki oleh elemen HTML pada halaman Model kotak menganggap setiap elemen HTML sebagai kotak segi empat tepat, yang terdiri daripada empat bahagian utama: kawasan kandungan, padding, sempadan dan Margin. Pengenalan terperinci: 1. Kawasan kandungan ialah bahagian elemen HTML yang sebenarnya mengandungi kandungan, seperti teks, imej atau elemen bersarang lain Ini adalah teras model kotak dan menentukan kandungan sebenar yang dipaparkan oleh elemen. Pelapik ialah kawasan kandungan Ruang putih antara sempadan elemen dan sifat padding-top dalam CSS.

Sistem pengendalian tutorial ini: sistem Windows 10, komputer DELL G3.

"Model Kotak" ialah konsep penting dalam CSS, digunakan untuk menerangkan cara elemen HTML menduduki ruang pada halaman. Model kotak menganggap setiap elemen HTML sebagai kotak segi empat tepat yang terdiri daripada empat bahagian utama: kawasan kandungan, padding, sempadan dan jidar. Memahami model kotak adalah kunci kepada pembangunan bahagian hadapan kerana ia menentukan cara elemen halaman dibentangkan dan dipaparkan. Dalam artikel ini, saya akan menerangkan secara terperinci pelbagai komponen model kotak dan perkara yang mereka lakukan.

Komponen model kotak:

Kawasan Kandungan:

Kawasan kandungan ialah bahagian elemen HTML yang sebenarnya mengandungi kandungan, seperti teks, imej atau elemen bersarang lain. Ini adalah teras model kotak dan menentukan kandungan sebenar yang dipaparkan oleh elemen.

Padding:

Padding ialah ruang kosong antara kawasan kandungan dan sempadan elemen. Ia boleh ditetapkan dalam CSS menggunakan sifat seperti padding-top, padding-right, padding-bottom dan padding-left. Padding mengawal jarak antara kandungan dalaman elemen dan sempadannya.

Sempadan:

Sempadan ialah garisan atau sempadan di sekeliling kandungan dan pelapik. Sempadan boleh ditetapkan dalam CSS menggunakan sifat seperti lebar sempadan, gaya sempadan dan warna sempadan. Ia digunakan untuk menghias dan mengasingkan kandungan unsur.

Margin:

Margin ialah ruang kosong antara sempadan elemen dan elemen sekeliling. Ia boleh ditetapkan dalam CSS menggunakan sifat seperti margin-atas, margin-kanan, margin-bawah dan margin-kiri. Margin digunakan untuk mengawal jarak antara unsur dengan unsur lain.

Cara model kotak berfungsi:

Apabila penyemak imbas memaparkan halaman, ia menentukan jumlah lebar dan ketinggian setiap elemen HTML berdasarkan definisi model kotak. Dimensi ini menentukan kedudukan dan susun atur elemen pada halaman. Begini cara model kotak berfungsi:

Jumlah Lebar:

Jumlah lebar elemen adalah sama dengan lebar kawasan kandungan ditambah lebar padding kiri dan kanan serta jidar kiri dan kanan, serta lebar kiri dan margin kanan.

Jumlah lebar = lebar kandungan + padding kiri + padding kanan + lebar jidar kiri + lebar jidar kanan + jidar kiri + jidar kanan

Jumlah Ketinggian:

Jumlah ketinggian elemen adalah sama dengan kandungan Ketinggian kawasan ditambah ketinggian pelapik atas dan bawah serta sempadan atas dan bawah, serta ketinggian jidar atas dan bawah.

Ketinggian keseluruhan = ketinggian kandungan + padding atas + padding bawah + ketinggian sempadan atas + ketinggian sempadan bawah + margin atas + margin bawah

Dua standard untuk model kotak:

dalam pembangunan web , terdapat dua model kotak utama piawaian: model kotak standard W3C dan model kotak IE.

Model Kotak Piawai W3C:

Model Kotak Piawai W3C menetapkan lebar dan tinggi sesuatu elemen untuk memasukkan kawasan kandungan sahaja. Pelapik, jidar dan jidar tidak menjejaskan lebar dan ketinggian keseluruhan elemen;

Ini ialah gelagat lalai standard web dan model kotak yang diguna pakai oleh kebanyakan penyemak imbas moden.

Model kotak IE:

Model kotak IE termasuk lebar dan tinggi elemen termasuk kawasan kandungan, pelapik dan sempadan. Margin tidak menjejaskan lebar dan ketinggian keseluruhan, ia berada di luar elemen.

Ini ialah model kotak yang diguna pakai oleh versi awal pelayar Internet Explorer, biasanya disimulasikan dengan menggunakan saiz kotak sifat CSS: kotak sempadan;.

Cara untuk mengawal model kotak:

Dalam CSS, anda boleh menggunakan beberapa sifat dan teknik untuk mengawal kelakuan model kotak:

sifat bersaiz kotak:

sifat bersaiz kotak digunakan untuk mengawal tingkah laku model kotak , yang boleh mengambil dua nilai: kotak kandungan dan kotak sempadan.

kotak kandungan ialah nilai lalai, menggunakan model kotak standard W3C, yang menyatakan bahawa lebar dan ketinggian elemen termasuk kawasan kandungan, dan pelapik, jidar dan jidar akan ditambahkan di luar kawasan kandungan.

border-box menggunakan model kotak IE, yang menentukan lebar dan ketinggian elemen termasuk kawasan kandungan, padding dan jidar, manakala jidar akan ditambah di luar elemen.

rreeee

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