一篇文章我們把「Web前端開發(fā)進(jìn)階篇」CSS框模型講解完了，接著我們來(lái)講解下一篇文章，關(guān)于CSS定位的內(nèi)容知識(shí)，小伙伴們跟上我的節(jié)奏，動(dòng)起來(lái)，Let's go！

【引言】

CSS定位思想很簡(jiǎn)單，就是讓你定義的元素框相對(duì)于其正常位置應(yīng)該出現(xiàn)的位置，相對(duì)于父元素、另一個(gè)元素甚至是瀏覽器窗口的位置。浮動(dòng)不是完全定位，不過(guò)，它也不是正常流布局。在我們切頁(yè)面的過(guò)程中，定位和浮動(dòng)是經(jīng)常用，用不好，就會(huì)出現(xiàn)頁(yè)面在不同瀏覽器的兼容性問(wèn)題。我會(huì)在下面的文章中詳細(xì)說(shuō)明。

CSS定位機(jī)制

CSS有三種定位機(jī)制：普通流、浮動(dòng)和絕對(duì)定位。

除非專門指定，否則所有框都在普通流中定位。也就是說(shuō)，普通流中的元素的位置由元素在 (X)HTML 中的位置決定。

塊級(jí)框從上到下一個(gè)接一個(gè)地排列，框之間的垂直距離是由框的垂直外邊距計(jì)算出來(lái)。

行內(nèi)框在一行中水平布置?？梢允褂盟絻?nèi)邊距、邊框和外邊距調(diào)整它們的間距。但是，垂直內(nèi)邊距、邊框和外邊距不影響行內(nèi)框的高度。由一行形成的水平框稱為行框（Line Box），行框的高度總是足以容納它包含的所有行內(nèi)框。不過(guò)，設(shè)置行高可以增加這個(gè)框的高度。

CSS position屬性

通過(guò)position屬性我們可以選擇4中不同類型的定位。

1、position：static

元素框正常生成。塊級(jí)元素生成一個(gè)矩形框，作為文檔流的一部分，行內(nèi)元素則會(huì)創(chuàng)建一個(gè)或多個(gè)行框，置于其父元素中。

2、position：relative

元素框偏移某個(gè)距離。元素仍保持其未定位前的形狀，它原本所占的空間仍保留。

3、position：absolute

元素框從文檔流完全刪除，并相對(duì)于其包含塊定位。包含塊可能是文檔中的另一個(gè)元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會(huì)關(guān)閉，就好像元素原來(lái)不存在一樣。元素定位后生成一個(gè)塊級(jí)框，而不論原來(lái)它在正常流中生成何種類型的框。

4、position：fixed

元素框的表現(xiàn)類似于將 position 設(shè)置為 absolute，不過(guò)其包含塊是視窗本身。

提示：相對(duì)定位實(shí)際上被看作普通流定位模型的一部分，因?yàn)樵氐奈恢孟鄬?duì)于它在普通流中的位置。

CSS定位屬性

CSS 定位屬性允許你對(duì)元素進(jìn)行定位。

position：把元素放置到一個(gè)靜態(tài)的、相對(duì)的、絕對(duì)的、或固定的位置中。

top：定義了一個(gè)定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。

right：定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移。

bottom：定義了定位元素下外邊距邊界與其包含塊下邊界之間的偏移。

left：定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移。

overflow：設(shè)置當(dāng)元素的內(nèi)容溢出其區(qū)域時(shí)發(fā)生的事情。

clip：設(shè)置元素的形狀。元素被剪入這個(gè)形狀之中，然后顯示出來(lái)。

vertical-align：設(shè)置元素的垂直對(duì)齊方式。

z-index：設(shè)置元素的堆疊順序。

了解了這些屬性后，下面我們?cè)敿?xì)的說(shuō)說(shuō)相對(duì)定位和絕對(duì)定位。

CSS相對(duì)定位

相對(duì)定位是一個(gè)非常容易掌握的概念。如果對(duì)一個(gè)元素進(jìn)行相對(duì)定位，它將出現(xiàn)在它所在的位置上。然后，可以通過(guò)設(shè)置垂直或水平位置，讓這個(gè)元素“相對(duì)于”它的起點(diǎn)進(jìn)行移動(dòng)。

