CSS：盒子模型

盒子是什么？

盒子可以理解为我们日常使用的快递盒，里面有个电视机，整个快递盒放到一个房间的左上角。我们用俯视角看，快递盒里面电视所占的空间，就叫内容区（content），电视与盒子四面之间的空间（padding），盒子的四个面（border），盒子外面与其他盒子或者墙壁距离就是外边距（margin）。

为什么CSS要用盒子这个概念？

一旦把所有HTML元素变成一个个矩形盒子，并且我们能控制盒子的大小和位置，那在整个网页的布局就会方便很多。第二个优点是，统一了所有元素的定位和改变标准，如果每个元素的大小颜色定位方法都不一样，那么很难记忆，如果一个color能改变所有元素的颜色，那么学习成本就低很多了。可以想象，如果房间里扔的是各种形状的东西，那么想把他们摆放整齐很难，而且有些不规则的不方便设置大小，但是所有东西都装进箱子，那在房间里就很好摆放了。

为什么盒子默认在网页的左上角？

因为文档流，HTML页面像打印机，从左到右，从上到下，先写的在左上角，然后元素默认依据在html文件中的顺序依次布局，所以盒子也会默认出现在页面的左上角。

盒子四个因素有什么要注意的？

这四个因素都有背景颜色宽度，除了内容区，其他三个因素还能分别设置四个面的属性。
外边距可以为正也可以为负，左和上是挤自己本身，下右是挤别人，即调节下和右的值，别的元素会动。