盒子模型是针对于HTML的每一个元素的，每一个元素咱们都可以把它叫做盒子，他都符合盒子模型的一个语法特点。
盒子有三大部分：
盒子壁 border
内边距 padding
盒子内容 width+height
盒子模型有四部分：margin+border+padding+(content=width+height)
现在来一个盒子：
div{
height: 100px;
width: 100px;
background-color: red;
}
再加上边框
div{
height: 100px;
width: 100px;
background-color: red;
border: 10px solid black;
}
现在盒子的总宽度就大于100了。
现在再设置内边距：
div{
height: 100px;
width: 100px;
background-color: red;
border: 10px solid black;
padding: 10px;
}
那，内容放在哪里？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
div{
height: 100px;
width: 100px;
background-color: red;
border: 10px solid black;
padding: 100px;
}
</style>
<title></title>
</head>
<body>
<div>
前端前端前端前端前端前端前端
前端前端前端前端前端前端前端
</div>
</body>
</html>
这就是padding的意思。
如果再设置margin，
他的周围就有空间了。
你在浏览器检查种也可以看，鼠标移到哪里，哪里就变色。
现在又两个套在一起的盒子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
.demo1{
width: 100px;
height: 100px;
background-color: red;
}
.demo2{
width: 100px;
height: 100px;
background-color: black;
}
</style>
<title></title>
</head>
<body>
<div class="demo1">
<div class="demo2">
</div>
</div>
</body>
</html>
里面的盒子作为外面盒子的内容，两个盒子都是100，所以应该是里面的应该覆盖外面的，他俩依然是嵌套关系，之不过一样大而已。
现在我在外面demo1盒子上加一个border: 10px solid green;
是不是应该这样：
我在给外面的盒子加一个padding: 100px;
就变成了这个样子：里面的盒子作为内容区，只能再内容区里出现。
所以你想把两个盒子，一个盒子居中在一个盒子的里面，你可以
让两个盒子的内容一样大，在外面的盒子套padding，四周都是一样的，就居中了。
这个padding有四个值，你写一个100等于写四个100，所以我也可以写四个不同的数字。
padding: 100px 150px 200px 250px;
这四个数字就是顺时针的上右下左。
那，我要是写三个数，他代表什么？
padding: 100px 150px 200px;
肯定有一个值代表两个方向是吧！
所以是中间的那个值代表左右两个方向吧，你看到的每一个页面都是左右都是等距的吧，所以这样更合理一些！
那，两个值呢？
第一个是上下，后面的是左右吧！
这样你就可以只设置某一个方向，比如只设置上上padding: 100px 0 0 0 ;
或者是padding-top: 100px;都是一样的。
padding-top: 100px;
padding-left: 100px;
padding-right: 100px;
margin: ;也是一样的，盒模型但凡是设置四个方向的值，都是一样的。
现在咱么写一个盒模型，求他有色部分实际的高和宽，
div{
width: 100px;
height: 100px;
background-color: red;
border: 10px solid black;
padding: 10px 20px 30px;
margin: 10px 20px;
}
算算吧。
Margin看都不看，上面的border加10，padding加10；下面的padding加30，border加10，就是10+10+100+30+10=160吧，宽高都是160px。