HTML&CSS-05：盒子模型
在CSS中，盒子模型是一个非常重要的概念，它定义了元素的宽度和高度是如何计算的。CSS盒模型包括两部分：外边距（Margin）、边框（Border）、内边距（Padding）和实际内容（Content）。
以下是一个简单的HTML和CSS代码示例，演示了盒子模型的应用：
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 300px;
height: 200px;
margin: 20px;
border: 5px solid blue;
padding: 20px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="box">
这是一个盒子模型示例。
</div>
</body>
</html>在这个例子中，.box 类定义了一个300像素宽、200像素高的盒子。盒子外围有20像素的外边距，边框为5像素并且是蓝色的，内部有20像素的内边距，而背景颜色是浅蓝色。当这些值相加时，你会发现.box的总宽度是350像素（300px + 2x20px + 10px），总高度是240像素（200px + 2x20px + 10px）。
评论已关闭