網(wǎng)頁設(shè)計(jì)中的基本元素框

第7章曾討論過,所有文檔元素都生成一個(gè)矩形框,這稱為元素框(element box),它描述了一個(gè)元素在文檔布局中所占的空間大小,因此,網(wǎng)頁設(shè)計(jì)中每個(gè)框都影響著其他元素框的位置和大小。例如,如果文檔中第一個(gè)元素框是1英寸高,下一個(gè)框就至少會(huì)從文檔頂端向下1英寸處開始。如果第一個(gè)元素框改為2英寸高,后面的各元素框都會(huì)向下移1英寸,第二個(gè)元素框?qū)⒅辽購奈臋n頂端向下2英寸處開始。

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

注意:如果網(wǎng)站建設(shè)人員采用手工定位,框可能會(huì)重疊。另外如果在正常流元素上使用負(fù)的外邊距,也可能出現(xiàn)視覺重疊。

為了充分理解如何處理外邊距、內(nèi)邊距和邊框,必須清楚地掌握框模型(這在第7章做過解釋)。

寬度和高度

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

對(duì)于這兩個(gè)屬性有一點(diǎn)很重要:它們不能應(yīng)用到行內(nèi)非替換元素。例如,如果你想聲明一個(gè)超鏈接的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í)元素和替換元素

繼承性:無

百分?jǐn)?shù):相對(duì)于包含塊的width

計(jì)算值:對(duì)于auto和百分?jǐn)?shù)值,根據(jù)指定確定,否則是一個(gè)絕對(duì)長度,除非元素不能應(yīng)用該屬性(此時(shí)為auto)

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

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

height

值:<length>I auto | inherit

初始值:auto

應(yīng)用于:塊級(jí)元素和替換元素

繼承性:無

百分?jǐn)?shù):相對(duì)于包含塊的height計(jì)算

計(jì)算值:對(duì)于auto和百分?jǐn)?shù)值,根據(jù)指定確定,否則是一個(gè)絕對(duì)長度,除非元素不能應(yīng)用該屬性(此時(shí)為auto)

歷史問題

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

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

IE/Win對(duì)行內(nèi)非替換元素應(yīng)用了width和height屬性。例如,如果對(duì)一個(gè)超鏈接應(yīng)用了width和height,將根據(jù)所提供的值來繪制。

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

外邊距與內(nèi)邊距

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

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

網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷咨詢專線:0871-63535511(點(diǎn)擊可一鍵撥號(hào))