CSS教程:盒模型(BOX Model)

2024-07-11 08:43:31

字體：大中小

供稿：網(wǎng)友

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

http://files.VeVb.com/file_images/css/2008101719133167177801.jpg

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

　　則其實(shí)際寬度如圖2所示。

http://files.VeVb.com/file_images/css/2008101719133170377802.gif

圖2元素總寬度的計(jì)算
　　而對(duì)于WindowsIE5.x及更前的版本，把這個(gè)盒模型的定義搞錯(cuò)了，它認(rèn)為：
　　寬度（width）=元素內(nèi)容填充邊框
　　這個(gè)確實(shí)很容易搞錯(cuò)，很多對(duì)于盒模型定義沒有深入了解的人也同樣容易犯這個(gè)錯(cuò)誤。
　　例如：
#menu{
width:200px;
padding:5px;
border:1pxsolid#ccc;
}

　　那么，在IE5.5中div實(shí)際內(nèi)容的寬度將是200px-5px-1px-5px-1px=188px，而在Firefox、Opera及IE6等瀏覽器內(nèi)寬度則是200px。
　　這正是很多新手發(fā)現(xiàn)自己定義的頁面在不同的瀏覽器內(nèi)看會(huì)發(fā)生錯(cuò)位的原因之一。
　　因此就需要采取一定的彌補(bǔ)措施，一般可以避免同時(shí)定義元素的寬度和填充、邊框，而將一些定義放到元素的子元素內(nèi)定義。
　　如果必須同時(shí)定義這幾個(gè)值，也可以使用一些手段來校正這個(gè)錯(cuò)誤，即俗稱的csshack，其基本思想就是為沒有錯(cuò)誤的瀏覽器提供一個(gè)正確的寬度值，而對(duì)IE5.5等有問題的瀏覽器提供另一個(gè)值。
　　例如如下的寫法：
#menu{
padding:5px;
width:110px;
voice-family:"/"}/"";
voice-family:inherit;
width:100px;
}

　　定義中第一個(gè)width:110px，是IE5.5認(rèn)為的元素的寬度，100px 5px 5px。
voice-family:"/"}/"";
voice-family:inherit;

　　是CSS2.0中的語音屬性，由于WindowsIE5.5不完全支持CSS2.0，不識(shí)別此屬性，因此跳到下一個(gè)選擇符。但是其他瀏覽器（包括IE6）會(huì)繼續(xù)解讀下面的定義，由于css是“層疊”的，即對(duì)于同一個(gè)選擇符的相同的屬性，后面的定義會(huì)覆蓋掉前面的定義，因此，對(duì)于其他的瀏覽器，#menu的寬度為最后的100px。
　　另一個(gè)常用的hack手法是使用!important（聲明），聲明加在CSS屬性定義的后面，此條屬性的級(jí)別將變成最高，即使后面有相同的定義也不會(huì)覆蓋掉聲明過的定義，不過IE不支持!important。
　　例如有如下css定義：
#box{
border:1pxsolid#B51C8C;
width:768px;
}

　　而其修正方法如圖3所示。

http://files.VeVb.com/file_images/css/2008101719133176577803.gif

圖3針對(duì)IE修正CSS
　　對(duì)于支持!important的瀏覽器，將接受width:768px，而ie6雖然不支持!important，但是由于其無法解釋“/**/（空注釋）”，因此會(huì)忽略后面的定義，而ie5.5卻會(huì)接受最后定義的width:770px，因此達(dá)到修正的目的。
　　關(guān)于盒模型，還有以下幾點(diǎn)需要注意：
　　·對(duì)于塊級(jí)元素（display:block），未浮動(dòng)的垂直相鄰元素的上邊界和下邊界會(huì)被壓縮，例如：有上下2個(gè)元素，上元素的下邊界為5px，下面元素的上邊界為20px，則實(shí)際2個(gè)元素的間距為20px（2個(gè)邊界值中較大的值）。如圖4所示。

http://files.VeVb.com/file_images/css/2008101719133179677804.gif

圖4邊界的壓縮
注1.塊級(jí)元素（display:block）
每個(gè)塊級(jí)元素都從一個(gè)新行開始，而且其后的元素也需另起一行開始，標(biāo)題、段落、表格、層、body等都是塊級(jí)元素。塊級(jí)元素只能作為其他塊級(jí)元素的子元素，而且需要一定的條件。
　　·內(nèi)聯(lián)元素，例如<a>、<span>等，定義上下邊界不會(huì)影響到行高（line-height），內(nèi)聯(lián)元素距離上一行元素的距離由行高決定，而不是填充或邊界。
注2.內(nèi)聯(lián)元素（display:inline）
內(nèi)聯(lián)元素不需要在新行內(nèi)顯示，而且也不強(qiáng)迫其后的元素?fù)Q行，如a、em、span等都為內(nèi)聯(lián)元素。內(nèi)聯(lián)元素可以為任何其他元素的子元素。
　　·浮動(dòng)元素（無論左或者右浮動(dòng)）邊界不壓縮，且若浮動(dòng)元素不聲明寬度，則其寬度趨向于0，即壓縮到其內(nèi)容能承受的最小寬度。
　　·如果盒中沒有內(nèi)容，則即使定義了寬度和高度都為100%，實(shí)際上只占0%，因此不會(huì)被顯示，此點(diǎn)在采取層布局的時(shí)候需特別注意。
　　·邊界值可為負(fù)，其顯示效果各瀏覽器可能不相同。
　　·填充值不可為負(fù)。
　　·邊框默認(rèn)的樣式（border-style）為不顯示（none）。

上一篇：CSS教程:CSS中的定位（position）

下一篇：無延遲翻滾的圖形與CSS混合風(fēng)格按鈕