一、什么是盒子模型？
盒子模型，顾名思义，盒子就是用来装东西的，它装的东西就是 HTML元素的内容。或者说这个盒子模型就是用来做页面布局的，其实就是我们做布局的一个思想，我们称它是盒模型
二、盒子模型的组成部分
内容区 content + 填充补白（里面的） + padding（内边距） + margin（外边距）+border（边框）
三、盒子模型的相关元素
1、margin的使用方法
解释：围绕在元素边框的空白区域是外边距。被称为边界/边距。
• margin-top 上外边距
• margin-right 右外边距
• margin-bottom 下外边距
• margin-left 左外边距
属性值四种方式：
方式1
margin:10px 5px 15px 20px;
上外边距是 10px
右外边距是 5px
下外边距是 15px
左外边距是 20px
方式 2
margin:10px 5px 15px;
上外边距是 10px
右外边距和左外边距是 5px
下外边距是 15px
方式 3
margin:10px 5px;
上外边距和下外边距是 10px
右外边距和左外边距是 5px
方式4
margin:10px;
4个方向外边距都是 10px
2、padding的使用方法
解释; 元素的内边距在边框和内容区之间是内边距，也称为补白/填充。
• padding-top 上内边距
• padding-right 右内边距
• padding-bottom 下内边距
• padding-left 左内边距
属性值四种方式：
四个值： 上 右 下 左
三个值： 上 左右 左
两个值： 上下 左右
一个值： 四个方向
四、标准盒子模型的计算方法
高 = 上下border + 上下margin + 上下padding + height
宽 = 左右border + 左右margin + 左右padding + width
列如：一个盒子它的border是2px，padding是15px，content高是50px，宽是100px。
则高是：2border + 2 padding + 2高 = 22px + 215px +50px = 84px
宽是：2border + 2padding + 2高 = 2X2px + 2X15px +100px = 134px