程序员必看！被盒模型逼疯的我，看完迎刃而解😎

一、CSS盒模型

（一）基本概念

在CSS中，每个HTML元素都被视为一个矩形的盒子，这就是CSS盒模型。它由四个主要部分组成，分别是内容区域（content）、内边距（padding）、边框（border）和外边距（margin）。这些部分共同决定了元素在页面上占据的空间大小以及元素之间的间距关系。

（二）各部分详细说明

内容区域（content） - 这是盒模型的核心部分，用于显示元素的实际内容，如文本、图片等。通过width和height属性来设置内容区域的宽度和高度。例如：

css 复制代码

div { width: 200px; height: 100px; }

这里设置的width和height仅适用于内容区域，不包括其他部分。

内边距（padding）

内边距是内容区域与边框之间的空白区域。它可以通过padding - top、padding - right、padding - bottom和padding - left分别设置上、右、下、左四个方向的内边距，也可以使用padding属性一次性设置四个方向的内边距。例如：

css 复制代码

div {
    padding - top: 10px;
    padding - right: 20px;
    padding - bottom: 10px;
    padding - left: 20px;
    /* 等价于 */
    padding: 10px 20px 10px 20px;
}

内边距的作用是将内容与边框隔开，并且内边距会影响元素的总尺寸，因为它会增加元素在水平和垂直方向上占据的空间。

边框（border）

边框围绕在内边距之外，用于界定元素的边界。可以通过border - width设置边框的宽度，border - style设置边框的样式（如实线、虚线等），border - color设置边框的颜色。例如：

css 复制代码

div {
   border - width: 2px;
   border - style: solid;
   border - color: black;
   /* 也可以使用简写属性 */
   border: 2px solid black;
}

边框同样会增加元素在页面上占据的空间大小。

外边距（margin）

外边距是元素边框与相邻元素之间的空白区域。与内边距类似，也有margin - top、margin - right、margin - bottom、margin - left以及margin的简写形式。例如：

css 复制代码

div {
    margin - top: 30px;
    margin - right: 40px;
    margin - bottom: 30px;
    margin - left: 40px;
    /* 等价于 */
    margin: 30px 40px 30px 40px;
}

外边距主要用于控制元素与其他元素之间的间距，它不会影响元素自身的尺寸，但会影响元素在页面布局中的位置。

（三）盒模型尺寸计算

在标准 CSS 盒模型中，元素占据的总宽度（totalWidth）和总高度（totalHeight）的计算公式如下：

plaintext 复制代码

totalWidth = width + padding - left + padding - right + border - left - width + border - right - width + margin - left + margin - right
totalHeight = height + padding - top + padding - bottom + border - top - width + border - bottom - width + margin - top + margin - bottom

二、IE 盒模型（怪异盒模型）

（一）与标准盒模型的差异

IE 盒模型（在 IE5 - 6 等早期版本中使用，也被称为怪异盒模型）与标准 CSS 盒模型的主要区别在于对width和height属性的解释不同。

在 IE 盒模型中，width和height属性所指的范围包含了内容区域、内边距和边框。也就是说，当你设置width和height时，实际设置的是内容区域、内边距和边框宽度的总和。例如：

css 复制代码

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

在标准盒模型中，内容区域的宽度是200px，总宽度为200 + 10 * 2 + 2 * 2 = 224px。而在 IE 盒模型中，200px包含了内容区域、内边距和边框，内容区域的实际宽度为200 - 10 * 2 - 2 * 2 = 176px。

（二）盒模型尺寸计算

在 IE 盒模型中，元素占据的总宽度（totalWidth）和总高度（totalHeight）的计算公式如下：

plaintext 复制代码

totalWidth = width + margin - left + margin - right
totalHeight = height + margin - top + margin - bottom

这里的width和height已经包含了内边距和边框。

三、如何切换盒模型

在现代浏览器中，可以通过box-sizing属性来切换盒模型。

标准盒模型 ：box-sizing: content-box，这是默认值，使用标准盒模型的计算方式。
IE 盒模型（怪异盒模型） ：box - sizing: border - box，使用 IE 盒模型的计算方式，即width和height包含内容区域、内边距和边框。例如：

css 复制代码

div {
    box - sizing: border - box;
    width: 200px;
    height: 100px;
    padding: 10px;
    border: 2px solid black;
}

此时，无论怎么改变内边距和边框的大小，元素的总宽度和总高度始终是200px和100px，内容区域的大小会相应调整。

理解 CSS 盒模型与 IE 盒模型的区别以及如何切换它们，对于精确控制页面布局、处理不同浏览器兼容性问题非常重要。在实际开发中，合理运用盒模型可以创建出各种复杂而美观的页面布局。