CSS中如何使用盒模型(Box Model)来布局和定位元素？

csshtml

在CSS中，盒模型(Box Model)是一个核心概念，用于描述HTML元素如何根据其属性（如宽度、高度、内边距、边框和外边距）在页面上布局和定位。

一个CSS盒模型由以下四个部分组成：

  1. 内容(Content): 这是元素本身的文本、图片或其他媒体内容。
  2. 内边距(Padding): 内容周围的空间，位于内容和边框之间。
  3. 边框(Border): 包围在内边距和内容外面的线。
  4. 外边距(Margin): 边框外部的空间，用于分隔相邻的元素。

默认情况下，元素的宽度和高度只包括内容的大小，不包括内边距、边框和外边距。但是，可以通过box-sizing属性来改变这一行为。

box-sizing属性有两个值：

  • content-box: 这是默认值，元素的宽度和高度只包括内容的大小。
  • border-box: 元素的宽度和高度包括内容、内边距和边框，但不包括外边距。

以下是一个使用盒模型的HTML和CSS示例：

示例效果与源代码：

运行效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS盒模型示例</title>
<style>
  .box {
    width: 300px;
    height: 200px;
    padding: 20px;
    border: 5px solid black;
    margin: 10px;
    box-sizing: border-box; /* 使用border-box盒模型 */
  }
</style>
</head>
<body>

<div class="box">
  这个div元素使用了CSS盒模型。它的宽度和高度包括内容、内边距和边框。
</div>

</body>
</html>

尝试一下 »

在上面的示例中，.box类定义了一个宽度为300px、高度为200px的div元素。由于使用了box-sizing: border-box;，这个宽度和高度包括了内容、20px的内边距和5px的边框。因此，即使添加了内边距和边框，div元素的总宽度和高度仍然保持为300px和200px。如果没有使用border-box，那么div元素的实际宽度和高度将会大于300px和200px，以容纳内边距和边框。

上一篇：长尾效果Canvas动画案例分享

下一篇：CSS中如何使用背景图像，并如何设置背景图像的大小和位置？