武林网(www.vevb.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不同)。
新闻热点
疑难解答