首頁  >  文章  >  web前端  >  詳細分析css float 屬性以及position:absolute 的區別_基礎教程

詳細分析css float 屬性以及position:absolute 的區別_基礎教程

WBOY
WBOY原創
2016-05-16 12:03:331844瀏覽

1.float 屬性定義元素在哪個方向浮動。以往這個屬性總應用於圖像,使文字圍繞在圖像周圍,不過在 CSS 中,任何元素都可以浮動。浮動元素會產生一個區塊級框,而不論它本身是何種元素。 div一個典型的區塊級元素,會單獨佔據一行。

先看看最基本的區塊級元素如何排列的。 html程式碼,以下樣式都是基於此。

複製程式碼 程式碼如下:

        phpcnltphp class="box1">
        框1
       

           

       

        框3
       


gtphpcn

css代碼:

複製程式碼 程式碼如下:

.boxBg{
    margin: 0 auto;
    width:500px;
    height:200px;
    border:2px solid #ccc
    }
  background-color:red
    }
    .box2{
    width:100px;
    height:50px;
    background-color:blue
  width:100px;
    height:50px;
    background-color:green
    }

執行結果:

詳細分析css float 屬性以及position:absolute 的區別_基礎教程

由於div是區塊級元素,所以框會以縱向形式排列。在實際操作中往往需要將框橫向排列。有兩種方式可以實現。第一種將display:inlin-block;

複製程式碼 程式碼如下:

.boxBg{
    margin: 0 auto;
    width:500px;
    heightorder:200pxg

    }
    .box1{
    width:100px;
    height:50px;
    background {
    width:100px;
    height:50px;
    background-color:blue;
    display:inline-block
box. BR>    height:50px;
    background-color:green;
    display:inline-block
    }

執行結果:

詳細分析css float 屬性以及position:absolute 的區別_基礎教程

至於中間的縫隙,追溯到本質原因是元素之間的空白符引起的,所以在父元素設定fone-size的大小,可以調節空白縫隙的大小。

複製程式碼 程式碼如下:

.boxBg{
    margin: 0 auto;
    width:500px;
    height:200px;
    border:2px solid #ccc;
    font-size:34px;
>ccc;
    font-size:34px;
>
P>P>P}>

將font-size:34px之後,那麼縫隙就會變寬。

執行結果:

詳細分析css float 屬性以及position:absolute 的區別_基礎教程

同理,要去掉縫隙,那就需要將font-size:0;

複製程式碼 程式碼如下:

.boxBg{
    margin: 0 auto;
    width:500px;
    height:200px;
    border:2px solid #ccc;
    font-size:0
}

執行結果:

詳細分析css float 屬性以及position:absolute 的區別_基礎教程

如此便實現了想要的佈局,框裡邊的文字也跟著消失了,同樣也證明文字的大小影響縫隙。只需要在子元素裡重新設定就可以了。當然今天的重點不是這個。同樣的效果float:left;也可以輕鬆實現。

複製程式碼 程式碼如下:



執行結果:

詳細分析css float 屬性以及position:absolute 的區別_基礎教程

如果使用inline-block,結果會是怎麼樣呢?

複製程式碼 程式碼如下:


.box3{
    width:100px;    height:50px;
    background-color:green;
}

執行結果:

詳細分析css float 屬性以及position:absolute 的區別_基礎教程

為何框3的文字會出現在下邊而不是被框1覆蓋?接著看程式碼,看圖

複製程式碼 程式碼如下:

.box3{
    height:50px;    background-color:green;
}

執行結果:

詳細分析css float 屬性以及position:absolute 的區別_基礎教程

看出不一樣了沒?是的。 box3沒有定義width;去掉了width,不定義寬度的情況下預設寬度就是父元素的寬度,也就是說此時width:500px;浮動元素覆蓋非浮動元素,也就是框3前邊200px的寬度被浮動元素覆蓋了,之所以文字沒有被覆蓋而且文字被浮動元素擠在200px之後的位置,原因呢?

  浮動元素不會佔據區塊的空間,所以框三就是100%的父容器寬度 500px,但是浮動元素會佔據另外的空間,也就是行框空間,通俗的講就是文本所佔的空間。

這也是圖片float之後,文字會自動環繞圖片的原因。浮動元素不佔據塊級空間,但會影響塊級元素之內的文字以及內聯元素。

如此的話如果想要三個框寬度一樣,那麼只需要將框三width:300px;

複製程式碼 程式碼如下:

.box3{
    width:300px;    height:50px;
    background-color:green;
}

執行結果:

詳細分析css float 屬性以及position:absolute 的區別_基礎教程

到這裡基本的浮動說完了,那就要說說問題了,浮動雖然好用,但是也會在實際中出現很多問題。例如:

執行結果:

詳細分析css float 屬性以及position:absolute 的區別_基礎教程

很常見的問題,正常情況下。應該灰色的背景會跟框一樣高,可事實總是不會盡如人意 :)

這種情況產生的原因,都知道是因為浮動造成的,是的,是浮動,很多地方有說浮動元素會脫離普通流,所以普通元素可以當浮動元素不存在,所以這裡就不會撐開背景了,但是認真看的同學,一定會記得上邊有提到浮動元素不會影響塊框,但是會影響行框,也就是文字或內聯元素,不管是塊級元素還是內聯元素都屬於普通流,如果浮動元素脫離普通流又為何會影響行框?其實我覺得不必要糾結於這些概念性的東西。依照我的理解浮動元素就是跟塊級元素不在一個水平空間,跟文字內聯元素在一個空間,所以這裡邊框就相當於在背景之上,所以不會影響背景元素,平常所說的清除浮動,並不是說把浮動元素的float屬性去掉,而是清除其周圍的浮動元素,使其自身周圍沒有浮動元素,所以如果想讓框三到第二行,不能在框2裡邊用clear:right;而是需要在框3裡邊使用clear:left;

複製程式碼 程式碼如下:

.box3{
    float:left;    width:100px;
    height:50px;
    background-color:green;
    clear:left
    }

執行結果:

詳細分析css float 屬性以及position:absolute 的區別_基礎教程

ok!理解了這個,下來再說說如何使背景和框等高,第一種:最直接的辦法就是直接設置背景高度和框相等就Ok了,當然這個不是重點,下面來說說清除浮動。首先先來看看例子:

複製程式碼 程式碼如下:



phpcnlt

     

     /div>

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn