掌握盒模型輕松DIV CSS網頁布局

2024-07-11 08:24:17

字體：大中小

來源：轉載

供稿：網友

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

圖1 盒模型圖解
填充、邊框和邊界都分為“上右下左”四個方向，既可以分別定義，也可以統一定義。
CSS內定義的寬（width）和高（height），指的是填充以內的內容范圍，因此一個元素：
實際寬度 = 左邊界左邊框左填充內容寬度（width）右填充右邊框右邊界
實際高度 = 上邊界上邊框上填充內容高度（height）下填充下邊框下邊界
例如有CSS定義如下：
#menu {background: #9cf;margin: 20px;border: 10px solid #039;padding: 40px;width: 200px;}
則其實際寬度如圖2所示。

圖2 元素總寬度的計算
而對于Windows IE 5.x及更前的版本，把這個盒模型的定義搞錯了，它認為：
寬度（width）= 元素內容填充邊框
這個確實很容易搞錯，很多對于盒模型定義沒有深入了解的人也同樣容易犯這個錯誤。例如：
#menu {width: 200px;padding: 5px;border: 1px solid #ccc;}
那么，在IE5.5中div實際內容的寬度將是200px-5px-1px-5px-1px=188px，而在Firefox、Opera及IE 6等瀏覽器內寬度則是200px。
這正是很多新手發現自己定義的頁面在不同的瀏覽器內看會發生錯位的原因之一。
因此就需要采取一定的彌補措施，一般可以避免同時定義元素的寬度和填充、邊框，而將一些定義放到元素的子元素內定義。
如果必須同時定義這幾個值，也可以使用一些手段來校正這個錯誤，即俗稱的css hack，其基本思想就是為沒有錯誤的瀏覽器提供一個正確的寬度值，而對IE5.5等有問題的瀏覽器提供另一個值。
例如如下的寫法：
#menu {padding: 5px;width:110px;voice-family: ""}"";voice-family: inherit;width: 100px;}
定義中第一個width:110px，是IE 5.5認為的元素的寬度，100px 5px 5px。voice-family: “”}”";
voice-family: inherit;
是CSS2.0中的語音屬性，由于Windows IE5.5不完全支持CSS2.0，不識別此屬性，因此跳到下一個選擇符。但是其他瀏覽器（包括IE6）會繼續解讀下面的定義，由于css是“層疊”的，即對于同一個選擇符的相同的屬性，后面的定義會覆蓋掉前面的定義，因此，對于其他的瀏覽器，#menu的寬度為最后的100px。

上一篇：CSS實例:CSS的10個方法和技巧

下一篇：CSS3教程:邊框屬性border的極致應用