CSS 3-浮動、定位

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

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

文檔流

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

CSS定位

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

div{
 position:absolute/relative/fixed
}

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

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

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

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

3.fixed的定位：fixed元素的定位永遠(yuǎn)是相對于瀏覽器邊界的，和其他元素沒有關(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的值相同，按文檔流順序，后面的元素會懸浮在前面的元素上面。
z-index demo

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

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

局對居中

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

浮動元素的特征。

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

清除浮動

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