Meneroka sifat model kotak CSS: pelapik, jidar dan jidar

Penerokaan harta model kotak CSS: padding, margin dan jidar

Model kotak CSS ialah salah satu konsep penting dalam reka letak halaman web. Dalam pembangunan bahagian hadapan, memahami dan menggunakan sifat padding, margin dan sempadan dengan betul adalah penting. Artikel ini akan menyelidiki penggunaan dan korelasi ketiga-tiga sifat ini, dan memberikan contoh kod khusus.

1 Pengenalan kepada model kotak
Model kotak terdiri daripada empat bahagian: kandungan, padding, sempadan dan jidar. Antaranya, kandungan merujuk kepada kandungan sebenar di dalam elemen, padding ialah ruang kosong antara kandungan dan sempadan, sempadan ialah garisan yang mengelilingi kandungan dan padding, dan margin ialah jarak antara elemen dengan elemen lain. .

2. Atribut padding
Atribut padding digunakan untuk menetapkan saiz jidar dalam elemen. Anda boleh menggunakan satu nilai untuk menetapkan padding yang sama dalam keempat-empat arah, atau anda boleh menggunakan empat nilai untuk menetapkan padding di arah atas, kanan, bawah dan kiri.

Contoh kod:

.box {
  padding: 20px; /* 上下左右内边距都是 20px */
}

.box {
  padding: 10px 20px; /* 上下内边距是 10px，左右内边距是 20px */
}

.box {
  padding: 10px 20px 30px 40px; /* 上内边距是 10px，右内边距是 20px，下内边距是 30px，左内边距是 40px */
}

3. Atribut margin
atribut margin digunakan untuk menetapkan saiz jidar elemen. Sama seperti sifat padding, anda boleh menggunakan satu nilai atau empat nilai untuk menetapkan margin yang sama atau berbeza untuk empat arah.

Contoh kod:

.box {
  margin: 20px; /* 上下左右外边距都是 20px */
}

.box {
  margin: 10px 20px; /* 上下外边距是 10px，左右外边距是 20px */
}

.box {
  margin: 10px 20px 30px 40px; /* 上外边距是 10px，右外边距是 20px，下外边距是 30px，左外边距是 40px */
}

4 Atribut sempadan
Atribut sempadan digunakan untuk menetapkan gaya, lebar dan warna sempadan elemen. Terdapat tiga sub-sifat yang boleh ditetapkan: lebar sempadan (lebar sempadan), gaya sempadan (gaya sempadan) dan warna sempadan (warna sempadan).

Contoh kod:

.box {
  border-width: 1px; /* 边框宽度为 1px */
  border-style: solid; /* 实线边框 */
  border-color: #000; /* 边框颜色为黑色 */
}

.box {
  border: 2px dashed #ff0000; /* 边框宽度为 2px，虚线边框，颜色为红色 */
}

5 Pengiraan lebar dan tinggi model kotak
Dalam model kotak, pengiraan lebar dan tinggi elemen termasuk. kandungan + pelapik + jumlah sempadan. Contohnya, jika lebar kotak ditetapkan kepada 100px, padding ditetapkan kepada 10px dan lebar sempadan ditetapkan kepada 1px, maka lebar sebenar kotak ialah 100px + 10px + 10px + 1px + 1px = 122px.

6. Persatuan atribut model kotak
Terdapat perkaitan tertentu antara atribut padding, margin dan border. Apabila berbilang elemen bersebelahan mempunyai jidar, jidar di antaranya digabungkan menjadi satu jidar yang lebih besar. Padding dan sempadan tidak akan bergabung.

7. Ringkasan
Melalui pengenalan artikel ini, kami mengetahui bahawa pelapik, jidar dan jidar adalah sifat model kotak yang penting dalam CSS. Menetapkan sifat ini dengan betul boleh mengawal reka letak dan gaya elemen. Perlu diingatkan bahawa atribut model kotak adalah berkaitan, terutamanya margin akan digabungkan. Dalam pembangunan sebenar, atribut ini boleh digunakan secara fleksibel mengikut keperluan untuk mencapai kesan reka letak halaman web yang memuaskan.

Melalui penerokaan sifat model kotak CSS di atas, saya harap pembaca dapat memahami dan menggunakan sifat ini dengan lebih baik dan meningkatkan keupayaan pembangunan bahagian hadapan.

Atas ialah kandungan terperinci Meneroka sifat model kotak CSS: pelapik, jidar dan jidar. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!