盒模型：由外到內的公式表示：box = margin + border + padding + content。content不是屬性，為內容，以文字或節點存在占用位置。
理解-快遞包裹：兩個快遞包裹間的距離就是margin，快遞包裹的紙皮就是border，開啟快遞包裹，填充物料就是padding，
把填充物料開啟看到了你的物品，那就是content。這樣理解是不是特別容易呢？
型別：標準盒模型和怪異盒模型，宣告：box-sizing，不具有繼承性。
標準盒模型：content-box標準盒模型是w3c規範的標準，由
margin + border + padding + content組成。與上述提到的公式一模一樣，節點的width/height只包含content，不包含padding和border。
節點的尺寸計算公式如下。
節點的寬高計算公式如下。
怪異盒模型：borde-box怪異盒模型又名
ie盒子模型，是iexplore制定的標準，由margin + content組成。與上述提到的公式一不同，節點的width/height包含border、padding和content。
節點的尺寸計算公式如下。
節點的寬高計算公式如下。
在iexplore中，若html文件缺失宣告則會觸發怪異盒模型兩者區別通過**演示可能會更清晰，
width和height的範圍也一目了然，其實兩者區別在於width和height包不包含border和padding。 CSS盒模型的理解
在面試中，我們常被問到css的盒模型，那麼今天我們就來聊聊這個東東。概念 頁面渲染是，dom元素所採用的布局模型，可以通過box sizing來進行設定。分類 標準盒模型 ie盒模型 width 和 height 指的是內容區域的寬度和高度。增加內邊距 邊框和外邊距不會影響內容區域的尺寸，但是會增加...
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布局提供一種更加有效的方式來進行容器內的專案布局，以適應各種型別的顯示裝置和各種尺寸的螢幕...