前言： 什么是CSS盒模型？盒模型的构造？

在前端开发中，CSS 盒模型是一种非常基础且核心的概念，它描述了文档中的每个元素被框架处理的方式。

---- 打开浏览器开发者工具，查看Elements右侧下的Styles底部。

CSS盒模型的构造

盒模型为页面上的每个元素生成一个矩形盒子，并决定其大小、位置和与其他元素的关系。

CSS盒模型主要由以下几个部分组成：

1. 内容区域（Content） ：这是元素的实际内容区，可以包含文本、图片或其他媒体内容。其尺寸由width和height属性直接设置。

2. 内边距（Padding） ： 内边距是内容区域周围的空间，它隔开内容与边框。内边距不会影响内容区域的尺寸，但会增加元素的总尺寸。内边距的大小可以通过padding-top、padding-right、padding-bottom、padding-left来分别设置。

3. 边框（Border） ：边框环绕在内边距之外，为元素提供视觉边界。边框的厚度由border-width设置，并且也会影响元素的总尺寸。

4. 外边距（Margin） ：外边距是元素与其它元素之间的空间。外边距不会直接影响元素自身的尺寸，但它影响元素与其他元素的距离。可以通过margin-top、margin-right、margin-bottom、margin-left来分别设置。

盒模型的类型

CSS 提供了 2 种盒模型的处理方式：

1、标准盒模型（Content-box）：

在这个模型中，元素的宽度和高度只包括内容区。边框和内边距额外增加到元素的总尺寸上。

2、IE盒模型（Border-box）：

在这个模型中，元素的宽度和高度包括内容区、边框和内边距。这意味着如果你设定了一个元素的宽度和高度，这个尺寸将包含所有可视部分。

如何切换盒模型？

可以使用 CSS 的 box-sizing 属性来切换元素的盒模型处理方式：

/* 应用标准盒模型 */
box-sizing: content-box;

/* 应用IE盒模型 */
box-sizing: border-box;

通常，开发中更喜欢使用 border-box，因为元素尺寸的计算更直观，特别是在进行响应式设计时。