CSS 盒模型深度剖析：深入理解 content-box 与 padding-box

前端

2023-10-31 10:21:58

CSS 盒子模型概述

CSS盒子模型是一种用于网页中元素如何占据空间的模型。每个元素都被视为一个矩形盒子，由四条边和四个角组成。盒子模型包括四个主要部分：

内容区域（Content Box）： 包含元素的实际内容，例如文本、图像或其他元素。
内边距（Padding）： 内容区域和边框之间的空间。
边框（Border）： 内容区域周围的线。
外边距（Margin）： 元素与其他元素之间的空间。

Content-box 和 Padding-box

CSS盒子模型有两种类型：content-box和padding-box。这两种类型之间的主要区别在于如何计算元素的宽度和高度。

Content-box： 在这种盒模型中，元素的宽度和高度仅包括内容区域的宽度和高度。内边距、边框和外边距不包括在元素的宽度和高度中。
Padding-box： 在这种盒模型中，元素的宽度和高度包括内容区域、内边距和边框的宽度和高度。外边距不包括在元素的宽度和高度中。

实例对比

为了更好地理解content-box和padding-box之间的区别，我们来看一个示例。假设我们有一个div元素，其CSS代码如下：

div {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 10px solid black;
  margin: 10px;
}

Content-box：

内容区域的宽度和高度为200px和100px。
内边距的宽度和高度为20px。
边框的宽度和高度为10px。
外边距的宽度和高度为10px。
元素的总宽度和高度为240px和140px。

Padding-box：

内容区域的宽度和高度为200px和100px。
内边距的宽度和高度为20px。
边框的宽度和高度为10px。
外边距的宽度和高度为10px。
元素的总宽度和高度为260px和160px。

从示例中可以看出，content-box和padding-box之间存在着明显的区别。content-box的元素总宽度和高度小于padding-box的元素总宽度和高度。这是因为在content-box中，内边距、边框和外边距不包括在元素的宽度和高度中，而在padding-box中，内边距和边框包括在元素的宽度和高度中。