上查看所有课程
CSS 盒子模型是一个基本概念，它定义了元素的尺寸和间距是如何计算的。
盒子模型将每个 HTML 元素视为一个矩形盒子，由内容、内边距、边框和外边距组成。
盒子模型按以下方式定义 HTML 元素的布局：
盒子模型的组成部分是：
content：在元素中显示的实际文本或图像padding：元素内容与其边框之间的透明空间border：围绕元素内内边距和内容的线条margin：添加到边框外部的透明区域
盒子模型的主要目的是解释元素的尺寸和间距是如何计算的，以及它们之间如何相互关联。
元素在盒子模型下的宽度和高度
盒子模型对于理解元素的 width 和 height 是如何计算的很重要。
默认情况下，元素的 width 和 height 仅应用于元素的 content。因此，元素的实际尺寸是通过将 padding 和 border 与元素的指定 width 和 height 相加来计算的。
Actual width: border-left + padding-left + width + padding-right + border-right
Actual height: border-top + padding-top + height + padding-bottom + border-bottom让我们看一个例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Box Model</title>
</head>
<body>
<div>
The CSS box model is a way of describing the layout of an HTML
element.
</div>
</body>
</html>div {
width: 400px;
height: 80px;
border: 10px solid black;
padding: 15px;
background-color: greenyellow;
/* clips the background color to content only */
background-clip: content-box;
}浏览器输出
在上面的示例中，我们指定了：
div {
width: 400px;
height: 80px;
border: 10px solid black;
padding: 15px;
}div 的 width 和 height 仅应用于元素的 content。元素的实际 width 和 height 是：
width = 10px + 15px + 400px + 15px + 10px = 450px
height = 10px + 15px + 80px + 15px + 10px = 130px因此，实际 width 变为 450px，height 变为 130px。
注意：margin 不会加到实际盒子尺寸的计算中，尽管它会影响盒子在页面上占据的总空间。border 标记了盒子区域的边界，它不会扩展到 margin 中。
内联元素的盒子模型
盒子模型对内联元素的应用方式不同。这是因为内联元素没有默认的 width 或 height，并且根据其内容的尺寸占据空间。
让我们看一个例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Box Model</title>
</head>
<body>
<p>
The box model works differently for inline elements. For example,
this <span>span</span> element does not work as expected.
</p>
</body>
</html>p {
width: 350px;
border: 1px solid black;
}
span {
width: 100px;
height: 40px;
border: 5px solid black;
padding: 10px;
margin: 10px;
background-color: greenyellow;
}浏览器输出
在上面的例子中：
height和width被忽略。top和bottom的外边距也被忽略，只有left和right的外边距有效。padding对元素的所有四个方向都有效。
因此，我们无法计算内联元素的实际尺寸。
为了在内联元素中应用盒子模型，应将 display 属性更改为 inline-block 或 block。
让我们看一个 inline-block 的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Box Model</title>
</head>
<body>
<p>
The box model works differently for inline elements. For example,
this <span>span</span> element does not work as expected.
</p>
</body>
</html>p {
width: 350px;
border: 1px solid black;
}
span {
display: inline-block;
width: 100px;
height: 40px;
border: 5px solid black;
padding: 10px;
margin: 10px;
background-color: greenyellow;
}浏览器输出
在上面的示例中，盒子模型按预期工作。span 元素的实际 width 和 height 计算如下：
width = 5px + 10px + 100px + 10px + 5px = 130px
height = 5px + 10px + 40px + 10px + 5px = 70px因此，实际 width 和 height 分别变为 130px 和 70px。
注意： box-sizing 属性可以改变盒子模型的默认行为，使开发者能够直观地设置 width 和 height。
您可以了解更多关于 box-sizing 属性的信息。