概念
所有HTML元素可以看作盒子，在CSS中，"box model"這一術語是用來設計和布局時使用CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：外邊距(margin)，邊框(border)，內邊距(padding)，和實際內容(content)。
藍色的是一個盒子，這是一個元素，這個元素包含內邊距padding，邊框和外邊距。
就像快遞，易碎品外面套一層泡沫，然后再到外層包裹一個箱子，層層包裹?。每個盒子就是為了讓你在布局的時候變的更加好看。
就是讓元素在頁面上面擺放的時候更容易的調整位置和間距，因為內容和內容之間是需要間距的。
一個元素由自身，內邊距和邊框和外邊距組成，來擺放藍色框在頁面中的位置了。
如果把盒子模型看作是一個生活中的快遞，那么內容部分等同于你買的實物，內邊距等同于快遞盒子中的泡沫，邊框等同于快遞盒子，外邊距等同于兩個快遞盒子之間的距離。
Content(內容)? ? ? ? ? 盒子的內容，顯示文本和圖像?
內容文字圖片是實物，然后內邊距，邊框，外邊距。?
<style>/*寬度和高度就是自身的大小，也就是實際內容的大小*/div{width: 100px;height: 100px;background-color: red;}</style>
</head><body>
<div>
</div>這個是頁面中100*100的方塊，這個就是內容的實際大小。
Padding(內邊距)? ? ? 清除內容周圍的區域，內邊距是透明的
設置padding之后盒子變大了，之前盒子多出來的部分就做內邊距的空隙。如果盒子里面沒有內容可以通過寬高來設定。
<style>/*寬度和高度就是自身的大小，也就是實際內容的大小*/div{width: 100px;height: 100px;background-color: red;padding: 50px;}</style>
</head><body>
<div>
</div>
?如果盒子里面有內容，就需要考慮擺放的樣式了。
<style>/*寬度和高度就是自身的大小，也就是實際內容的大小*/div{width: 100px;height: 100px;background-color: red;}</style>
</head><body>
<div>xxxxxxxxxxxx
</div>
<style>/*寬度和高度就是自身的大小，也就是實際內容的大小*/div{width: 100px;height: 100px;background-color: red;padding: 50px}</style>
</head><body>
<div>xxxxxxxxxxxx
</div>
盒子雖然變大了但是內容在往中間擠，中間的內容還是在盒子的左上角，剩下的是內邊距幫你填充的。為了是好看，不讓內容貼著左上角去顯示。內邊距是撐大自身大小來給元素一些空隙，這樣可以更加好的展示。
內容在盒子100px*100px的左上角，如果不希望有這樣的空隙，那么就不需要設置內邊距。
內邊距主要作用是把自身撐大，但是本身的自身只有100px*100px。只是看起來像變大了。
padding一般分為兩個值。上下是一個值，左右是一個值。上下是50px，左右是10px。按照雙值來設定，上下為50px，第二個值為左右。
div{width: 100px;height: 100px;background-color: red;padding: 50px 10px;}</style>
</head><body>
<div>xxxxxxxxxxxx
</div>
Border(邊框)? ? ? ? ? ? 圍繞在內邊距和內容外的邊框?
div{width: 100px;height: 100px;background-color: red;padding: 50px 10px;border: 5px solid;}</style>
</head><body>
<div>xxxxxxxxxxxx
</div>
?Margin(外邊距)? ? ? ? 清除邊框外的區域
<style>/*寬度和高度就是自身的大小，也就是實際內容的大小*/div{width: 100px;height: 100px;background-color: red;padding: 50px 10px;border: 5px solid;margin: 100px;}</style>
</head><body>
<div>xxxxxxxxxxxx
</div>
<style>/*寬度和高度就是自身的大小，也就是實際內容的大小*/div{width: 100px;height: 100px;background-color: red;padding: 50px 10px;border: 5px solid;margin: 100px;}</style>
</head><body>
<div>xxxxxxxxxxxx
</div>
哈哈當前內容的上下左右都有50px 忘記畫右邊的。這個也是元素與元素這件的空隙，也是讓元素好看。?
?兩個并沒有挨宰一起，中間也有空隙，就是通過外邊距處理的。margin也一樣，有兩個值，上下，左右。也可以指定一個方向的值。
![LeetCode 刷題 [C++] 第226題.翻轉二叉樹](http://pic.xiahunao.cn/LeetCode 刷題 [C++] 第226題.翻轉二叉樹)
)
