1.盒模型和怪異盒模型
標準盒模型
一、標準盒模型類比
當我們在學習H5前端的時候，首先應該瞭解的是盒模型的結構，這樣在寫頁面的時候纔不會結構不清除，導致屬性設置起來不明白，只是試出來，卻不懂底層的原理。
首先可以先在html中寫個div，然後給div加上width，height ，background；設置好之後在谷歌瀏覽器運行打開。
會看到如下的界面：
這個裏面就會出現後下角這個div的盒子模型。萬物皆盒子，每個標籤可以看成一個盒子。每個標籤寫在html裏面，然後都可以通過瀏覽器的這裏去看它的盒子模型，有的是有margin的，有的沒有。
盒模型就是包含：margin、padding、border、內容區域
理解盒模型：
我們將盒子比喻成一個家，家裏有院子和一個房子。
內容區域：(就是你家裏的這個房子)，設置width、height的區域，內容只能寫在設置寬高的區域裏面。
padding:(就是你家的院子，即就是你家的房子離你家的外牆的距離)border和內容區域的距離，稱爲內邊距。
border: (就是你家的圍牆) ，稱爲邊框。
margin: (就是你家的圍牆和別人家的圍牆的距離)，稱爲外邊距。
二、padding
由於佈局的時候是從左到右，從上到下。所以padding就是將內容向下或者向右擠。
隨着內容的向右或向下，盒子的邊界也會相應的移動。（這就相當於你家的裏面的房子不變，但是院子變大了，那圍牆就得相應的變大）。
我們可以利用padding來讓內容遠離自己的盒子邊界，從而實現兩個盒子內容之間的距離的變化。
都是順時針的方向寫值。
三、margin
margin可以改變盒子與盒子之間的距離。
margin佈局也遵循從上到下，從左到右的原則。
margin-top:會將自身盒子向下推
margin-left:會將自身盒子向右推，
margin-right:會與將盒子同行排列的同級元素向右推。
margin-bottom:會將相鄰的同級元素向下推。
嵌套結構下：子級通過margin來改變子級在父級中的位置，margin-left指的是子級左邊框到父級內容區域左邊界的距離。
其他方向也是子級邊框到父級內容區域邊界之間的距離
四、嵌套結構下當父級沒有明確的上邊界時
嵌套結構下，當父級沒有明確的上邊界時(border，padding)，這時候子級設置margin-top的話，就會傳遞給父級，帶着父級一起向下移動。
解決方法：給父級加上邊界。
五、同級塊在設置margin的時候，各個塊的margin會不會疊加的問題。
六、怪異盒模型與標準盒模型對比
盒子在設置了box-sizing:border-box;後，盒子就成普通盒模型變成了怪異盒模型了。
怪異盒模型在設置width和height後，再去設置把border、padding都是將內容區域變小，不會影響盒子的整體大小，盒子的整體大小還是前面設置的width和height。