前言： 什么是CSS盒模型？盒模型的构造？
在前端开发中，CSS 盒模型是一种非常基础且核心的概念，它描述了文档中的每个元素被框架处理的方式。
---- 打开浏览器开发者工具，查看Elements右侧下的Styles底部。
CSS盒模型的构造
盒模型为页面上的每个元素生成一个矩形盒子，并决定其大小、位置和与其他元素的关系。
CSS盒模型主要由以下几个部分组成：
-
内容区域（Content） ：这是元素的实际内容区，可以包含文本、图片或其他媒体内容。其尺寸由
width和height属性直接设置。 -
内边距（Padding） ： 内边距是内容区域周围的空间，它隔开内容与边框。内边距不会影响内容区域的尺寸，但会增加元素的总尺寸。内边距的大小可以通过
padding-top、padding-right、padding-bottom、padding-left来分别设置。 -
边框（Border） ：边框环绕在内边距之外，为元素提供视觉边界。边框的厚度由
border-width设置，并且也会影响元素的总尺寸。 -
外边距（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，因为元素尺寸的计算更直观，特别是在进行响应式设计时。
