css(浮動)

來源:互聯網
上載者:User

標籤:位移   停止   特殊   位移量   pos   實現   改變   預設   內聯   

浮動

1、什麼定位

      元素該出現的位置

      分為以下幾類:

        普通流定位(文檔流定位)

         浮動定位

                   相對定位

         絕對位置

         固定定位

   2、普通流定位

      頁面預設的定位方式

      區塊層級元素:從上到下顯示

      行內元素:從左至右顯示

3、浮動定位

      1、什麼是浮動定位

         元素會脫離預設文件流,在頁面上不會佔據空間

          浮動定位的元素會放置在包含框的左邊或者右邊

          浮動的元素依然在包含框內

          當浮動元素碰到其他浮動元素時,就會停止浮動

      2、浮動定位解決的問題

         實現特殊的定位方式,比如:讓多個區塊層級元素在同一行內顯示

      3、屬性

         float

          取值:

               left : 左浮動

               right : 右浮動

               none : 無浮動

          清除浮動所帶來的影響:

          屬性:

          clear:left,right,both;

      4、元素一旦浮動起來的話,那麼都將成為區塊層級元素

、浮動 元素 對 父層元素帶來的影響

   影響:一個元素內如果包含了浮動元素,那麼該元素的高度可能會變成0。

   原因:浮動元素 脫離了 文檔流,理論上講,就不在父層容器內

   解決方案:

       1、顯示設定父層元素的高度

       2、通過overflow:hidden 來撐起父層元素的高度

1、顯示方式

   1、區塊層級元素

      <div></div>  hn   p

變成行級元素: display:inline-block

特點:單獨佔一行

   2、內嵌元素/行內元素

      span , b , i , u , s , a

變成區塊層級元素:display:block

總結:

     1. 假如某個div元素A是浮動的,如果A元素上一個元素也是浮動的,

那麼A元素會跟隨在上一個元素的後邊(如果一行放不下這兩個元素,那麼A元素會被擠到下一行);

如果A元素上一個元素是標準流中的元素,

那麼A的相對垂直位置不會改變,也就是說A的頂部總是和上一個元素的底部對齊。

    2. 清除浮動可以理解為打破橫向排列。

    3. 對於CSS的清除浮動(clear),這個規則只能影響使用清除的元素本身,不能影響其他元素。

定位方式相關屬性

         position

          取值:

               1、static : 預設,靜態定位

               2、relative : 相對定位

               3、absolute : 絕對位置

               4、fixed : 固定定位

2、與定位位置相關屬性

         top

          bottom

          left

          right

          以像素為單位的值

      3、堆疊順序

         z-index : value;

          值越大越靠近使用者

4、static

      頁面中預設定位方式,即文檔流定位

  5、相對定位

      相對於當前元素本身出現的位置而實現定位的一種方式

      實現方式:

        position:relative;

         通過 top bottom left right 來實現位置移動

      使用場合:

        1、會進行位置的微妙的調整

         2、配合著絕對位置使用

6、絕對位置

      特點:脫離文檔流,不佔據頁面空間

      定位位置:相對於【最近】的【已定位】的【祖先】元素

                如果祖先元素沒有進行定位,它的位置就相對於最初的包含塊(body)

      <nav>

        <div>

           <p>

            <span></span>

           </p>

         </div>

      </nav>

      已定位:非static , 指 relative、absolute、fixed

      實現方式:

         position:absolute

 top,bottom,left,right : 位置位移量,相對於最近的已定位的祖先元素去位移。

      使用場合:

         1、快顯功能表的位置

             所有的快顯功能表都是絕對位置

7、固定定位

      將元素固定在頁面上的某一個位置,不隨捲軸滾動而發生改變

      文法:

           position:fixed;

            top、left、right、bottom

常用方式  1.設定 父元素為position:relative

                     2.  設定子項目為 position : absolute

                     3. 設定子項目相對於父元素的位移

                          如 top:20px; left:30px;

css(浮動)

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.