所有的HTML元素都可以看作是盒子。在CSS中，術語“盒子模型”用於設計和布局。CSS box模型本質上是壹個封裝了周圍HTML元素的盒子，包括邊距、邊框、填充和實際內容。盒子模型允許我們將元素放置在其他元素和周圍元素的邊界之間的空間中。下圖說明了盒子模型:
盒模型和相應區域的組成
箱式模型的組成:
邊距(外部距離)？-清除邊框外的區域，外邊緣是透明的。
邊界？-內側邊緣和內容外側的邊框。
填充(內邊距)？-清除內容周圍的區域，內邊距透明。
內容？-盒子的內容，顯示文本和圖像
以上是html中盒子模型的結構，每個元素都可以被這個盒子模型解析。在開發中，壹個元素的風格表達也是由這個盒子模型的各個部分來表現的。css中對應於樣式的屬性有幾個緯度-
寬度，高度，填充，邊框，邊距.因為這些屬性所代表的壹些盒子模型在不同的瀏覽器中是不同的，所以分為標準盒子模型和怪異盒子模型。
首先，標準箱模型
說明:標準箱型下。
(1)css中的width和height屬性分別表示盒子模型中內容的寬度和高度。
(2)2)CSS中的填充表示盒子模型的填充部分。
(3)css中的邊框表示盒子模型中的邊框部分。
(4) margin in 4)css表示盒子模型中的邊距。
二、怪異的盒子模型(即盒子模型)
說明:在奇怪的盒子模型下
(1)css中的width和height屬性分別表示盒子模型中內容的寬度和高度加上盒子模型中填充和邊框的寬度。
(2)2)CSS中的填充表示盒子模型的填充部分。
(3)css中的邊框表示盒子模型中的邊框部分。
(4) margin in 4)css表示盒子模型中的邊距。
* *段落總結-標準盒子模型和怪異盒子模型的區別* *
從上面可以看出，標準盒子模型和怪異盒子模型的區別完全體現在css中寬度和高度兩個屬性對盒子模型的表現上。
標準盒子模型:寬度/高度= CSS中內容的寬度/高度。
怪異的盒子模型:寬度/高度=寬度/高度+填充css中內容的邊框
結果是:
由於標準盒子模型和怪異盒子模型的存在，當同壹個css代碼作用於同壹個元素時，元素的寬度和高度在不同盒子模型的瀏覽器中是不同的。
第三，css3中盒子尺寸下的盒子模型
語法:(屬性)框大小:？(屬性值)內容框/邊框框/繼承；
盒子尺寸對盒子模型的影響:
(1)當“box-sizing”的值為“content-box”時，css中的寬度就是盒子模型中內容的寬度。此時，它與標準的盒子模型是壹致的。
(2)當“box-sizing”的值為“border-box”時，css中的寬度包含了盒子模型中內容+填充+邊框的寬度。這時候和怪盒模型的表現是壹致的。
摘要:box-sizing屬性允許開發者控制瀏覽器是用標準的盒子模型還是怪異的盒子模型來表示。
盒子尺寸的兼容性:
這個盒子模型的所有內容都已經闡述過了。
最佳解決方案:由於盒子大小的兼容性是ie8或更高版本，您可以使用盒子大小為不需要與ie8或更低版本兼容的項目中的所有元素統壹設置盒子模型。個人推薦:
* {框大小:'邊框-框' }
這樣，只要設置了寬度的寬度，就是這個元素在頁面中的真實寬度。不需要計算填充和邊框對寬度的影響。
對於需要兼容ie8的項目，需要針對不同的瀏覽器添加特定的代碼。或者避免設置具有指定寬度的邊框和填充元素。
相關內容:
1.行中元素之間的水平邊距是兩個元素的邊距之和。
2.塊級元素之間的垂直邊距，？也就是取最大的。
3.嵌套框之間的邊距，即父元素的padding+子元素的margin。
4.margin可以設置為負值。
不同瀏覽器的Css前綴:Element {
-moz-box-sizing:內容盒；
-WebKit-box-size:content-box；
-o-box-sizing:內容盒；
-ms-box-sizing:內容盒；
盒子大小:內容盒；
}
參考:
W3c標準:/CSS ref/css3-pr-box-sizing . html