武林網(www.49028c.com)文章簡介:定位(position)布局頁面說容易非常容易,只需要記住這節課最后一句話就可以了,說困難,那是相當的難理解,需要一定的耐心,不過還好,KwooJan給大家總結的已經很通俗易懂了。
注:在做這節教程的時候,我又上網查了相關資料,看了大量的文章,做了大量的測試,最后總結出下面這些文字,洋洋灑灑一整篇,不過需要大家一句話一句話的看,一定要仔細嘍!還有對于課程中的說的,最好一邊看,一邊練,不練絕對看不懂!
1)如果沒有TRBL,以父級的左上角,在沒有父級的時候,他是參照瀏覽器左上角,如果在沒有父級元素的情況下,存在文本,則以它前面
的最后一個文字的右上角為原點進行定位但是不斷開文字,覆蓋于上方。
2)如果設定TRBL,并且父級沒有設定position屬性,那么當前的absolute則以瀏覽器左上角為原始點進行定位,位置將由TRBL決定。
3)如果設定TRBL,并且父級設定position屬性(無論是absolute還是relative),則以父級的左上角為原點進行定位,位置由TRBL決定。即使父級有Padding屬性,對其也不起作用,說簡單點就是:它只堅持一點,就以父級左上角為原點進行定位,父級的padding對其根本沒有影響。
1)如果沒有TRBL,以父級的左上角,在沒有父級的時候,他是參照瀏覽器左上角(到這里和absolute第一條一樣),如果在沒有父級元素的情況下,存在文本,則以文本的底部為原始點進行定位并將文字斷開(和absolut不同)。
2)如果設定TRBL,并且父級沒有設定position屬性,仍舊以父級的左上角為原點進行定位(和absolut不同)
3)如果設定TRBL,并且父級設定position屬性(無論是absolute還是relative),則以父級的左上角為原點進行定位,位置由TRBL決定(前半段和absolut一樣)。如果父級有Padding屬性,那么就以內容區域的左上角為原點,進行定位(后半段和absolut不同)。
新聞熱點
疑難解答