HTML5學習之盒子模型概念分析

盒子模型是html+css中最核心的基礎知識，理解了這個重要的概念才能更好的排版，進行頁面佈局。

　　(1)盒模型的概念：

　　CSS盒子模型也叫作框模型，具有內容(content)、填充(padding)、邊框(border)、邊界(margin)這些屬性。在CSS中，每個元素都被視爲一個框，而每一個框都有三個屬性：

　　border:元素的邊框(可能不可見)，用於將框的邊緣與其餘框分開;

　　margin：外邊距，表示框的邊緣與相鄰框之間的距離，及相鄰盒子的距離(可理解爲，盒子擺放的時候的不能所有堆在一塊兒，要留必定空隙保持通風，同時也爲了方便取出);

　　padding:內邊距，表示框內容和邊框之間的空間(可理解爲，怕盒子裏裝的東西(貴重的)損壞而添加的泡沫或者其它抗震的輔料)。

　　(2)盒模型的構成：

　　盒模型= content(element) + border+ padding+ margin

　　以下圖所示：

　　(3)兩種盒模型

　　W3C標準 和 IE標準盒子模型

　　在這兩種盒模型中width、height分別表明的值

　　1) 在W3C標準即標準盒模型中，width、height指的是content(element)元素內容的寬、高的大小;

　　2) 在IE標準盒子模型也稱怪異盒模型中，width、height指的是content + border+ padding的大小。

　　(4)標準盒模型與怪異盒模型的轉化：

　　利用box-sizing屬性，屬性值有

　　1)content-box默認值，能夠使設置的寬度和高度值應用到元素的內容框。盒子的width只包含內容content。

　　2) border-box 轉化成的怪異盒模型，轉化後的width、height指的是content + border+ padding的大小。

　　(5)兩種盒模型的優缺點

　　標準盒模型的優勢：

　　css樣式中元素使用標準盒模型，width能直接表示出content內容的大小，不需計算。

　　缺點：

　　1)當給元素添加border和padding、margin時，width與height都要減去相應的值。

　　2)當設置了margin時存在margin相關的問題。

　　怪異盒模型的優勢：

　　1)在網站設計稿中兩處整個部分的寬高後直接把width與height的值設置成最外部的寬高，再根據設計稿直接加padding、margin、border，不用再修改width和height的值。

　　2)在網站中的某部分製做鼠標懸停放大等動態變化的寬度時，把元素設置成怪異盒模型能夠消除對相鄰的元素位置的影響。

　　缺點：存在兼容性問題，只適用於IE5/IE6