CSS教程之盒模型

時間：2024-10-17 20:14:55 CSS

CSS教程之盒模型

　　如果想熟練掌握DIV和CSS的布局方法，首先要對盒模型有足夠的了解。每個HTML元素都可以看作一個裝了東西的盒子，盒子里面的內容到盒子的邊框之間的距離即填充（padding），盒子本身有邊框（border），而盒子邊框外和其他盒子之間，還有邊界（margin）

　　1.盒模型

　　填充、邊框和邊界都分為“上右下左”四個方向，既可以分別定義，也可以統一定義。

　　CSS內定義的寬（width）和高（height），指的是填充以內的內容范圍，因此一個元素：

　　實際寬度=左邊界左邊框左填充內容寬度（width）右填充右邊框右邊界

　　實際高度=上邊界上邊框上填充內容高度（height）下填充下邊框下邊界

　　例如有CSS定義如下：

　　#menu{

　　background:#9cf;

　　margin:20px;

　　border:10pxsolid#039;

　　padding:40px;

　　width:200px;

　　}

　　2.元素總寬度的計算

　　而對于WindowsIE5.x及更前的版本，把這個盒模型的定義搞錯了，它認為：

　　寬度（width）=元素內容填充邊框

　　這個確實很容易搞錯，很多對于盒模型定義沒有深入了解的人也同樣容易犯這個錯誤。

　　例如：

　　#menu{

　　width:200px;

　　padding:5px;

　　border:1pxsolid#ccc;

　　}

　　那么，在IE5.5中div實際內容的寬度將是200px-5px-1px-5px-1px=188px，而在Firefox、Opera及IE6等瀏覽器內寬度則是200px。

　　這正是很多新手發現自己定義的頁面在不同的瀏覽器內看會發生錯位的原因之一。

　　因此就需要采取一定的彌補措施，一般可以避免同時定義元素的寬度和填充、邊框，而將一些定義放到元素的子元素內定義。

　　如果必須同時定義這幾個值，也可以使用一些手段來校正這個錯誤，即俗稱的csshack，其基本思想就是為沒有錯誤的瀏覽器提供一個正確的寬度值，而對IE5.5等有問題的瀏覽器提供另一個值。

　　例如如下的寫法：

　　#menu{

　　padding:5px;

　　width:110px;

　　voice-family:""}"";

　　voice-family:inherit;

　　width:100px;

　　}

　　定義中第一個width:110px，是IE5.5認為的元素的寬度，100px 5px 5px。

　　voice-family:""}"";

　　voice-family:inherit;

　　是CSS2.0中的語音屬性，由于WindowsIE5.5不完全支持CSS2.0，不識別此屬性，因此跳到下一個選擇符。但是其他瀏覽器（包括IE6）會繼續解讀下面的定義，由于css是“層疊”的，即對于同一個選擇符的相同的屬性，后面的定義會覆蓋掉前面的定義，因此，對于其他的瀏覽器，#menu的寬度為最后的100px。

　　另一個常用的hack手法是使用!important（聲明），聲明加在CSS屬性定義的后面，此條屬性的級別將變成最高，即使后面有相同的定義也不會覆蓋掉聲明過的定義，不過IE不支持!important。

　　例如有如下css定義：

　　#box{

　　border:1pxsolid#B51C8C;

　　width:768px;

　　}

　　3.針對IE修正CSS

　　對于支持!important的瀏覽器，將接受width:768px，而ie6雖然不支持!important，但是由于其無法解釋“/**/（空注釋）”，因此會忽略后面的定義，而ie5.5卻會接受最后定義的width:770px，因此達到修正的目的。

　　關于盒模型，還有以下幾點需要注意：

　　·對于塊級元素（display:block），未浮動的垂直相鄰元素的上邊界和下邊界會被壓縮，例如：有上下2個元素，上元素的下邊界為5px，下面元素的上邊界為20px，則實際2個元素的間距為20px（2個邊界值中較大的值）。

　　邊界的壓縮

　　注1.塊級元素（display:block）