CSS 盒子模型学习笔记
什么是 CSS 盒子模型？
CSS 盒子模型是指在 Web 页面中，每个 HTML 元素都被看作是一个矩形的盒子，这个盒子由内容区域、内边距（padding）、边框（border）、外边距（margin）四个部分组成。
在 CSS 中，设置元素的盒子模型需要用到 box-sizing 属性。它有两个值：content-box 和 border-box。默认值为 content-box，即元素的尺寸只包括元素内容的部分，不包括元素的边框和内边距。
实例演示
让我们通过一个简单的实例来理解 CSS 盒子模型。
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<title>CSS 盒子模型实例</title>
<style>
/* 设置元素的盒子模型为 border-box */
* {
box-sizing: border-box;
}
/* 设置内容区域的背景色为紫色 */
.box {
background-color: purple;
width: 200px;
height: 150px;
padding: 20px;
border: 10px solid black;
margin: 20px;
}
</style>
</head>
<body>
<!-- 演示盒子模型 -->
<div class="box">
这是一个盒子模型的例子。
</div>
</body>
</html>
在这个例子中，我们首先通过 * 选择器将所有元素的盒子模型设置为 border-box。接着，创建了名为 box 的类，并使用 CSS 属性设置了它的宽度、高度、内边距、边框和外边距。最后，在 HTML 中使用 div 元素来展示这个盒子模型。
运行这段代码后，我们可以看到一个紫色的矩形，大小为 200x150 像素，有 20 像素的内边距、10 像素的黑色边框和 20 像素的外边距。
注意，由于我们将所有元素的盒子模型都设置为 border-box，所以元素的宽度和高度属性已经包含了其内边距和边框。这意味着在这个例子中，元素的实际尺寸为 200x150 像素，而不是 240x190 像素。
结论
CSS 盒子模型是 Web 开发中的重要概念，理解其中所包含的内容区域、内边距、边框和外边距对于开发高质量的 Web 页面至关重要。掌握盒子模型后，我们可以更好地控制页面中元素的布局和样式，并为用户提供更好的体验。