如何理解CSS中的Position和Float屬性-創(chuàng)新互聯(lián)

本篇文章給大家分享的是有關(guān)如何理解CSS中的Position和Float屬性，小編覺得挺實用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

成都創(chuàng)新互聯(lián)公司專注于北辰網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供北辰營銷型網(wǎng)站建設(shè)，北辰網(wǎng)站制作、北辰網(wǎng)頁設(shè)計、北辰網(wǎng)站官網(wǎng)定制、成都微信小程序服務(wù)，打造北辰網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供北辰網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

本文結(jié)構(gòu)點：

1.HTML布局的基本要點（點我直接跳轉(zhuǎn)）
  盒子模型
  HTML的普通流

2.Position屬性（點我直接跳轉(zhuǎn)）
  屬性值介紹
  用法介紹
  一些關(guān)于position的小知識

3.Float屬性（點我直接跳轉(zhuǎn)）
  屬性值介紹
  用法介紹
  與Position之間的兼容問題

HTML布局的基本要點：

如果要掌握、運用好Position、Float屬性必須要對HTML的兩個基本點有清晰的了解。

1.盒子模型（box model）
2.HTML的普通流（normal flow）
盒子模型
在HTML中元素的盒子模型分為兩種：塊狀元素、行內(nèi)元素，請注意這里的塊狀元素（Block）和行內(nèi)元素（Inline）與Display屬性中的inline、block兩個屬性值并不等同。盒子模型中的Inline、Block類似于是Display屬性的父類，例如：Display屬性中的list-item屬性值是屬于塊狀（Block）類型的。

我們直觀的上看兩種盒子模型的區(qū)別

•塊狀（Block）類型的元素可以設(shè)置width、height屬性，而行內(nèi)（Inline）類型設(shè)置無效。
•塊狀（Block）類型的元素會獨占一行（直觀的說就是會換行顯示，無法與其他元素在同一行內(nèi)顯示，除非你主動修改元素的樣式），而行內(nèi)（Inline）類型的元素則都會在一行內(nèi)顯示。
•塊狀（Block）類型的元素的width默認(rèn)為100%，而行內(nèi)（Inline）類型的元素則是根據(jù)自身的內(nèi)容及子元素來決定寬度。
列舉出一些大家常見的元素的分類

•塊狀元素：P、DIV、UL、LI、DD、DT...
•行內(nèi)元素：A、IMG、SPAN、STRONG...
HTML的普通流
瀏覽器在讀取HTML源代碼的時候是根據(jù)元素在代碼出現(xiàn)的順序讀取，最終元素的呈現(xiàn)方式是依據(jù)元素的盒子模型來決定的。行內(nèi)元素是從左到右，塊狀元素是從上到下。（如下圖）

代碼如下:

