淺談CSS盒子模型

時間 2021-01-17 標籤 css 盒子模型 IE盒子瀏覽器兼容性

關於盒子模型

CSS盒子模型，是在網頁設計中經常使用到的CSS技術，也是一種開發的思維模型。

目前主流的瀏覽器對於盒子模型的標準闡釋和渲染效果有所不同，Google Chrome 等所使用的是標準盒子模型，而 IE 使用的則是「非標準」盒子模型，下面以IE盒子模型來稱。

標準盒子模型

標準盒子模型以W3C標準的盒子模型爲例：

CSS盒子模型規定了元素框處理元素內容（Content）、內邊距（Padding）、邊框（Border） 和 外邊距（Margin） 的方式。

由上圖可知，盒子的寬度（Width）爲 內容區寬度（Content-Width），高度則爲 內容區高度（Content-Height）。

IE盒子模型

然而 IE 的盒子模型跟上面不同，以 IE 6 爲例：

由上圖可知，此時盒子的寬度變爲整個容器的寬度，即內容、內邊距、邊框、外邊距四者加起來的寬度，而高度也爲其四者的高度之和。

關於瀏覽器兼容性

W3C指出，一旦爲頁面設置了恰當的 DTD，大多數瀏覽器都會按照上面的圖示來呈現內容。然而 IE 5 和 6 的呈現卻是不正確的。根據 W3C 的規範，元素內容佔據的空間是由 width 屬性設置的，而內容周圍的 padding 和 border 值是另外計算的。不幸的是，IE5.X 和 6 在怪異模式中使用自己的非標準模型。這些瀏覽器的 width 屬性不是內容的寬度，而是內容、內邊距和邊框的寬度的總和。

雖然有方法解決這個問題。但是目前最好的解決方案是迴避這個問題。也就是，不要給元素添加具有指定寬度的內邊距，而是嘗試將內邊距或外邊距添加到元素的父元素和子元素。

選擇W3C還是IE標準

其實兩者各有好處和短處，各方的看法也各不相同。無論如何，只有在合適的環境下采用合適的渲染方式，纔能有利於頁面的基礎開發。

避免觸發IE盒模型：
使用<!DOCTYPE html>聲明，讓IE採用W3C盒子模型。

選擇採用IE標準：
通過CSS的 box-sizing 屬性來指明。其有兩個可選值，一個是默認的 content-box，另一個是 border-box。如果選用後者，盒子模型則將按 IE標準進行處理。