第7章曾討論過，所有文檔元素都生成一個矩形框，這稱為元素框（element box），它描述了一個元素在文檔布局中所占的空間大小，因此，網(wǎng)頁設(shè)計中每個框都影響著其他元素框的位置和大小。例如，如果文檔中第一個元素框是1英寸高，下一個框就至少會從文檔頂端向下1英寸處開始。如果第一個元素框改為2英寸高，后面的各元素框都會向下移1英寸，第二個元素框?qū)⒅辽購奈臋n頂端向下2英寸處開始。
默認(rèn)地，一個可以顯示的文檔由多個矩形框組成，這些矩形框分布開，從而不會相互重疊。另外，網(wǎng)站建設(shè)中要根據(jù)某些限制，這些框要盡可能地少占空間，同時還要保證相互之間有足夠的空間，以便清楚地看出哪些內(nèi)容屬于哪個元素。
注意：如果網(wǎng)站建設(shè)人員采用手工定位，框可能會重疊。另外如果在正常流元素上使用負(fù)的外邊距，也可能出現(xiàn)視覺重疊。
為了充分理解如何處理外邊距、內(nèi)邊距和邊框，必須清楚地掌握框模型（這在第7章做過解釋）。
一個元素的width被定義為從左內(nèi)邊界到右內(nèi)邊界的距離，height被定義為上內(nèi)邊界到下內(nèi)邊界的距離。
對于這兩個屬性有一點很重要：它們不能應(yīng)用到行內(nèi)非替換元素。例如，如果你想聲明一個超鏈接的height和width,網(wǎng)站建設(shè)CSS兼容的瀏覽器必須忽略這些聲明。假設(shè)應(yīng)用以下規(guī)則：
a:link {color: red; background: silver; height: 15px; width: 60px;}
width
值：<length>|<percentage>| auto | inherit
初始值：auto
應(yīng)用于：塊級元素和替換元素
繼承性：無
百分?jǐn)?shù)：相對于包含塊的width
計算值：對于auto和百分?jǐn)?shù)值，根據(jù)指定確定，否則是一個絕對長度，除非元素不能應(yīng)用該屬性（此時為auto）
最后會得到有銀色背景的紅色鏈接，其高度和寬度由鏈接的內(nèi)容確定，將不會是15像素高60像素寬。
在本章中，為了使討論更簡單一些，我們假設(shè)元素的高度總是自動計算。如果一個元素有8行，每一行高度為1/8英寸，則元素的高度為1英寸，如果有10行，高度則為1.25英寸。無論哪一種情況，高度都由元素的內(nèi)容來定，而不是由網(wǎng)站建設(shè)人員確定。正常流中的元素很少有設(shè)定的高度。
height
值：<length>I auto | inherit
初始值：auto
應(yīng)用于：塊級元素和替換元素
繼承性：無
百分?jǐn)?shù)：相對于包含塊的height計算
計算值：對于auto和百分?jǐn)?shù)值，根據(jù)指定確定，否則是一個絕對長度，除非元素不能應(yīng)用該屬性（此時為auto）
在IE6之前，Windows平臺的Internet Explorer在width和height方面并沒有按網(wǎng)站建設(shè)CSS保證的那樣做。以下是兩個主要區(qū)別：
IE/Win使用width和height來定義可見元素柜的尺寸，而不是定義元素框的內(nèi)容。如果定義一個元素的width為400px,IE/Win會使左外邊框邊界到右外邊框邊界之間的距離是400像素。換句話說，IE/Win使用width來描述元素內(nèi)容區(qū)、左右內(nèi)邊距以及左右邊框的總和。網(wǎng)站建設(shè)CSS3對此包含一些建議，允許創(chuàng)作人員決定width和height究竟是什么含義。
IE/Win對行內(nèi)非替換元素應(yīng)用了width和height屬性。例如，如果對一個超鏈接應(yīng)用了width和height，將根據(jù)所提供的值來繪制。
這兩種行為在IE6中得到了修正，不過僅限于“標(biāo)準(zhǔn)”模式。如果IE6以“quirks”模式顯示文檔，還是會有前面描述的行為。
元素框在元素之間只提供了很少的空間，網(wǎng)頁設(shè)計中有3種方法可以在元素外圍生成額外的空間：可以增加內(nèi)邊距，或者增加外邊距，還可以同時增加內(nèi)邊距和外邊距。某些情況下，選擇哪種方法并不重要。不過，如果元素有背景，則會影響你的決定，因為背景會延伸到內(nèi)邊距中，但不會延伸到外邊距。
因此，為元素指定的內(nèi)邊距和外邊距會影響元素的背景何時結(jié)束。如果為元素設(shè)置了背景色，可以清楚地看出二者的差別，有內(nèi)邊距的元素的背景范圍更大，而有外邊距的元素的背景則不受影響。
當(dāng)前文章標(biāo)題：網(wǎng)頁設(shè)計中的基本元素框
當(dāng)前URL：http://www.gtalker.cn/news/wzzz/element-box.html
