盒子模型的組成：
盒子模型一般由：內容（content）、邊框（border）、左右外邊距（margin-left+margin-right）、左右內邊距（padding-left+padding-right）這些部分組成。
css中盒子模型分為兩種：w3c標準盒模型和ie標準盒模型
標準盒子模型
標準盒模型中，內容區域是由width屬性設定的，而內容周圍的padding和margin是另外計算的。
width/height + padding+border+margin = 總長
ie標準盒模型（怪異盒模型）
怪異盒模型中，瀏覽器的width屬性不是內容的寬度，而是內容+內邊距+邊框的總和；
width/height + margin = 總長（因為在width中已經包含了 內容的寬度+內邊距+邊框的寬度）
什麼是「怪異盒模型」
怪異盒模型與標準盒模型的區別
用途：標準盒子模型主要用於pc端，怪異盒子模型主要用於手機端。
原理：標準盒子模型的大小是由內到外的，由內部決定外部的大小；而怪異盒模型是由外而內的。
標準盒模型 怪異盒模型 彈性盒模型
box sizing content box 標準盒模型 標準盒模型總寬度 border2 padding2 content box sizing border box 怪異模式 怪異盒模型的總寬度 width margin 左右 width已經包含了padding和border值 flex dir...
css盒模型 標準盒模型 怪異盒模型
css 盒子模型 box model 每個html元素都可以看作是乙個盒子，父元素和子元素的關係就行大盒子裡放了個小盒子，兄弟元素就像在大盒子平放了兩個小盒子。盒模型包括 外邊距 margin 邊框 border 內邊距 padding 實際內容 content 四個屬性。由於目前大部分主流的瀏覽器...
標準盒模型和怪異盒模型
ie盒模型 怪異盒模型 和標準盒模型的區別就是，ie盒模型中width和height除了content區域外，還包含padding和border。盒子的總寬度為乙個塊的總寬度 width margin 左右 即width已經包含了padding和border值 在標準盒模型下，width和heigh...