CSS盒模型基础属性作用
- content（内容）：
- 它是盒模型的核心部分，包含文本、图像等实际的内容。例如，在一个
<div>元素中，输入的文字就是content的一部分。不同类型的元素，其content展示的方式和可容纳的内容类型有所不同，如<img>元素的content就是图像本身。
- padding（内边距）：
- 是元素内容与边框之间的空白区域。它用于在元素内部创建空间，使内容与边框保持一定距离。例如，设置一个按钮的
padding: 10px，会使按钮内的文本与按钮边框之间有10像素的空白，提升了按钮中文本的可读性和美观度。
- border（边框）：
- 围绕在元素padding之外的线，用于界定元素的边界。边框可以有不同的样式（如
solid实线、dashed虚线、dotted点线等）、宽度和颜色。比如，为一个卡片设置border: 1px solid #000，会在卡片四周创建一条1像素宽的黑色实线边框，将卡片内容与周围元素区分开来。
- margin（外边距）：
- 是元素边框与相邻元素之间的空白区域，用于控制元素与其他元素之间的距离。例如，两个
<div>元素上下排列，为上面的<div>设置margin - bottom: 20px，会使上下两个<div>之间有20像素的间隔，从而调整页面布局中元素间的间距。
box - sizing属性不同时宽度计算方式及举例
- box - sizing: content - box（默认值）：
- 宽度计算方式：元素的宽度（
width）仅指content区域的宽度，不包括padding、border和margin。实际占据的宽度是width + padding - left + padding - right + border - left - width + border - right - width + margin - left + margin - right。
- 举例：
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.box {
box - sizing: content - box;
width: 200px;
padding: 20px;
border: 5px solid black;
margin: 10px;
}
</style>
</head>
<body>
<div class="box">这是一个示例div</div>
</body>
</html>
- 在上述例子中，这个
.box元素实际占据的水平空间宽度为200px（width） + 20px（padding - left） + 20px（padding - right） + 5px（border - left - width） + 5px（border - right - width） + 10px（margin - left） + 10px（margin - right） = 270px。
- box - sizing: border - box：
- 宽度计算方式：元素的宽度（
width）包括content、padding和border的宽度，即width指定的是content + padding + border的总宽度，实际占据的宽度是width + margin - left + margin - right。
- 举例：
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.box {
box - sizing: border - box;
width: 200px;
padding: 20px;
border: 5px solid black;
margin: 10px;
}
</style>
</head>
<body>
<div class="box">这是一个示例div</div>
</body>
</html>
- 在这个例子中，
.box元素的width为200px，这个200px包含了content、padding和border的宽度。所以实际占据的水平空间宽度为200px（width，包含padding和border） + 10px（margin - left） + 10px（margin - right） = 220px。
