前端和盒模型包括兩種 分別是w3c盒模型和ie盒模型
w3c盒模型包括content、padding、border、margin 其中width = content
ie盒模型包括content、padding、border、margin 其中width = content+padding+border
在之後後來w3c在css3中新增了box-sizing的樣式 屬性包含content-box和border-box也就是box-sizing:content-box就是預設(在設定時候)的樣式（w3c盒模型）box-sizing: border-box（ie盒模型）是width包含了content+padding+boder。
（1）標準盒模型 content-box 元素的總寬度width=content+padding+border
<
!-- 標準盒模型 --
實際元素的寬度為：width=100+20+10 = 130
實際元素的高度為：height=100+20+10 = 130
（2）ie怪異盒模型 box-sizing: border-box 元素的總寬度width=width（用樣式指定的寬度）
context=設定是元素寬度-border-padding
<
!-- 怪異盒模型 --
實際元素的寬度為：width=200
實際元素的高度為：height=200
標準盒模型和怪異（IE）盒模型
盒子模型的本質就是乙個盒子，是乙個包圍html元素的空間，包括 content,border,margin,padding 盒模型分為標準盒模型和怪異 ie 盒模型兩種 標準盒模型的計算為 標準盒模型的寬度 width 左右margin 左右padding 左右border 怪異盒模型的計算為 怪異...
css盒模型 標準盒模型 怪異盒模型
css 盒子模型 box model 每個html元素都可以看作是乙個盒子，父元素和子元素的關係就行大盒子裡放了個小盒子，兄弟元素就像在大盒子平放了兩個小盒子。盒模型包括 外邊距 margin 邊框 border 內邊距 padding 實際內容 content 四個屬性。由於目前大部分主流的瀏覽器...
標準盒模型和怪異盒模型
ie盒模型 怪異盒模型 和標準盒模型的區別就是，ie盒模型中width和height除了content區域外，還包含padding和border。盒子的總寬度為乙個塊的總寬度 width margin 左右 即width已經包含了padding和border值 在標準盒模型下，width和heigh...