第7章曾討論過(guò)，所有文檔元素都生成一個(gè)矩形框，這稱(chēng)為元素框（element box），它描述了一個(gè)元素在文檔布局中所占的空間大小，因此，網(wǎng)頁(yè)設計中每個(gè)框都影響著(zhù)其他元素框的位置和大小。例如，如果文檔中第一個(gè)元素框是1英寸高，下一個(gè)框就至少會(huì )從文檔頂端向下1英寸處開(kāi)始。如果第一個(gè)元素框改為2英寸高，后面的各元素框都會(huì )向下移1英寸，第二個(gè)元素框將至少從文檔頂端向下2英寸處開(kāi)始。

默認地，一個(gè)可以顯示的文檔由多個(gè)矩形框組成，這些矩形框分布開(kāi)，從而不會(huì )相互重疊。另外，網(wǎng)站建設中要根據某些限制，這些框要盡可能地少占空間，同時(shí)還要保證相互之間有足夠的空間，以便清楚地看出哪些內容屬于哪個(gè)元素。

注意：如果網(wǎng)站建設人員采用手工定位，框可能會(huì )重疊。另外如果在正常流元素上使用負的外邊距，也可能出現視覺(jué)重疊。

為了充分理解如何處理外邊距、內邊距和邊框，必須清楚地掌握框模型（這在第7章做過(guò)解釋?zhuān)?/p>

寬度和高度

一個(gè)元素的width被定義為從左內邊界到右內邊界的距離，height被定義為上內邊界到下內邊界的距離。

對于這兩個(gè)屬性有一點(diǎn)很重要：它們不能應用到行內非替換元素。例如，如果你想聲明一個(gè)超鏈接的height和width,網(wǎng)站建設CSS兼容的瀏覽器必須忽略這些聲明。假設應用以下規則：

a:link {color: red; background: silver; height: 15px; width: 60px;}

width

值：<length>|<percentage>| auto | inherit

初始值：auto

應用于：塊級元素和替換元素

繼承性：無(wú)

百分數：相對于包含塊的width

計算值：對于auto和百分數值，根據指定確定，否則是一個(gè)絕對長(cháng)度，除非元素不能應用該屬性（此時(shí)為auto）

最后會(huì )得到有銀色背景的紅色鏈接，其高度和寬度由鏈接的內容確定，將不會(huì )是15像素高60像素寬。

在本章中，為了使討論更簡(jiǎn)單一些，我們假設元素的高度總是自動(dòng)計算。如果一個(gè)元素有8行，每一行高度為1/8英寸，則元素的高度為1英寸，如果有10行，高度則為1.25英寸。無(wú)論哪一種情況，高度都由元素的內容來(lái)定，而不是由網(wǎng)站建設人員確定。正常流中的元素很少有設定的高度。

height

值：<length>I auto | inherit

初始值：auto

應用于：塊級元素和替換元素

繼承性：無(wú)

百分數：相對于包含塊的height計算

計算值：對于auto和百分數值，根據指定確定，否則是一個(gè)絕對長(cháng)度，除非元素不能應用該屬性（此時(shí)為auto）

歷史問(wèn)題

在IE6之前，Windows平臺的Internet Explorer在width和height方面并沒(méi)有按網(wǎng)站建設CSS保證的那樣做。以下是兩個(gè)主要區別：

IE/Win使用width和height來(lái)定義可見(jiàn)元素柜的尺寸，而不是定義元素框的內容。如果定義一個(gè)元素的width為400px,IE/Win會(huì )使左外邊框邊界到右外邊框邊界之間的距離是400像素。換句話(huà)說(shuō)，IE/Win使用width來(lái)描述元素內容區、左右內邊距以及左右邊框的總和。網(wǎng)站建設CSS3對此包含一些建議，允許創(chuàng )作人員決定width和height究竟是什么含義。

IE/Win對行內非替換元素應用了width和height屬性。例如，如果對一個(gè)超鏈接應用了width和height，將根據所提供的值來(lái)繪制。

這兩種行為在IE6中得到了修正，不過(guò)僅限于“標準”模式。如果IE6以“quirks”模式顯示文檔，還是會(huì )有前面描述的行為。

外邊距與內邊距

元素框在元素之間只提供了很少的空間，網(wǎng)頁(yè)設計中有3種方法可以在元素外圍生成額外的空間：可以增加內邊距，或者增加外邊距，還可以同時(shí)增加內邊距和外邊距。某些情況下，選擇哪種方法并不重要。不過(guò)，如果元素有背景，則會(huì )影響你的決定，因為背景會(huì )延伸到內邊距中，但不會(huì )延伸到外邊距。

因此，為元素指定的內邊距和外邊距會(huì )影響元素的背景何時(shí)結束。如果為元素設置了背景色，可以清楚地看出二者的差別，有內邊距的元素的背景范圍更大，而有外邊距的元素的背景則不受影響。