網(wǎng)頁(yè)設計中絕對定位元素的放置和大小

  • 2019-03-13 14:52:40
  • 閱讀次數:次
  • 作者:盈嵐科技小編
  • 來(lái)源:http://amzcoolest.com

網(wǎng)站建設中,把“放置”和“大小”這兩個(gè)概念放在一起看上去有些奇怪,不過(guò)對于絕對定位元素來(lái)說(shuō),這是必要的,因為規范把它們緊密地綁在一起。如果網(wǎng)頁(yè)設計人員仔細考慮,這也不那么奇怪。請考慮如果一個(gè)元素使用4個(gè)偏移屬性來(lái)定位會(huì )發(fā)生什么情況,如下:

#masthead h1 {position: absolute; top: 1em; left: lent; right: 25%; bottom: l0px;

margin: 0; padding: 0; background: silver;}

在此,h1元素框的高度和寬度由其外邊距邊界的放置決定,如圖10-41所示s

圖10-41:根據偏移屬性確定元素的高度

如果包含塊更高,那么h1也會(huì )更高;如果包含塊更窄,h1也會(huì )跟著(zhù)更窄。如果向h1 增加外邊距或內邊距,這會(huì )對h1的高度和寬度計算值有進(jìn)一步的影響。

但是網(wǎng)頁(yè)設計人員這樣做之后,再試圖設置一個(gè)顯式的高度和寬度會(huì )怎么樣呢?

#masthead h1 {position: absolute; top: 0; left: 1em; right: 10%; bottom: 0; margin: 0; padding: 0; height: 1em; width: 50%; background: silver;}

必須做些工作,因為所有這些值都正確是不太可能的。實(shí)際上,包含塊寬度必須是h1的 font-size計算值的2.5倍,這樣以上的值才能正確。如果是其他寬度,則說(shuō)明至少有一個(gè)值是錯誤的,相應地必須將其忽略。到底哪一個(gè)值是錯誤的,這取決于很多因素,而且根據元素是替換元素還是非替換元素還會(huì )有所不同。

為此考慮以下規則:

#masthead h1 {position: absolute; top: auto; left: auto;}

結果會(huì )是什么呢?網(wǎng)頁(yè)設計人員可以看到,答案并不是“將值重置為0”。下一節將介紹真正的答案。

當前文章標題:網(wǎng)頁(yè)設計中絕對定位元素的放置和大小

當前URL:http://amzcoolest.com/news/wzzz/absolutely-positioned..html

上一篇:網(wǎng)頁(yè)設計中的包含塊和絕對定位元素

下一篇:網(wǎng)頁(yè)設計中的自動(dòng)邊偏移

網(wǎng)站建設、網(wǎng)絡(luò )營(yíng)銷(xiāo)咨詢(xún)專(zhuān)線(xiàn):181-8386-5875(點(diǎn)擊可一鍵撥號)
亚洲精品无码mv在线|新国产精品视频福利免费|日韩高清在线观看不卡一区二区|一本久久a久久精品免费不|亚洲私人无码内射免费观看