CSS魔法堂 盒子模型簡介

**：

一、w3c標準的盒子模型　　　　　　　　　　　　　　　　　　　　　　　　　　　　 

二、ie盒子模型　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

三、兩種模型的區別　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

w3c標準盒子模型：

外盒模型

元素空間寬度 = content width + padding + border + margin的寬度

元素空間高度 = content width + padding + border + margin的高度

內盒模型

元素寬度 = content height + padding + border的寬度

元素高度 = content height + padding + border的高度

外盒模型

元素空間寬度 = content width + margin的寬度

元素空間高度 = content height + margin的高度

內盒模型

元素寬度 = content width

元素高度 = content height

四、css3規則——box-sizing　　　　　　　　　　　　　　　　　　　　　　　　　　　

box-sizing有三個值，預設是content-box（表示元素使用w3c盒子模型），而border-box（表示元素使用ie盒子模型），inherit（從父元素上繼承）

瀏覽器支援：ie8開始支援

element

盒子模型是css的基礎，雖然ie一直被大家詬病，但不代表ie盒子模型就比w3c標準盒子模型差，後面我們一起深入學習css3樣式規則box-sizing就明白了。

六、參考　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

CSS魔法堂 盒子模型簡介

一 w3c標準的盒子模型 二 ie盒子模型 三 兩種模型的區別 w3c標準盒子模型 外盒模型 元素空間寬度 content width padding border margin的寬度 元素空間高度 content width padding border margin的高度 內盒模型 元素寬度 c...

CSS魔法堂 盒子模型簡介

本文討論的是塊級盒子 block level box 的盒子模型 box model 一 w3c標準的盒子模型 二 ie盒子模型 三 兩種模型的區別 w3c標準盒子模型 外盒模型 元素空間寬度 content width padding border margin的寬度 元素空間高度 content...

CSS盒子模型簡介

1.基本概念 首先，什麼是盒子模型呢？所有的html元素都可以看作是盒子，顧名思義，就像是對元素進行了乙個包裝，豐富了元素的內容，方便了設計與布局。盒子模型 box model 具體包括了外邊距 margin 邊框 border 內邊距 padding 和內容 content 下面以具體的例項來說明...