CSS盒子模型和盒子阴影的理解

在CSS中盒模型是最重要的章节之一，在真正做web前端都会经常用到盒模型，所以初学者必须要掌握盒模型。

所有HTML元素都可以看作一个盒子，在CSS中盒模型这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，用来封装它周围的元素,包括：

内边距，外边距，边框，填充和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。看一张图片可以很好的理解盒模型。

元素内容（content）、 
内边矩（padding-top、padding-right、padding-bottom、padding-left）：内容到边框的距离。
边框（border-top、border-right、border-bottom、border-left）：可以看成是盒子的厚度。
外边距（margin-top、margin-right、margin-bottom、margin-left）：盒子与盒子或盒子与边界的距离。

其中padding和margin的赋值都有四中方式，取值是按照顺时针方向取值，情况分别是：

padding: 100px; （上下左右内边距是100px）
padding: 100px 50px;（上下内边距是100px,左右内边距都是50px）
padding: 100px 50px 120px;（上边距100px，左右边距50px，下边距120px）
padding: 100px 50px 120px 60px;（上边距100px，右边距50px，下边距120px，左边距60px）

内边距、外边距、边框的数值根据具体要求设置，如果不设置将会由默认数值代替。如果直接写一个宽度和高度时，那只是设置了内容区域