box-sizing屬性：content-box（default），border-box。
content-box，border和padding不計算入width之內
border-box，border和padding計算入width之內，其實就是怪異模式了~
盒模型一共有兩種模式，一種是
標準模式（strict mode）
，另一種就是
怪異模式（quirks mode）。
如果doctype缺失則在
ie6，ie7，ie8
下將會觸發
怪異模式
。對於擁有doctype宣告的網頁，什麼瀏覽器採用何種模式解析，這裡有一張詳細列表可參考：
在標準模式下的盒模型如下圖所示，盒子總寬度/高度=width/height+padding+border+margin
標準模式盒模型
在怪異模式下的盒模型如下圖所示，盒子的總寬度和高度是包含內邊距padding和邊框border寬度在內的，盒子總寬度/高度=width/height + margin = 內容區寬度/高度 + padding + border + margin;
怪異模式盒模型
在js中
document物件有個屬性compatmode
,它有兩個值：
backcompat 對應quirks mode
css1compat 對應strict mode
盒模型與box sizing
盒模型這個詞我們經常聽到過，不過沒有細細的了解。其實我們平常都有常用盒模型就是w3c標準的盒模型，標準盒模型的是height width pading border margin,這樣就組成乙個盒模型。盒模型分為2種 他們不同之處就是計算內容的寬高不同，ie盒模型寬度是包括width pading ...
盒模型 box sizing 屬性
css3增添了盒模型 box sizing 屬性，box sizing屬性值 可以有下面三個值 content box 預設值，讓元素維持w3c的標準盒模型。元素的寬度 高度 width height 所佔空間 等於元素邊框寬度 border 加上元素內邊距 padding 加上元素內容寬度 高度 ...
標準盒模型與怪異盒模型
1 盒子模型 box model 在html中，可以把元素看做盒子，盒子包括 實際內容 content 內邊距 padding 邊框 border 外邊距 margin 2 標準盒模型與怪異盒模型 對比兩種模型的區別 1.標準盒模型 標準盒模型 w3c盒子模型 設定的width或height是對 實...