盒模型：
盒子模型是針對於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。