Cara menggunakan kotak dalam css

Model kotak dalam CSS ialah rangka kerja untuk mengawal saiz, sempadan dan jarak elemen. Ia terdiri daripada empat bahagian: kandungan, padding, sempadan dan margin, dan menyediakan atribut seperti lebar, padding, sempadan dan margin untuk kawalan. Model kotak digunakan untuk menyusun elemen, mencipta jarak, menambah hiasan dan melaksanakan reka letak responsif.

Cara menggunakan kotak dalam CSS

Model kotak ialah rangka kerja dalam CSS yang menerangkan saiz dan sempadan elemen. Ia mengawal lebar, ketinggian, sempadan dan pelapik elemen.

Struktur model kotak

Model kotak terdiri daripada empat bahagian berikut:

• Kandungan: Kandungan sebenar seperti teks atau imej dalam elemen.
• Padding: Kawasan lutsinar di sekeliling kandungan.
• Sempadan: Garisan di sekeliling kandungan.
• Margin: Ruang putih antara unsur dan unsur lain.

sifat kotak

CSS menyediakan pelbagai sifat untuk mengawal bahagian berbeza model kotak:

• lebar dan tinggi: Tetapkan lebar dan tinggi kandungan elemen.
• padding: Tetapkan padding elemen. Padding untuk setiap sisi boleh ditetapkan secara individu dengan menggunakan padding-top、padding-right、padding-bottom 和 padding-left .
• sempadan: Tetapkan sempadan elemen. Anda boleh menetapkan lebar, gaya dan warna sempadan.
• margin: Tetapkan jidar elemen.

Tujuan model kotak

Model kotak digunakan untuk:

• Mengawal saiz dan bentuk elemen.
• Buat jurang dan ruang kosong.
• Tambah elemen hiasan seperti sempadan dan bayang-bayang.
• Laksanakan reka letak responsif, iaitu elemen boleh menyesuaikan diri dengan saiz skrin yang berbeza.

Contoh

Kod CSS berikut mencipta elemen dengan padding 10 piksel dan sempadan biru 5 piksel:

<code class="css">.element {
  width: 200px;
  height: 100px;
  padding: 10px;
  border: 5px solid blue;
}</code>

Atas ialah kandungan terperinci Cara menggunakan kotak dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!