css盒模型简介

盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css所有元素定义都可以像一个盒子一样拥有外形和空间。

盒模型从里到外包括：内容区content(a)、内填充padding(b)、盒子边框border(c)、盒子的外边距margin(d)

padding是控制盒子和内容之间的距离,padding值会把盒子撑大。如果想要盒子保持原有的大小，需要在宽高的基础上减掉padding的值。

给padding设置一个值是代表四周；设置两个值代表上下 、左右方向；设置三个值代表上、左右、下；设置四个值代表上、下、左、右；注：是按照顺时针方向来计算的。padding不能设置负值。也不会对背景图造成影响。

margin是控制盒子和盒子之间距离的。margin的值不影响盒子的大小。

margin添加方向值跟padding用法一样。

但是当两个盒子之间设有两个margin值的时候，间距大的会覆盖间距小的值，左右的值会叠加，上下的值回覆盖。