CSS之盒子模型
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用，CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容，盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
不同部分的说明：
- 外边距（margin）清除边框外的区域，外边距是透明的。
- 内边距（padding）清除内容周围的区域，内边距是透明的。
- 边框 （border）围绕在内边距和内容外的边框。
- 内容区（content）盒子的内容，显示文本和图像。
关于边框大小
设置一个数值的话，上下左右都会以此大小来作为边框大小
设置2个数值的话，第一个数值会作为上下边框大小，第二个数值会作为左右的边框大小
设置3个数值的话，第一个数值会作为上边框大小，第二个数值会作为左右的边框大小，第三个数值会作为下边框大小
设置4个数值的话，4个大小会顺时针作为上右下左的边框大小
和边框大小一样边框的颜色，内边距（padding），外边距（margin）也遵循这样的规律
细心的同学会发现我上面没有写边框颜色，因为一般浏览器会默认边框颜色和边框大小
盒子大小的计算
影响盒子大小的部分：
- 盒子本身大小
- 边框大小
- 内边距
盒子高度=内容区高度+上下内边距+上下边框大小
盒子宽度=内容区宽度+左右内边距+左右边框大小
margin可以为负值吗?
margin可以为负值！
这里我设置下外边距为-50px，下面的div会覆盖上面的div50个像素
我设置左外边距为-50px，黄色的div向左移动了50个px
垂直外边距的重叠
如果黄色的下外边距设置100px，绿色上外边距设置为100px，他们之间的高度会是200px吗？正确的答案是100px，如果两个边距大小不一样的话，则两个之间的距离是那个较大的边距，而非两边距数值的和。（兄弟之间）
如果父子元素相邻，则子元素的外边距会给父元素，相当与给父元素设置外边距（垂直方向上）