在面試中，我們常被問到css的盒模型，那麼今天我們就來聊聊這個東東。
概念：
頁面渲染是，dom元素所採用的布局模型，可以通過box-sizing來進行設定。
分類：
標準盒模型
ie盒模型
width 和 height 指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸，但是會增加元素框的總尺寸。
width 和 height 指的是內容區域+border+padding的寬度和高度。
圖1：來自ie盒模型
圖2：來自標準盒模型
如何獲取盒模型對應的寬高
var odiv = document.getelementsbyclassname('box')[0]
console.log( window.getcomputedstyle(odiv).width)
CSS盒模型理解
盒模型 由外到內的公式表示 box margin border padding content。content不是屬性，為內容，以文字或節點存在占用位置。理解 快遞包裹 兩個快遞包裹間的距離就是margin，快遞包裹的紙皮就是border，開啟快遞包裹，填充物料就是padding，把填充物料開啟看到...
css盒模型理解知記
tip 1.width border padding 內邊距 margin 外邊距 jquery的outerwidth 取得的是 width padding left padding right border left border right outerwidth true 取得的是outerwi...
理解CSS彈性盒模型flex
css3引入了一種新的布局模型 flex布局。flex是flexible box的縮寫，一般稱之為彈性盒模型。和css3其他屬性不一樣，flexbox並不是乙個屬性，而是乙個模組，包括多個css3屬性。flex布局提供一種更加有效的方式來進行容器內的專案布局，以適應各種型別的顯示裝置和各種尺寸的螢幕...