在 HTML 中，可以通过 CSS 设置盒子模型，盒子模型用于设置元素的宽度、高度、内边距和边框。盒子模型分为两种：W3C 盒子模型和 IE 盒子模型。
W3C 盒子模型：元素的宽度和高度只包括内容的宽度和高度，不包括边框（border）、内边距（padding）和外边距（margin）。
IE 盒子模型：元素的宽度和高度包括内容、内边距和边框的宽度和高度，但不包括外边距。
一般情况下我们使用的都是 W3C 盒子模型，可以通过 CSS 设置为 W3C 盒子模型：
box-sizing: content-box; /* W3C 盒子模型 */
同时还可以设置为 IE 盒子模型：
box-sizing: border-box; /* IE 盒子模型 */
下面是一个完整的示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子模型示例</title>
<style>
/* 设置 W3C 盒子模型 */
.box1 {
width: 200px;
height: 100px;
padding: 10px;
border: 1px solid #000;
box-sizing: content-box;
}
/* 设置 IE 盒子模型 */
.box2 {
width: 200px;
height: 100px;
padding: 10px;
border: 1px solid #000;
box-sizing: border-box;
}
</style>
</head>
<body>
<h2>W3C 盒子模型</h2>
<div class="box1">
<p>这是一个盒子模型示例</p>
</div>
<h2>IE 盒子模型</h2>
<div class="box2">
<p>这是一个盒子模型示例</p>
</div>
</body>
</html>在上面的示例中，我们定义了两个不同的盒子模型，一个是 W3C 盒子模型，一个是 IE 盒子模型。我们可以通过设置不同的 box-sizing 属性来实现。
正文完