所有html元素可以看作盒子，在css中，"box model"這一術語是用來設計和布局時使用。
css盒模型本質上是乙個盒子，封裝周圍的html元素，它包括：外邊距（margin）、邊框（border）、內邊距（padding）、實際內容（content）四個屬性。
盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。
這是button
在瀏覽器中檢查元素可得到下圖：
從圖中可以看出:藍色部分（46 x 34.400 )是button的content，綠色的是padding，黃色的是border, 深黃色是margin。
w3c盒子模型(標準盒模型)
根據 w3c 的規範，元素內容佔據的空間是由 width 屬性設定的，而內容周圍的 padding 和 border 值是另外計算的；即在標準模式下的盒模型，盒子實際內容（content）的width/height=我們設定的width/height;盒子總寬度/高度=width/height+padding+border+margin。
ie盒子模型(怪異盒模型)
在該模式下，瀏覽器的 width 屬性不是內容的寬度，而是內容、內邊距和邊框的寬度的總和；即在怪異模式下的盒模型，盒子的（content）寬度+內邊距padding+邊框border寬度=我們設定的width(height也是如此)，盒子總寬度/高度=width/height + margin = 內容區寬度/高度 + padding + border + margin。
建議不要給元素新增具有指定寬度的內邊距，而是嘗試將內邊距或外邊距新增到元素的父元素和子元素。
box-sizing 屬性允許您以特定的方式定義匹配某個區域的特定元素。
box-sizing: content-box;//寬度和高度分別應用到元素的內容框。在寬度和高度之外繪製元素的內邊距和邊框。
box-sizing: border-box;// 為元素設定的寬度和高度決定了元素的邊框盒。就是說，為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。
box-sizing: inherit;// 規定應從父元素繼承 box-sizing 屬性的值。
即box-sizing屬性可以指定盒子模型種類，content-box指定盒子模型為w3c（標準盒模型），border-box為ie盒子模型（怪異盒模型）。
1.實際開發中應用的場景。使用box-sizing: border-box時，可以忽略border的寬度，方便計算盒子大小，使用flex布局進行自適應計算時常用
2.面試碰到border+width問題時，需要多場景的去回答這個問題，先講box-sizing切題，再延伸講盒模型
前端 關於CSS盒模型
矩形區域中各個屬性的取值只有margin可以取負值，只有width和margin可以取auto關鍵字，border不能為百分數，其他屬性都只能取 正的數字或者正的百分數。其中margin和padding設定的值是乙個塊區域的垂直高度，這塊區域的長和寬是隨著內容的width和height變化 而變化的...
前端面試之盒模型
當你對乙個文件進行布局 laying out 時候,瀏覽器引擎會根據css box模型將所有元素描述為乙個盒子,css會決定這些盒子的大小,位置,屬性 顏色,邊框.盒模型分為兩類 ie盒模型和標準盒模型。兩者的區別在於 ie盒模型的width height content border paddin...
前端學習之盒系列模型
盒模型的學習，乙個盒子中的主要屬性有5個 width，height，padding，border，margin 這五個屬性在css中代表的主要含義，weight在css中表示的是內容的寬度，而不是盒子的寬度 height指的是內容的高度，而不是盒子的高度 padding是內邊距的意思 border指...