Rumah > Artikel > hujung hadapan web > Beberapa jenis model kotak html
Beberapa jenis model kotak html
- WBOYasal
- 2024-02-19 21:02:06449semak imbas
Terdapat dua jenis model kotak HTML iaitu model kotak standard (Content Box Model) dan model kotak IE (Border Box Model).
Model kotak standard ditetapkan oleh piawaian W3C Dalam model kotak standard, lebar dan tinggi elemen hanya merangkumi kawasan kandungan (kandungan), tidak termasuk sempadan (sempadan) dan pelapik (padding). Jumlah lebar atau tinggi unsur adalah sama dengan lebar atau tinggi kawasan kandungan + lebar atau tinggi jidar + lebar atau tinggi pelapik.
Model kotak IE ialah model kotak yang dicadangkan oleh pelayar Internet Explorer awal Berbeza daripada model kotak standard, dalam model kotak IE, lebar dan tinggi elemen termasuk kawasan kandungan, sempadan dan padding. Jumlah lebar atau tinggi elemen adalah sama dengan lebar atau tinggi kawasan kandungan (termasuk sempadan dan pelapik).
Di bawah, saya akan memberikan contoh kod khusus untuk model kotak standard dan model kotak IE masing-masing.
Pertama ialah contoh kod model kotak standard:
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 100px;
border: 1px solid black;
padding: 10px;
margin: 20px;
}
</style>
</head>
<body>
<div class="box">
<p>This is the content of the box.</p>
</div>
</body>
</html>Dalam contoh di atas, kami menggunakan elemen <div> untuk mencipta kotak. Dengan menetapkan gaya CSS, kami menentukan lebar, tinggi, jidar, padding dan jidar kotak. Dalam model kotak standard, jumlah lebar elemen = lebar kawasan kandungan + lebar sempadan + lebar padding = 200px + 2px + 20px = 222px; + ketinggian sempadan + ketinggian padding = 100px + 2px + 20px = 122px. <code><div>元素来创建一个盒子。通过设置CSS样式，我们给盒子指定了宽度、高度、边框、填充和外边距。在标准盒模型中，元素的总宽度=内容区域的宽度 + 边框的宽度 + 填充的宽度 = 200px + 2px + 20px = 222px；总高度=内容区域的高度 + 边框的高度 + 填充的高度 = 100px + 2px + 20px = 122px。<p>接下来是IE盒模型的代码示例：</p><pre class='brush:html;toolbar:false;'><!DOCTYPE html>
<html>
<head>
<style>
.box {
box-sizing: border-box;
width: 200px;
height: 100px;
border: 1px solid black;
padding: 10px;
margin: 20px;
}
</style>
</head>
<body>
<div class="box">
<p>This is the content of the box.</p>
</div>
</body>
</html></pre><p>在IE盒模型中，我们可以通过设置<code>box-sizing: border-box;
rrreee
Dalam model kotak IE, kita boleh menggunakan model kotak IE dengan menetapkanAtas ialah kandungan terperinci Beberapa jenis model kotak html. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!