CSS Box Model

网页上可以显示的组件由一个或多个矩形框组成。

CSS 盒模型是一个包含众多属性（例如边缘、边框、内边距和内容）的隔间。它用于开发网页的设计和结构。它可以作为一组工具来个性化不同组件的布局。根据 CSS 盒模型，网页浏览器将每个元素视为一个方形棱柱。

下图说明了 CSS 属性 宽度、高度、内边距、边框 和 外边距 如何决定一个属性在网页上占据多少空间。

CSS 盒模型包含 CSS 中的不同属性。这些属性列举如下。

• Border (边框)
• 边距
• 填充 (Padding)
• 内容

现在，我们将逐一详细确定这些属性。

边框区域

它是内边距框和外边距之间的区域。其比例由边界的宽度和高度决定。

外边距区域

此部分包括边界和边框边缘之间的区域。

外边距区域的比例等于外边距框的宽度和高度。它更好地将产品与其相邻节点分开。

内边距区域

此区域需要组件的内边距。本质上，此区域是主题区域周围和边框内部的空间。内边距框的高度和宽度决定其比例。

内容区域

此区域包含文本、照片或其他数字媒体等材料。

它受信息边缘的限制，其比例由内容包围的宽度和高度决定。

宽度和高度的元素

通常，当你使用 CSS 宽度和高度属性分配属性的宽度和高度时，这意味着你只定位了该组件主题区域的高度和宽度。单元框的额外高度和宽度基于一系列影响。

元素框在网页上可能占据的特定区域计算如下：

示例 1

这里，为了解释 CSS 盒模型，我们有一个实例。

输出

编译上述代码后，你将获得以下输出。

示例 2

这里，我们还有一个插图来描述 CSS 盒模型。

输出

执行代码后，你将获得以下输出

重要提示：在 CSS 盒模型中，实体框的主题区域是内容（如图像、文本、视频等）最初出现的区域。它也可能保留后代元素的框。