當你的瀏覽器展現乙個元素時，這個元素會佔據一定的空間。這個空間由四部分組成。
中間是元素呈現內容的區域。這個區域的外面是內邊距。再外面是邊框。最外面的是外邊距，外邊距將該元素與其它元素分開。
內邊距，邊框和外邊距在元素的上、右、下、左都可以有不同的大小。所有這些大小值都可以為0。
顏色
內邊距總是跟元素的背景色一樣，所以當你設定背景色時，你會發現背景色在元素本身和內邊距上都生效了。外邊距總是透明的。
標準盒模型與怪異盒模型
對比兩種模型的區別
標準盒模型（w3c盒子模型），設定的width或height是對 實際內容（content）的width或height進行設定，內容周圍的border和padding另外設定，即盒子模型的width（height）=設定的content的寬高+padding+border+margin
注：除內容content外，其他為上下左右都有
怪異盒模型（ie盒子模型），設定的width或height是對 實際內容（content）+內邊距（padding）+邊框（border）之和的width和height進行設定的，其盒模型的width（height）=設定的width（height）+外邊距margin
可嘗試對父元素使用內邊距，對子元素使用外邊距
CSS 盒子模型（標準盒模型和怪異盒模型）
所謂盒子模型 box model 就是把 html 頁面中的元素看作是乙個矩形的盒子，也就是乙個盛裝內容的容器。每個矩形都由元素的內容 content 內邊距 padding 邊框 border 和外邊距 margin 組成。所有的文件元素 標籤 都會生成乙個矩形框，我們稱為元素框 element ...
標準盒模型 怪異盒模型
盒子模型的組成 盒子模型一般由 內容 content 邊框 border 左右外邊距 margin left margin right 左右內邊距 padding left padding right 這些部分組成。css中盒子模型分為兩種 w3c標準盒模型和ie標準盒模型 標準盒子模型 標準盒模型...
標準盒模型 怪異盒模型 彈性盒模型
box sizing content box 標準盒模型 標準盒模型總寬度 border2 padding2 content box sizing border box 怪異模式 怪異盒模型的總寬度 width margin 左右 width已經包含了padding和border值 flex dir...