Beberapa jenis model kotak html-html tutorial-php.cn

Beberapa jenis model kotak html

WBOY

Lepaskan： 2024-02-19 21:02:06

asal

449 orang telah melayarinya

Beberapa jenis model kotak html

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>

Salin selepas log masuk

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. <div>元素来创建一个盒子。通过设置CSS样式，我们给盒子指定了宽度、高度、边框、填充和外边距。在标准盒模型中，元素的总宽度=内容区域的宽度 + 边框的宽度 + 填充的宽度 = 200px + 2px + 20px = 222px；总高度=内容区域的高度 + 边框的高度 + 填充的高度 = 100px + 2px + 20px = 122px。

接下来是IE盒模型的代码示例：

<!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>

Salin selepas log masuk

在IE盒模型中，我们可以通过设置box-sizing: border-box;

Berikut ialah contoh kod model kotak IE:

rrreee

Dalam model kotak IE, kita boleh menggunakan model kotak IE dengan menetapkan saiz kotak: kotak sempadan;. Dalam model kotak IE, jumlah lebar elemen = lebar kawasan kandungan = 200px jumlah ketinggian = ketinggian kawasan kandungan = 100px; 🎜🎜Melalui contoh kod di atas, kita dapat melihat dengan jelas perbezaan antara model kotak standard dan model kotak IE. Dalam pembangunan sebenar, kita perlu memilih model kotak yang hendak digunakan berdasarkan keperluan dan keserasian pelayar yang berbeza. 🎜

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