<style type="text/css">
  div { width: 100px; height: 50px; line-height: 50px; text-align: center; color: #fff; }
  strong { background: #808080; }
  em { background: #ffd800; }
  span { background: #b6ff00; }
</style>
<strong>strong</strong><em>em</em><span>span</span>
<div >A</div>
<div >B</div>
<div >C</div>

如何理解CSS中的Position和Float屬性

如果你不改變元素的默認(rèn)樣式前提下，元素在HTML的普通流中會“占用”一個位置，而“占用”位置的大小、位置則是由元素的盒子模型來決定。因此，在后續(xù)講的Position、Float屬性是否會使元素脫離這個普通流是一個關(guān)鍵點。

Position屬性：
我們首先來談?wù)凱osition屬性，因為Position屬性能夠很好的體現(xiàn)HTML普通流這個特征。重點在于應(yīng)用了不同的position值之后是否有脫離普通流和改變Display屬性這兩點。

Position屬性值
Position的屬性值共有四個static、relative、absolute、fixed。

Static
所有元素在默認(rèn)的情況下position屬性均為static，而我們在布局上經(jīng)常會用到的相對定位和絕對定位常用的屬性top、bottom、left、right在position為static的情況下無效。其用法為：在改變了元素的position屬性后可以將元素重置為static讓其回歸到頁面默認(rèn)的普通流中。

Relative
俗稱的相對定位，重點在于對相對理解。我們此前說過每個元素在頁面的普通流中會有“占用”一個位置，這個位置可以理解為默認(rèn)位置，而相對定位就是將元素偏離元素的默認(rèn)位置，但普通流中依然保持著原有的默認(rèn)位置，并沒有脫離普通流，只是視覺上發(fā)生的偏移。
我們先用塊狀元素來做個示例：

代碼如下:

<style type="text/css">div{ width: 100px; height: 50px; line-height: 50px; text-align: center; color: #fff; }</style><div >A</div><div >B</div><div >C</div>

如何理解CSS中的Position和Float屬性

右圖中的黑色虛線部分為元素B的默認(rèn)普通流位置，而黃色線則代表元素B的相對偏移量。我們可以很明顯的看出在元素C依然還是保留在原位，并沒有因為元素B發(fā)生了偏移而隨之變化。


我們再來看看行內(nèi)元素（在這里用大家最常用的span來做示例）

代碼如下:

<style type="text/css">
strong { background: #808080; }
em { background: #ffd800; }
span { background: #b6ff00; position: relative; top: 10px; left: 10px; width: 100px; }
</style>
<strong>strong</strong><em>em</em><span>span</span>

如何理解CSS中的Position和Float屬性

請注意看，在這里我是有對span進(jìn)行width屬性的賦值（為100px）。但是我們可以看到span在運用了relative這個position屬性值后，依然對width屬性無效，換而言之，position: relative并沒有改變行內(nèi)元素的Display屬性，這個概念非常重要（注意與接下來的absolute的區(qū)別）。

Absolute

俗稱的絕對定位，絕對定位是相對而言的，怎么理解呢？應(yīng)用了position: absolute的元素會循著節(jié)點樹中的父（祖）元素來確定“根”，然后相對這個“根”元素來偏移。如果在其節(jié)點樹中所有父（祖）元素都沒有設(shè)置position屬性值為relative或者absolute則該元素最終將對body進(jìn)行位置偏移。應(yīng)用了position: absolute的元素會脫離頁面中的普通流并改變Display屬性（重點）！

我們先用一個默認(rèn)嵌套的DIV來做示例

代碼如下:

<body >
    <div >
        A
        <div >
            A - 1
            <div >
                A - 2
            </div>
        </div>
    </div>
</body>

如何理解CSS中的Position和Float屬性

現(xiàn)在我們對A-2這個div設(shè)置絕對定位(Top: 0, Left: 0)，而沒有對它的父元素（A、A-1）設(shè)置任何的position值

代碼如下:

<body >
    <div >A
        <div >A - 1
            <div >
                A - 2</div></div></div></body>

如何理解CSS中的Position和Float屬性

可以看到（A-2）最終是根據(jù)body來產(chǎn)生了位移，讓我們對比分別設(shè)置一下父元素position。

如何理解CSS中的Position和Float屬性

從上面的圖，我們可以總結(jié)以下幾個結(jié)論。

1）塊狀元素在position(relative/static)的情況下width為100%，但是設(shè)置了position: absolute之后，會將width變成auto（會受到父元素的寬度影響）。

2）元素設(shè)置了position: absolute之后，如果沒有設(shè)置top、bottom、left、right屬性的話，瀏覽器會默認(rèn)設(shè)置成auto，而auto的值則是該元素的“默認(rèn)位置”。即設(shè)置position: absolute前后的offsetTop和offsetLeft屬性值不變。
特殊情況：

Firefox的話會直接將top、left設(shè)置成offsetTop和offsetLeft的值而非auto。
IE7下的表現(xiàn)更類似于float，會附加到父元素的末尾。


如何理解CSS中的Position和Float屬性

一些的position小知識

1）應(yīng)用了position: relative/absolute的元素，margin屬性仍然有效，以position:relative來舉例。如果設(shè)置了left、top、bottom、right的屬性，建議大家不要設(shè)置margin數(shù)據(jù)，因為很難精確元素的定位，盡量減少干擾因素。
如何理解CSS中的Position和Float屬性

2）position: absolute忽略根元素的padding。

代碼如下:

<div id="a" >A
    <div id="b" >A - 1
        <div id="c" >A - 2
        </div>
    </div>
</div>

如何理解CSS中的Position和Float屬性

3）在IE6/7中設(shè)置position屬性后會導(dǎo)致z-index屬性失效

代碼如下:

<!-- 解決方案，父元素設(shè)置一個更大的z-index值即可 --><div >  a    <div >      b    </div></div>
4）行內(nèi)元素在應(yīng)用了position：absolute之后會改變display。
代碼如下:
<span >        我的display屬性由inline變成了block</span>

如何理解CSS中的Position和Float屬性
因此，要注意到relative是并沒有改變行內(nèi)元素的呈現(xiàn)模式，而absolute是會改變行內(nèi)元素的呈現(xiàn)模式，如果設(shè)置了absolute并不需要顯式的的將元素display改成block。

5）應(yīng)用了position: absolute / relative之后，會覆蓋其他非定位元素（即position為static的元素），如果你不想覆蓋到其他元素，也可以將z-index設(shè)置成-1。
如何理解CSS中的Position和Float屬性

Fixed

在很長的時間里，這個屬性值因為兼容性問題，并沒有得到非常廣泛的應(yīng)用（IE6未實現(xiàn)該屬性值）。fixed和absolute有很多共同點：

  1. 會改變行內(nèi)元素的呈現(xiàn)模式，使display之變更為block。會讓元素脫離普通流，不占據(jù)空間。默認(rèn)會覆蓋到非定位元素上。

fixed與absolute較大的區(qū)別在于：absolute的”根元素“是可以被設(shè)置的，而fixed則其”根元素“固定為瀏覽器窗口。即當(dāng)你滾動網(wǎng)頁，其元素與瀏覽器窗口之間的距離是恒定不變的。

如何理解CSS中的Position和Float屬性

 Float屬性

float的屬性值有none、left、right，有幾個要點：
只有橫向浮動，并沒有縱向浮動。當(dāng)元素應(yīng)用了float屬性后，將會脫離普通流，其容器（父）元素將得不到脫離普通流的子元素高度。如何理解CSS中的Position和Float屬性會將元素的display屬性變更為block。如何理解CSS中的Position和Float屬性浮動元素的后一個元素會圍繞著浮動元素（典型運用是文字圍繞圖片），與應(yīng)用了position的元素相比浮動元素并不會遮蓋后一個元素。浮動元素的前一個元素不會受到任何影響（如果你想讓兩個塊狀元素并排顯示，必須讓兩個塊狀元素都應(yīng)用float）。

與position的兼容性問題

1）元素同時應(yīng)用了position: relative、float、（top / left / bottom / right）屬性后，則元素先浮動到相應(yīng)的位置，然后再根據(jù)（top / left / bottom / right）所設(shè)置的距離來發(fā)生偏移。

<div style="position:relative; float:right; left:50px; top:10px;">div</div>

如何理解CSS中的Position和Float屬性

左圖中的div是沒有設(shè)置top、left值的，而右邊則設(shè)置了50px的偏移。

2）元素同時應(yīng)用了position: absolute及float屬性，則float失效。

<div style="position: absolute; right:10px; top: 10px; float: left;">我是一個應(yīng)用了position：absolute和float：left的DIV，不過我還是在瀏覽器的右邊，沒有浮動到左邊。</div>

如何理解CSS中的Position和Float屬性
3）第一個元素應(yīng)用了position之后會覆蓋著接下來的float元素（如果兩個元素所處的位置相同）

<div style="position: absolute; left:10px; top: 10px;"> 我是一個應(yīng)用了position：absolute的DIV。</div><div style="float:left; background: red; width: 300px; height: 150px; "> 我是float：left的DIV</div>

如何理解CSS中的Position和Float屬性

回顧：如果你不將float的元素的position設(shè)置成relative的話，你想通過設(shè)置float元素的z-index來的達(dá)到覆蓋position:absolute是無效的。同理，float元素下面存在position: absolute的子元素，如果你不將float的元素的position設(shè)置成relative的話，absolute元素是不會定位到float元素的。

4）同時應(yīng)用position: absolute和float: left會導(dǎo)致清除浮動無效（position: relative則可以清除浮動）。
常用的清除浮動的方法有兩種：

  1. 通過在容器中添加一個標(biāo)簽，設(shè)置該標(biāo)簽的樣式為 clear: both容器設(shè)置overflow: hidden

<div style="background: #fff; width: 100%; overflow: hidden;"> <div style="float: left; position: absolute;">我是DIV</div> <div style="clear: both;"></div><div>

如何理解CSS中的Position和Float屬性

以上就是如何理解CSS中的Position和Float屬性，小編相信有部分知識點可能是我們?nèi)粘９ぷ鲿姷交蛴玫降摹ＯＭ隳芡ㄟ^這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站題目：如何理解CSS中的Position和Float屬性-創(chuàng)新互聯(lián)
分享URL：http://bm7419.com/article40/dscsho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計公司、動態(tài)網(wǎng)站、網(wǎng)站內(nèi)鏈、App開發(fā)、外貿(mào)建站、網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

網(wǎng)站優(yōu)化排名