CSS盒子模型

盒子模型

背景

全部HTML元素均可以看作盒子，它包括：外邊距（margin） + 內邊距(padding) + 內容區域(content);

標註盒子模型：（W3C標準版，谷歌版）

IE非標準盒子模型：（低版本IE，IE5，6在怪異模式中使用本身的非標準模型）

區別：
在IE盒子模型中：寬高 = 內容寬高 + border + paddiing
標準盒子模型中：寬高 = 內容區域寬高

標準化處理方式：
方式一：CSS3樣式box-sizing
box-sizing: content-box|border-box|inherit;
content-box: 寬度和高度分別應用到元素的內容框;
border-box: 爲元素設定的寬度和高度決定了元素的邊框盒.爲元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製.

方式二：
使用HTML5的DOCTYP聲明：<!DOCTYPE>
HTML4版本基於SGML，經過引用DTD聲明標記語言的規則。
HTML5不基於SGML，因此不用引用DTD。

注意問題：
1.外邊距合併
2.瀏覽器給body默認的margin爲8px,所以body並不是指整個頁面，只是Document的一個子元素。