Apakah gaya yang terkandung dalam model kotak?

Model kotak mengandungi empat bahagian utama: kawasan kandungan, padding, jidar dan jidar. Pengenalan terperinci: 1. Kawasan kandungan, yang boleh dikawal dengan menetapkan atribut lebar dan ketinggian elemen 2. Padding, saiz padding boleh ditakrifkan dengan menetapkan atribut padding elemen; jidar unsur Sifat untuk menentukan gaya, lebar dan warna jidar 4. Jidar, tentukan saiz jidar dan seterusnya dengan menetapkan atribut jidar unsur.

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

Model kotak ialah konsep penting dalam CSS, digunakan untuk menerangkan reka letak dan gaya elemen HTML. Ia mentakrifkan ruang yang diduduki elemen pada halaman dan menentukan saiz sempadan, padding dan kandungan elemen.

Model kotak terdiri daripada empat bahagian utama: kawasan kandungan, padding, jidar dan jidar. Gaya untuk setiap bahagian diperincikan di bawah.

1 Kawasan kandungan (Kandungan)

Kawasan kandungan ialah bahagian teras model kotak, seperti teks, imej atau elemen bersarang lain. Saiz kawasan kandungan boleh dikawal dengan menetapkan sifat lebar dan ketinggian elemen.

2. Padding

Padding ialah ruang antara kawasan kandungan dan sempadan, yang digunakan untuk mengawal jarak antara kandungan elemen dan sempadan. Anda boleh menentukan saiz padding dengan menetapkan atribut padding bagi elemen tersebut. Atribut padding boleh menetapkan padding dalam arah atas, kanan, bawah dan kiri, atau anda boleh menggunakan borang singkatan untuk menetapkan padding dalam keempat-empat arah pada masa yang sama.

3. Sempadan(Sempadan)

Sempadan ialah garisan atau gaya yang mengelilingi kawasan kandungan dan pelapik. Anda boleh mentakrifkan gaya, lebar dan warna sempadan dengan menetapkan atribut sempadan elemen. Atribut sempadan boleh menetapkan gaya sempadan dalam arah atas, kanan, bawah dan kiri masing-masing, atau anda boleh menggunakan borang singkatan untuk menetapkan gaya sempadan dalam keempat-empat arah pada masa yang sama.

4. Margin

Margin ialah ruang antara unsur dan unsur lain, digunakan untuk mengawal jarak antara unsur dan unsur lain. Anda boleh menentukan saiz margin dengan menetapkan atribut margin bagi elemen. Atribut margin boleh menetapkan margin dalam arah atas, kanan, bawah dan kiri masing-masing, atau anda boleh menggunakan borang singkatan untuk menetapkan margin dalam empat arah pada masa yang sama.

Selain daripada empat bahagian di atas, terdapat beberapa gaya lain yang berkaitan yang boleh menjejaskan prestasi model kotak, seperti atribut saiz kotak dan atribut limpahan.

1. Atribut saiz kotak

Atribut saiz kotak digunakan untuk mengawal cara model kotak sesuatu elemen dikira. Secara lalai, lebar dan ketinggian elemen hanya termasuk kawasan kandungan, tidak termasuk pelapik dan sempadan. Anda boleh menukar cara model kotak dikira supaya lebar dan ketinggian elemen termasuk padding dan jidar dengan menetapkan sifat saiz kotak kepada kotak sempadan.

2. Atribut limpahan

Atribut limpahan digunakan untuk mengawal cara sesuatu elemen bertindak apabila kandungannya melebihi saiz yang ditentukan. Anda boleh menetapkan atribut limpahan kepada kelihatan (nilai lalai, tiada keratan apabila kandungan melimpah), tersembunyi (keratan apabila kandungan melimpah), tatal (paparkan bar skrol) atau automatik (paparkan bar skrol secara automatik berdasarkan kandungan).

Ringkasnya, model kotak mengandungi empat bahagian utama: kawasan kandungan, padding, jidar dan jidar. Dengan menetapkan sifat gaya ini, kami boleh mengawal reka letak dan gaya elemen pada halaman dengan tepat. Memahami dan menguasai konsep dan gaya model kotak ialah asas reka letak dan reka bentuk CSS, dan penting untuk membina halaman web yang cantik dan responsif. .

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