在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）
内边距、外边距、边框的数值根据具体要求设置，如果不设置将会由默认数值代替。如果直接写一个宽度和高度时，那只是设置了内容区域的宽度和高度。
width: 100px;
height: 100px;
border: 10px solid red;
padding: 20px;
margin: 20px;
这个盒子的宽度和高度都是200px。
最终元素的总宽度计算公式是这样的：总元素的宽度=内容宽度+左内边距+右内边距+左边框+右边框+左外边距+右外边距
元素的总高度最终计算公式是这样的：总元素的高度=内容高度+上内边距+下内边距+上边框+下边框+上外边距+下外边距
例如10个200*200的盒子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子</title>
<style>
div:first-of-type{width: 100px;height: 100px;border: 10px solid red;padding: 20px;margin: 20px;}
div:nth-of-type(2){width: 60px;height: 60px;border: 50px solid black;padding: 10px;margin: 10px;}
div:nth-of-type(3){width: 50px;height: 50px;border: 45px solid orange;padding: 15px;margin: 15px;}
div:nth-of-type(4){width: 40px;height: 100px;border: 20px solid blue;padding: 5px 20px 5px;margin: 20px;}
div:nth-of-type(5){width: 100px;height: 80px;border: 10px solid yellow;padding: 20px 10px 10px;margin: 20px;}
div:nth-of-type(6){width: 160px;height: 160px;border: 10px solid salmon;padding: 10px;margin: 0px;}
div:nth-of-type(7){width: 160px;height: 160px;border: 10px solid #d330ff;padding: 0px;margin: 10px;}
div:nth-of-type(8){width: 0px;height: 0px;border: 80px solid #63ff91;padding: 10px;margin: 10px;}
div:nth-of-type(9){width: 0px;height: 0px;border: 40px solid #19d4ff;padding: 0px;margin: 60px;}
div:last-of-type{width: 0px;height: 0px;border: 10px solid #08ff0a;padding: 0px;margin: 90px;}
div{float: left}
</style>
</head>
<body>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
</body>
</html>
效果：
盒子阴影标签：box-shadow：inset x-offsety-offset blur-radius color;
inset:内部阴影，如果不设置会默认outset。
x-offset：阴影在水平方向上的位移，正数代表向右，负数代表向左。
y-offset：阴影在垂直方向上的位移，正数代表向下，负数代表向上。
blur-radius：模糊半径，只能是正数，数越大越模糊。
color：阴影的颜色。
代码示例：
<!DOCTYPE html>效果：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
margin: 100px;
}
div:first-of-type{
width: 100px;
height: 100px;
border-radius: 30px;
background-color: yellow;
box-shadow: 50px 50px 0px #ff4a7c;
}
div:last-of-type{
width: 100px;
height: 100px;
border-radius: 30px;
background-color: yellow;
box-shadow: 50px 50px 0px #ff4a7c,100px 100px 0px black;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>
