CSS 3-浮動(dòng)、定位

TalkingData 發(fā)布于2019-08-29 15:32 / 2981人閱讀

摘要：讓元素脫離文檔流有三種方法浮動(dòng)絕對(duì)定位固定定位元素脫離文檔流定位的三種布局機(jī)制文檔流浮動(dòng)定位。定位元素會(huì)脫離文檔流。浮動(dòng)的元素是先站住自己所在文檔流的位置，然后左右浮動(dòng)。

文檔流

文檔流是一種默認(rèn)定位方式，在文檔流中元素框的位置由元素在html中的位置決定，文檔流中元素的position屬性為默認(rèn)的static或繼承來的static并按照普通流定位。塊級(jí)元素獨(dú)占一行，自上而下排列；內(nèi)聯(lián)元素從左到右排列。
讓元素脫離文檔流有三種方法：
浮動(dòng)float;
絕對(duì)定位position:absolute;
固定定位position:fixed;
元素脫離文檔流demo

CSS定位

CSS的三種布局機(jī)制：文檔流、浮動(dòng)、定位。定位定義元素相對(duì)于它正常位置應(yīng)該出現(xiàn)的位置，或者相對(duì)于父元素、另一個(gè)元素、瀏覽器本身偏移。定位方式有三種：

div{
 position:absolute/relative/fixed
}

1.position:fixed相對(duì)于瀏覽器的窗口定位，定位后的元素脫離文檔流。元素的位置通過 left,top,right以及bottom屬性進(jìn)行規(guī)定。fixed永遠(yuǎn)是根據(jù)瀏覽器窗口來定位，無論其他元素怎么設(shè)置，都影響不了它。
2.position:relative相對(duì)于元素自身正常位置進(jìn)行定位,元素在文檔流中仍占據(jù)原來空間，只是表現(xiàn)出來的位置會(huì)相對(duì)原來的位置偏移。left:20會(huì)向元素的 LEFT 位置添加 20 像素。
3.position:absolute,相對(duì)于有定位屬性（fix/relative/absolute，一般是用relative）的第一個(gè)父元素偏移,如果找不到這種父元素就向上層找，直到body，html元素。absolute定位元素會(huì)脫離文檔流。元素的位置通過 left,top,right以及bottom屬性進(jìn)行規(guī)定。
定位方式demo

absolute, relative, fixed 偏移的參考點(diǎn)

1.absolute的定位：瀏覽器會(huì)遞歸查找該元素的所有父元素，如果找到一個(gè)設(shè)置了position:relative/absolute/fixed的元素，就以該元素為基準(zhǔn)定位，如果沒找到，就以瀏覽器邊界定位。一般情況下，我們會(huì)將relative與absolute配套使用，方便我們對(duì)absolute元素定位。

2.relative的定位：relative元素的定位永遠(yuǎn)是相對(duì)于元素自身位置的，和其他元素沒關(guān)系，也不會(huì)影響其他元素。

3.fixed的定位：fixed元素的定位永遠(yuǎn)是相對(duì)于瀏覽器邊界的，和其他元素沒有關(guān)系。

z-index

具有定位屬性的元素設(shè)置top,right,bottom,left，z-index才有效。
z-index（設(shè)置層疊）,可以通過z-index屬性控制元素在Z軸方向的疊放順序，z-index越高，元素位置越靠上，如果為正數(shù)，則離用戶更近，為負(fù)數(shù)則表示離用戶更遠(yuǎn)。沒定位屬性的元素設(shè)置了無效果。如果2個(gè)元素的z-index的值相同，按文檔流順序，后面的元素會(huì)懸浮在前面的元素上面。
z-index demo

position:relative和負(fù)margin使元素位置發(fā)生偏移的區(qū)別

position：relative可以使元素相對(duì)于元素自身正常位置發(fā)生偏移，有relative定位屬性的元素仍然在文檔流中，它仍然占據(jù)著原來的位置，所以其他元素的位置不會(huì)發(fā)生變化。
負(fù)margin：通過負(fù)margin進(jìn)行偏移的元素，它會(huì)放棄偏移前占據(jù)的空間，這樣它后面文檔流中的其它元素就會(huì)“流”過來填充這部分空間，所以其他元素的位置發(fā)生了變化。
relativ,負(fù)margin偏移區(qū)別 demo

局對(duì)居中

將目標(biāo)元素的父元素設(shè)置absolute定位，四方向偏移值設(shè)置為0。再將目標(biāo)元素設(shè)置absolute定位，上、左方向設(shè)置偏移值為50%（這里50%是相對(duì)于父元素），讓元素的左上角原點(diǎn)位于頁(yè)面的中心。再使用負(fù)margin使元素左上角沿左、上移動(dòng)它寬高的一半，這樣就能使元素在頁(yè)面中垂直居中了。
demo

浮動(dòng)元素的特征。

float的設(shè)計(jì)初衷是用于文字環(huán)繞效果，即對(duì)一個(gè)圖片使用float之后，周圍的文字環(huán)繞它。
1.float使元素脫離文檔流，當(dāng)父元素沒設(shè)置固定高度時(shí)，元素浮動(dòng)脫離文檔流，父元素會(huì)收縮
2.元素設(shè)置浮動(dòng)或絕對(duì)定位后，如果不給元素設(shè)置寬度，元素具有收縮性，元素會(huì)根據(jù)內(nèi)容自動(dòng)調(diào)整寬度。也就是說absolute、float具有自適應(yīng)寬度的特性。
3.行內(nèi)元素、塊級(jí)元素浮動(dòng)后都會(huì)變成塊級(jí)元素。元素使用絕對(duì)定位后也會(huì)成塊級(jí)元素
4.浮動(dòng)的元素可以向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂Ｓ捎诟?dòng)元素會(huì)脫離文檔流，其他的普通元素會(huì)忽視浮動(dòng)元素，后面的元素會(huì)占據(jù)浮動(dòng)元素的文檔流空間。
元素浮動(dòng)的時(shí)候只能向左，或向右，不會(huì)向上，向下浮動(dòng)。浮動(dòng)的元素是先站住自己所在文檔流的位置，然后左右浮動(dòng)。元素浮動(dòng)后緊跟的內(nèi)聯(lián)元素會(huì)貼住浮動(dòng)的元素(圖文環(huán)繞)，文字會(huì)圍繞著浮動(dòng)元素，這也是設(shè)計(jì)浮動(dòng)元素的初衷。
浮動(dòng)demo

清除浮動(dòng)

元素浮動(dòng)后，父元素?zé)o法撐起高度（父元素未指定高度時(shí)），影響與父元素同級(jí)的元素。與浮動(dòng)元素同級(jí)的非浮動(dòng)元素會(huì)緊隨其后視浮動(dòng)元素不存在，占據(jù)浮動(dòng)元素原來的位置。若非第一個(gè)元素浮動(dòng)，則該元素之前的元素也需要浮動(dòng)，否則會(huì)影響布局。demo
1.元素加clear:left/right/both; 可清除該元素前面有浮動(dòng)元素產(chǎn)生的副作用。元素浮動(dòng)后誰受影響，clear就加給誰。
2.浮動(dòng)元素包裹父元素（或直接設(shè)置父元素），設(shè)置寬度100%，設(shè)置overflow：hidden
3.浮動(dòng)元素包裹父元素（或直接設(shè)置父元素），設(shè)置父元素after偽元素為block，再設(shè)置偽元素clear:both;