?網(wǎng)頁(yè)設計中的偏移屬性

  • 2019-02-27 17:00:21
  • 閱讀次數:
  • 作者:盈嵐科技小編
  • 來(lái)源:http://www.americanwasteexpansions.com

上一節介紹了網(wǎng)頁(yè)設計三種定位機制使用了4個(gè)屬性來(lái)描述定位元素各邊相對于其包含塊的偏移。我們將這4個(gè)屬性稱(chēng)為偏移屬性,這對于完成定位是很重要的一部分。

top、right、bottom、left

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

初始值:auto

應用于:定位元素(也就是position值不是static的元素)

繼承性:無(wú)

百分數:對于top和bottom,相對于包含塊的高度;對于right和left,相對于包含塊的寬度

計算值:對于相對定位元素,見(jiàn)以下說(shuō)明,對于static元素為auto,對于長(cháng)度值,是相應的絕對長(cháng)度;對于百分數值,則為指定的值;否則,為 auto

說(shuō)明:計算值取決于一系列因素,見(jiàn)附錄A中的相關(guān)例子

這些屬性描述了距離包含塊最近邊的偏移(所以得名offset)。例如,top描述了網(wǎng)站建設定位元素上外邊距邊界離其包含塊的頂端多遠。如果top為正值,會(huì )把定位元素的上外邊距邊界下移,若為負值,則會(huì )把定位元素的上外邊距移到其包含塊的頂端之上。類(lèi)似地,left描述了定位元素的左外邊距邊界在其包含塊左邊界右邊(正值)或左邊(負值)有多遠。如果是正值,會(huì )把定位元素的外邊距邊界移到包含塊左邊界右邊,而負值則將其移到包含塊左邊界左邊。

還可以這樣來(lái)講,正值會(huì )導致向內偏移,使邊界朝著(zhù)包含塊的中心移動(dòng),而負值會(huì )導致向外偏移。

注意:最初的網(wǎng)站建設CSS2規范實(shí)際上指出,偏移的是內容邊界,而不是外邊距邊界,不過(guò)這與CSS2的其他部分不一致。這個(gè)錯誤在后來(lái)的勘誤和CSS2.1中得到修正。所有當前開(kāi)發(fā)的瀏覽器(寫(xiě)作本書(shū)時(shí))都使用外邊距邊界來(lái)完成偏移計算。

偏移定位元素的外邊距邊界時(shí),帶來(lái)的影響是元素的所有一切(包括外邊距,邊框、內邊距和內容)都會(huì )在定位的過(guò)程中移動(dòng)。因此,可以為定位元素設置外邊距、邊框和內邊距,這些會(huì )隨著(zhù)定位元素一直保留,并包含在偏移屬性定義的區域內。

網(wǎng)頁(yè)設計人員要記住重要的一點(diǎn),偏移屬性定義了距離包含塊相應邊的偏移(例如,left定義了距離包含塊左邊的偏移),而不是距包含塊左上角的偏移。正是因為這個(gè)原因,填充一個(gè)包含塊的右下角時(shí)要使用以下值:

top: 50%; bottom: 0; left: 50%; right: 0;

在這個(gè)例子中,定位元素的左外邊界放在包含塊中間的位置上,這是距包含塊左邊界的偏移。不過(guò),定位元素的右外邊界沒(méi)有從包含塊的右邊界偏移,所以二者不矛盾。定位元素的頂端和底端也是如此:外上邊界放在包含塊中間的位置上,但是外下邊界沒(méi)有從包含塊底端上移。這就得到了如圖10-26所示的結果。

圖10-26:填充包含塊的右下1/4部分

注意:在圖10-26以及本章大多數例子中,都是基于絕對定位的,由于絕對定位對于展示top、right、bottom和left如何工作是最簡(jiǎn)單的機制,所以我們一直都會(huì )用絕對定位。

需要說(shuō)明,網(wǎng)頁(yè)設計定位元素的背景色稍有不同。圖10-26中沒(méi)有外邊距,但是如果確實(shí)有外邊距,在邊框和偏移邊界之間就會(huì )出現空白??瓷先ゾ秃孟穸ㄎ辉貨](méi)有完全填充包含塊右下方1/4部分一樣。實(shí)際上,它確實(shí)填滿(mǎn)了這個(gè)區域,不過(guò)人眼不能直接看出。因此,以下兩組樣式會(huì )得到幾乎相同的外觀(guān)效果,假設包含塊為100em高,100em寬:

top: 50%; bottom: 0; left: 50%; right: 0; margin: 10em;

top: 60%; bottom: 10%; left: 60%; right: 10%; margin: 0;

重申一句,二者只是在視覺(jué)效果上相似。

通過(guò)使用負值,可以將一個(gè)元素定位到其包含塊之外,例如,指定以下值會(huì )得到如圖10-27所示的結果:

top:-5em; bottom: 50%; left: 75%; right:-3em;

圖10-27:將一個(gè)元素定位到其包含塊之外

除了長(cháng)度值和百分數值,網(wǎng)頁(yè)設計的偏移屬性還可以設置為auto,這是默認值。對于auto沒(méi)有定義行為,它會(huì )根據所用的定位類(lèi)型改變。本章后面將逐個(gè)考慮各種定位類(lèi)型,并介紹auto如何作用。

當前文章標題:?網(wǎng)頁(yè)設計中的偏移屬性

當前URL:http://www.americanwasteexpansions.com/news/wzzz/migration-properties.html

上一篇:網(wǎng)頁(yè)設計中的包含塊

下一篇:網(wǎng)頁(yè)設計中的寬度和高度

網(wǎng)站建設、網(wǎng)絡(luò )營(yíng)銷(xiāo)咨詢(xún)專(zhuān)線(xiàn):181-8386-5875(點(diǎn)擊可一鍵撥號)