【重识 HTML + CSS】盒子模型相关知识点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型示例</title>
<style>
.box {
width: 300px;
height: 200px;
padding: 20px;
border: 5px solid blue;
margin: 10px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="box">盒子内容</div>
</body>
</html>这段代码定义了一个类名为.box的CSS样式，它包括了width、height、padding、border、margin和background-color属性。在HTML中，应用了这个类的<div>元素将展现出这样的盒子模型，其实际大小将是：
内容宽度（Content width）：300px
内容高度（Content height）：200px
元素宽度（Element width）：
内容宽度 + 左右内边距 = 300px + 20px + 20px = 340px
元素高度（Element height）：
内容高度 + 上下内边距 = 200px + 20px + 20px = 240px
可视区域宽度（Visual area width）：
元素宽度 + 左右边框 = 340px + 10px + 5px = 360px
可视区域高度（Visual area height）：
元素高度 + 上下边框 = 240px + 10px + 5px = 260px
这个示例展示了如何计算和设计一个盒子模型，并且如何通过CSS控制元素的内部和外部间距，以及边框和背景色。
评论已关闭