盒模型是css中的重要概念，可以把所有HTML元素都看作盒子，每个盒子由四个部分组成。分别是内容区（content），内边距（padding），外边距（margin），边框（border），下面来详细介绍这四部分。
1.内容区（content）
指的是元素内部的内容，例如文本、图像等。
2.内边距（padding）
指的是内容区域和边框之间的区域。
//简写
padding: 5px 10px 15px 20px;
//相当于上内边距为5px，右内边距为10px，下内边距为15px，左内边距为20px
padding: 5px 10px 15px;
//相当于上内边距为5px，左右内边距为10px，下内边距为15px
padding: 5px 10px;
//相当于上下内边距为5px，左右为10px
padding: 5px;
//相当于上下左右内边距为5px
3.外边距（margin）
指的是边框和相邻元素之间的空白区域，用来控制元素与其他元素之间的距离。
//简写
margin: 5px 10px 15px 20px;
//相当于上外边距为5px，右外边距为10px，下外边距为15px，左外边距为20px
margin: 5px 10px 15px;
//相当于上外边距为5px，左右外边距为10px，下外边距为15px
margin: 5px 10px;
//相当于上下外边距为5px，左右为10px
margin: 5px;
//相当于上下左右外边距为5px
4.边框（border）
围绕在内边距和内容外的边框，用来界定元素的边界。
//设置上下左右边框
border: 2px solid red;
border: 2px dotted red;
border: 2px double red;
//可单独设置上下左右边框，例如
border-left:5px solid red;
//其他
border-radius: 5px;
上述是盒模型的组成部分，而对于盒模型来说，有两种分类，一种是标准盒模型，一种是IE盒模型（又称怪异盒模型）。在CSS 中，可以通过 box-sizing 属性来设置使用哪一种盒模型。
默认情况下，box-sizing 属性的值为 content-box，也就是使用 W3C 标准盒模型。如果将 box-sizing 设置为 border-box，则会使用 IE 盒模型。
标准盒模型
其中，标准盒模型总宽度为width+左右边距+左右边框。width设定的是内容宽高，不包括padding和border。
例如：{
box-sizing: content-box;
width: 300px;
height: 100px;
padding: 5px;
border: 5px solid gray;
}
总宽度为5x2+5x2+300=320px；总高度为5x2+5x2+100=120px；内容区宽度为300px；内容区高度为100px
IE盒模型
IE盒模型总宽度为width。width包括了padding和border值。
例如：{
box-sizing: border-box;
width: 300px;
height: 100px;
padding: 5px;
border: 5px solid gray;
}
总宽度为300px；总高度为100px；内容区宽度为300-5x2-5x2=280px；内容区高度为100-5x2-5x2=80px
margin纵向重叠问题
margin 纵向重叠取重叠区最⼤值，不进⾏叠加
margin 负值问题
- margin-top 和 margin-left 是负值，元素会向上或者向左移动
- margin-right 负值，右侧元素左移，⾃身不受影响
- margin-bottom 负值，下侧元素上移，⾃身不受影响
CSS 盒模型描述了文档中的元素在网页布局中所占的位置和大小。每个盒子不仅有自己的尺寸和位置，还会影响其他盒子的大小和位置，并且还会存在margin重叠和负值的问题。
因此，对于前端页面布局来说，准确理解 CSS 盒模型非常重要。简而言之，CSS 盒模型决定了网页上各个元素的排列方式和相互关系。灵活地运用CSS盒模型是构建网页布局的基础之一。
