標準盒模型
一、標準盒模型模擬
當我們在學習h5前端的時候，首先應該了解的是盒模型的結構，這樣在寫頁面的時候才不會結構不清除，導致屬性設定起來不明白，只是試出來，卻不懂底層的原理。
首先可以先在html中寫個div，然後給div加上width，height ，background；設定好之後在谷歌瀏覽器執行開啟。
會看到如下的介面：
這個裡面就會出現後下角這個div的盒子模型。萬物皆盒子，每個標籤可以看成乙個盒子。每個標籤寫在html裡面，然後都可以通過瀏覽器的這裡去看它的盒子模型，有的是有margin的，有的沒有。
盒模型就是包含：margin、padding、border、內容區域
理解盒模型：
我們將盒子比喻成乙個家，家裡有院子和乙個房子。
內容區域：(就是你家裡的這個房子)，設定width、height的區域，內容只能寫在設定寬高的區域裡面。
padding:(就是你家的院子，即就是你家的房子離你家的外牆的距離)border和內容區域的距離，稱為內邊距。
border: (就是你家的圍牆) ，稱為邊框。
margin: (就是你家的圍牆和別人家的圍牆的距離)，稱為外邊距。
二、padding
由於布局的時候是從左到右，從上到下。所以padding就是將內容向下或者向右擠。
隨著內容的向右或向下，盒子的邊界也會相應的移動。（這就相當於你家的裡面的房子不變，但是院子變大了，那圍牆就得相應的變大）。
我們可以利用padding來讓內容遠離自己的盒子邊界，從而實現兩個盒子內容之間的距離的變化。
padding:簡寫屬性後面的值；
padding：10px； 1個值：代表四個方向設定相同的內邊距;
padding：10px 20px； 2個值：上下 左右
padding：10px 20px 30px； 3個值：上 左右 下
padding：10px 20px 30px 40px； 4個值：上 右 下 左。
都是順時針的方向寫值。
三、margin
margin可以改變盒子與盒子之間的距離。
margin布局也遵循從上到下，從左到右的原則。
margin-top:會將自身盒子向下推
margin-left:會將自身盒子向右推，
margin-right:會與將盒子同行排列的同級元素向右推。
margin-bottom:會將相鄰的同級元素向下推。
巢狀結構下：子級通過margin來改變子級在父級中的位置，margin-left指的是子級左邊框到父級內容區域左邊界的距離。
其他方向也是子級邊框到父級內容區域邊界之間的距離
四、巢狀結構下當父級沒有明確的上邊界時
巢狀結構下，當父級沒有明確的上邊界時(border，padding)，這時候子級設定margin-top的話，就會傳遞給父級，帶著父級一起向下移動。
解決方法：給父級加上邊界。
（一般專案中，我們如果希望子級和父級之間頂部有一定的間隙，優先使用為父級設定上padding來解決，防止margin-top傳遞問題發生。
margin-top傳遞問題一般發生在高階瀏覽器上，ie8以下瀏覽器無此問題。）
五、同級塊在設定margin的時候，各個塊的margin會不會疊加的問題。
block塊 : 預設文字流，width是和父級相同；margin豎直方向會重疊（一倍），水平方向會疊加（2倍）。
float塊：尺寸由內容撐開；四個方向的margin會疊加。
定位塊： fixed，尺寸由內容撐開，四個方向的margin會疊加
absolute,尺寸由內容撐開，四個方向的margin會疊加。
relative，依然具有預設文字流的特性。
怪異盒模型
六、怪異盒模型與標準盒模型對比
盒子在設定了box-sizing:border-box;後，盒子就成普通盒模型變成了怪異盒模型了。
怪異盒模型在設定width和height後，再去設定把border、padding都是將內容區域變小，不會影響盒子的整體大小，盒子的整體大小還是前面設定的width和height。
怪異盒模型：就是設定了寬高之後；不管再設定border和padding，這個盒子都是前面設定的寬高。
標準盒模型：就是設定了寬高之後；再設定了border和padding。這個盒子的整體的寬高就是 開始設定的寬高+padding+border；
所以開始設定的寬高在標準盒模型裡面都是內容的寬高。
怪異盒模型的適用範圍：移動端隨意用，pc端ie8以下不適合用。
正常盒模型和怪異盒模型
首先大概說說正常盒模型和怪異盒模型的區別 1.用途 正常盒模型主要用於pc端，怪異盒模型主要用於手機端。2.原理 正常盒模型的大小是由內到外的，由內部決定外部的大小 而怪異盒模型是由外而內的。舉例說明 以下為正常盒模型，設定兩個div，分別為鞋盒和鞋子 鞋子 鞋子 設定樣式如下 body div c...
標準盒模型和怪異盒模型
ie盒模型 怪異盒模型 和標準盒模型的區別就是，ie盒模型中width和height除了content區域外，還包含padding和border。盒子的總寬度為乙個塊的總寬度 width margin 左右 即width已經包含了padding和border值 在標準盒模型下，width和heigh...
標準盒模型和怪異盒模型
盒子模型眾所周知，這裡先簡單介紹一下。可以看到，在標準盒模型 box sizing content box 下，width和height是內容區域即content的width和height。而盒子總寬度為 在標準模式下，乙個塊的總寬度 width margin 左右 padding 左右 borde...