如果將 top 設(shè)置為 20px，那么框?qū)⒃谠恢庙敳肯旅?20 像素的地方。如果 left 設(shè)置為 30 像素，那么會(huì)在元素左邊創(chuàng)建 30 像素的空間，也就是將元素向右移動(dòng)。

#box_relative {
 position: relative;
 left: 30px;
 top: 20px;
}

如下圖所示：

注意，在使用相對(duì)定位時(shí)，無(wú)論是否進(jìn)行移動(dòng)，元素仍然占據(jù)原來(lái)的空間。因此，移動(dòng)元素會(huì)導(dǎo)致它覆蓋其它框。

CSS絕對(duì)定位

絕對(duì)定位使元素的位置與文檔流無(wú)關(guān)，因此不占據(jù)空間。這一點(diǎn)與相對(duì)定位不同，相對(duì)定位實(shí)際上被看作普通流定位模型的一部分，因?yàn)樵氐奈恢孟鄬?duì)于它在普通流中的位置。

普通流中其它元素的布局就像絕對(duì)定位的元素不存在一樣：

#box_relative {
 position: absolute;
 left: 30px;
 top: 20px;
}

如下圖所示：

絕對(duì)定位的元素的位置相對(duì)于最近的已定位祖先元素，如果元素沒(méi)有已定位的祖先元素，那么它的位置相對(duì)于最初的包含塊。

對(duì)于定位的主要問(wèn)題是要記住每種定位的意義。所以，現(xiàn)在讓我們復(fù)習(xí)一下學(xué)過(guò)的知識(shí)吧：相對(duì)定位是“相對(duì)于”元素在文檔中的初始位置，而絕對(duì)定位是“相對(duì)于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相對(duì)于”最初的包含塊。

注釋：根據(jù)用戶代理的不同，最初的包含塊可能是畫布或 HTML 元素。

提示：因?yàn)榻^對(duì)定位的框與文檔流無(wú)關(guān)，所以它們可以覆蓋頁(yè)面上的其它元素?？梢酝ㄟ^(guò)設(shè)置 z-index 屬性來(lái)控制這些框的堆放次序。

CSS浮動(dòng)

浮動(dòng)的框可以向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂?/strong>

由于浮動(dòng)框不在文檔的普通流中，所以文檔的普通流中的塊框表現(xiàn)得就像浮動(dòng)框不存在一樣。

請(qǐng)看下圖，當(dāng)把框 1 向右浮動(dòng)時(shí)，它脫離文檔流并且向右移動(dòng)，直到它的右邊緣碰到包含框的右邊緣：

再請(qǐng)看下圖，當(dāng)框 1 向左浮動(dòng)時(shí)，它脫離文檔流并且向左移動(dòng)，直到它的左邊緣碰到包含框的左邊緣。因?yàn)樗辉偬幱谖臋n流中，所以它不占據(jù)空間，實(shí)際上覆蓋住了框 2，使框 2 從視圖中消失。

如果把所有三個(gè)框都向左移動(dòng)，那么框 1 向左浮動(dòng)直到碰到包含框，另外兩個(gè)框向左浮動(dòng)直到碰到前一個(gè)浮動(dòng)框。

如下圖所示，如果包含框太窄，無(wú)法容納水平排列的三個(gè)浮動(dòng)元素，那么其它浮動(dòng)塊向下移動(dòng)，直到有足夠的空間。如果浮動(dòng)元素的高度不同，那么當(dāng)它們向下移動(dòng)時(shí)可能被其它浮動(dòng)元素“擋住”：

CSS float 屬性

通過(guò) float 屬性實(shí)現(xiàn)元素的浮動(dòng)。因此，我們可以創(chuàng)建浮動(dòng)框可以使文本圍繞圖像：

要想阻止行框圍繞浮動(dòng)框，需要對(duì)該框應(yīng)用 clear 屬性。clear 屬性的值可以是 left、right、both 或 none，它表示框的哪些邊不應(yīng)該挨著浮動(dòng)框。

