盒子模型
浏览器在渲染网页时，会将网页中的元素看作是一个个的矩形区域，我们也将其称为盒子
页面中的每一个标签，都可以看做是一个盒子，通过盒子的视角更方便进行布局
CSS 中规定的盒子是由 内容区域 content 、内边距区域 padding 、边框区域 border 、外边距区域 margin 组成的，这就是盒子模型
联想记忆
我们可以把盒子模型联想成快递盒，快递盒子里面装的 东西 就是盒子的 内容 content ，东西与快递盒之间的缝隙就是盒子的 内边距 padding ，快递盒的 厚度 就是盒子的 边框 border 的大小，快递盒与快递盒之间的 距离 就是盒子的 外边距 margin
下面有一张比较形象的网图可以参考：
以 div 盒子为例，看一下标签的盒子模型：
盒子内容区域的宽度和高度
属性 width 和 height 设置的宽高样式，默认设置的是盒子的 内容区域 的大小
盒子边框
可以给盒子的边框设置粗细（边框宽度）、样式、颜色效果：
- 边框粗细：border-width
- 边框样式：border-style（solid 实线、dashed 虚线、dotted 点线）
- 边框颜色：border-color
上面的属性写法是单个样式，一般情况下，最常用的是 连写形式 ，例如：border: 1px solid red;
连写形式就是单个属性取值的连写，各取值之间以 空格 隔开，可以用 bd + 回车键 快速设置默认的盒子边框，再根据自己的需要修改。
上边设置的样式，是给矩形盒子的四条边都设置了相同的样式，有时我们只需要设置其中一条边就可以了，所以我们还可以按照 单方向设置 ，只给盒子指定的某个方向设置单独的边框样式。
比如说，我们要给 150 X 150 的盒子的上边框设置 宽 2px 的黑色虚线 边框：
加深对盒子模型的理解
有这样一个 需求：盒子尺寸 300 X 300，背景浅蓝色，边框 5px 实线 粉色，该如何实现？
问题：了解了盒子的构成，就会知道，我们设置的 width 和 height 是内容的宽高，而设置的边框会撑大盒子 ，300 X 300 是整个盒子的尺寸，那么就会有一个问题：盒子被撑大之后如何能满足现有需求呢？
解决 ： 我们需要了解盒子的实际大小该如何计算，然后再手动减去多余的（手动内减），现阶段，盒子大小的初级计算公式：
- 盒子宽度 = 左边框 + 内容的宽度 + 右边框
- 盒子高度 = 上边框 + 内容的高度 + 下边框
代码实现：
新问题 - 缩放问题：
在调试过程中，我又发现了一个新问题，就是 DPI 问题（DPI 是 dots per inch 的缩写，意思是每英寸的像素数），在电脑的设置中，我发现自己电脑的缩放比是 125% ，这是 W10 系统推荐的缩放，若是不改变缩放，就会出现设置的边框与浏览器显示的数值不一样：
将缩放设置为 100% 之后，再去调试，就会发现设置的边框和显示的数值是一致的：
