1. 程式人生 > >CSS ——浮動與定位元素

CSS ——浮動與定位元素

     元素分為正常流和非正常流,非正常流中包含浮動與定位

     先說定位,定位包含相對定位(relative)、絕對定位(absolute)以及固定定位(fixed)

     position屬性:static(預設)| relative | absolute | fixed       無繼承性

     相對定位:

      position:relative 

     相對定位元素被看做正常流文件的一部分,元素之前的位置保留,可以完全覆蓋文件中其他元素

     相對定位的位置變化是相對於元素之前的原始位置來說的

     其包含塊同正常流

     他的偏移屬性有:top bottom left right  設定的數值是相對於原始位置的邊偏移

     絕對定位:

     position:absolute

     絕對定位元素會從文件流中刪除,不會流入其他元素,元素之前的位置不保留

     絕對定位的包含塊是最近的position值不為static(預設)的祖先元素

          1.如果這個祖先元素為塊級元素,包含塊為該元素內邊距邊界

          2.如果這個祖先元素是行內元素,包含塊為該元素內容區邊界

          3.如果沒有已定位祖先元素,其包含塊為初始包含塊

     元素絕對定位時會為其後代建立一個包含塊。

     元素相對於包含塊邊偏移,除了bottom的任意邊設定為auto時,定位元素會與改元素原始該邊位置相對齊

    固定定位

    position:fixed

    固定定位類似於絕對定位,其包含塊為初始包含塊。

    再說浮動

    float屬性:left | right | none(預設)

    浮動元素脫離正常流,其包含塊為最近的塊級祖先元素

    浮動元素會生成一個塊級框,元素外邊距不會被合併

    浮動元素規則:

1.浮動元素儘量高的放置,但浮動元素的左右邊界不能超過其包含塊的左右內邊界

2.浮動元素不會重疊,一個浮動元素的頂端不能比之前所有浮動元素或塊級元素的頂端更高

3.浮動元素不能超過包含塊的的內頂端,但是可以超過下邊,若浮動元素與正常流元素衝突:

     a.與行內框衝突,其行框、背景、文字都在浮動元素之上

     b.與塊框衝突,其邊框和背景在浮動元素之下,而內容在之上

4.如果源文件中一個浮動元素之前出現另一個元素,浮動元素的頂端不能比包含該元素的生成框的任何行框更高

    clear 屬性: left | right | both

    clear屬性用來避免該元素左右出現浮動元素,根據練習發現,如果想讓一個行內元素的左右沒有浮動元素,必須將該元素先轉化為塊級元素,即將clear與display:block組合使用才能真正達到目的