為了實(shí)現(xiàn)這種效果，在被清理的元素的上外邊距上添加足夠的空間，使元素的頂邊緣垂直下降到浮動(dòng)框下面：

這是一個(gè)有用的工具，它讓周圍的元素為浮動(dòng)元素留出空間。

讓我們更詳細(xì)地看看浮動(dòng)和清理。假設(shè)希望讓一個(gè)圖片浮動(dòng)到文本塊的左邊，并且希望這幅圖片和文本包含在另一個(gè)具有背景顏色和邊框的元素中。您可能編寫下面的代碼：

.news {
 background-color: gray;
 border: solid 1px black;
 }

.news img {
 float: left;
 }

.news p {
 float: right;
 }

<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>

這種情況下，出現(xiàn)了一個(gè)問(wèn)題。因?yàn)楦?dòng)元素脫離了文檔流，所以包圍圖片和文本的 div 不占據(jù)空間。

如何讓包圍元素在視覺(jué)上包圍浮動(dòng)元素呢？需要在這個(gè)元素中的某個(gè)地方應(yīng)用 clear：

不幸的是出現(xiàn)了一個(gè)新的問(wèn)題，由于沒(méi)有現(xiàn)有的元素可以應(yīng)用清理，所以我們只能添加一個(gè)空元素并且清理它。

.news {
 background-color: gray;
 border: solid 1px black;
 }

.news img {
 float: left;
 }

.news p {
 float: right;
 }

.clear {
 clear: both;
 }

<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="clear"></div>
</div>

這樣可以實(shí)現(xiàn)我們希望的效果，但是需要添加多余的代碼。常常有元素可以應(yīng)用 clear，但是有時(shí)候不得不為了進(jìn)行布局而添加無(wú)意義的標(biāo)記。

不過(guò)我們還有另一種辦法，那就是對(duì)容器 div 進(jìn)行浮動(dòng)：

.news {
 background-color: gray;
 border: solid 1px black;
 float: left;
 }

.news img {
 float: left;
 }

.news p {
 float: right;
 }

<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>

這樣會(huì)得到我們希望的效果。不幸的是，下一個(gè)元素會(huì)受到這個(gè)浮動(dòng)元素的影響。為了解決這個(gè)問(wèn)題，有些人選擇對(duì)布局中的所有東西進(jìn)行浮動(dòng)，然后使用適當(dāng)?shù)挠幸饬x的元素（常常是站點(diǎn)的頁(yè)腳）對(duì)這些浮動(dòng)進(jìn)行清理。這有助于減少或消除不必要的標(biāo)記。

CSS定位今天就講解到這里了，下一篇講解CSS選擇器，希望大家不要放棄學(xué)習(xí)哦！

PS：

本文為‘Web前端進(jìn)階指南’原創(chuàng)，手動(dòng)碼字不易，小伙伴們別忘了順手點(diǎn)個(gè)贊加個(gè)關(guān)注哈，有什么不懂的下方留言評(píng)論或私信。謝謝大家哈！

、浮動(dòng)

本章目標(biāo)：

• 會(huì)使用display屬性排版網(wǎng)頁(yè)元素
• 會(huì)使用float屬性排版網(wǎng)頁(yè)元素
• 會(huì)使用float屬性創(chuàng)建橫向多列布局
• 會(huì)使用四種防止父級(jí)邊框塌陷的清除浮動(dòng)的方法

4.1、標(biāo)準(zhǔn)文檔流

標(biāo)準(zhǔn)文檔流：指元素根據(jù)塊元素或行內(nèi)元素的特性按從上到下，從左到右的方式自然排列。這也是元素默認(rèn)的排列方式

標(biāo)準(zhǔn)文檔流組成

• 塊級(jí)元素（block） <h1>…<h6>、<p>、<div>、列表
• 內(nèi)聯(lián)元素（inline） <span>、<a>、<img/>、<strong>... 內(nèi)聯(lián)標(biāo)簽可以包含于塊級(jí)標(biāo)簽中，成為它的子元素，而反過(guò)來(lái)則不成立

4.2、display

display屬性

在這里插入圖片描述