這幾天有空兼蕊，學(xué)習(xí)了CSS浮動(dòng)和定位初厚，和大家分享幾個(gè)問(wèn)題，希望對(duì)學(xué)習(xí)CSS浮動(dòng)和定位的同學(xué)有所幫助孙技。
一产禾、文檔流的概念指什么？有哪種方式可以讓元素脫離文檔流?
- 文檔流牵啦，指的是元素排版布局過(guò)程中亚情，元素會(huì)自動(dòng)從左往右，從上往下的流式排列哈雏。并最終窗體自上而下分成一行行楞件，并在每行中按從左到右的順序排放元素。脫離文檔流即是元素打亂了這個(gè)排列裳瘪，或是從排版中拿走土浸。
- 讓元素脫離文檔流的方法有：浮動(dòng)和定位。
二彭羹、有幾種定位方式黄伊，分別是如何實(shí)現(xiàn)定位的，使用場(chǎng)景如何派殷？
CSS定位方式有四種：默認(rèn)定位（static）还最、相對(duì)定位（relative）、絕對(duì)定位（absolute）和固定定位（fixed）
-
static:默認(rèn)值愈腾。沒(méi)有定位憋活，元素在正常的流中,top,right,bottom,left和z-index屬性無(wú)效岂津。示例如下：
- relative:生成相對(duì)定位的元素虱黄，通過(guò)top,bottom,left,right的位置相對(duì)于其正常位置進(jìn)行定位。其中的相對(duì)指的是相對(duì)于元素在默認(rèn)流中的位置吮成。
****注意：
1.將元素position屬性設(shè)置為relative之后橱乱，再通過(guò)top,bottom,left,right屬性對(duì)其進(jìn)行相對(duì)于原來(lái)位置的偏移；
2.元素偏移之后粱甫，他本來(lái)在默認(rèn)文檔流中占據(jù)的位置仍然存在泳叠，其緊挨其后的元素的定位依據(jù)它本來(lái)的位置定位；
3.該元素偏移之后茶宵，可能存在覆蓋其他元素的情況危纫，可以使用z-index屬性顯示層級(jí)有限級(jí)別。****
示例：
第二個(gè)盒子元素相對(duì)于之前的位置（虛線部分）向下平移了20px,向右平移了30px。
要想使第三個(gè)塊級(jí)元素被遮擋的部分浮現(xiàn)出來(lái)种蝶，我們可以使用如下代碼實(shí)現(xiàn)：
注意：使用z-index必須保證元素的樣式中含有定位方式契耿，之前忘了給box3添加定位方式，導(dǎo)致z-index對(duì)box3不起作用螃征。 - absolute：生成絕對(duì)定位的元素搪桂，相對(duì)于static定位外的第一個(gè)父元素進(jìn)行定位。
注意：
1.絕對(duì)定位的元素已經(jīng)脫離了文檔流盯滚，普通流中其他元素的布局就像絕對(duì)元素不存在一樣踢械；
2.絕對(duì)定位的元素的位置是相對(duì)于最近的已定位的祖先元素，如果元素沒(méi)有已定位的祖先元素魄藕，它的位置就相對(duì)于body内列；
3.絕對(duì)定位的框可以覆蓋頁(yè)面的其他元素。
示例：
這種情況是離box2最近的父元素已定位的情況背率，如果離box2最近的父元素沒(méi)有定位的話德绿，示例如下：
-
fixed：本質(zhì)上是一種絕對(duì)定位，不為元素預(yù)留空間退渗。通過(guò)指定相對(duì)于屏幕視窗的位置來(lái)指定元素的空間移稳，且元素的位置在屏幕滾動(dòng)時(shí)不會(huì)發(fā)生變化。應(yīng)用于很多網(wǎng)站頂端的固定導(dǎo)航会油、右下角的固定廣告等等个粱。
示例：
三、absolute, relative, fixed偏移的參考點(diǎn)分別是什么翻翩？
absolute偏移的參考點(diǎn)是：相對(duì)于最近的已定位的父元素都许，如果沒(méi)有，則相對(duì)于body元素嫂冻；
relative偏移的參考點(diǎn)是：相對(duì)于元素在普通流中的原來(lái)位置胶征；
fixed偏移的參考點(diǎn)是：相對(duì)于瀏覽器窗口。
四桨仿、z-index 有什么作用? 如何使用?
z-index屬性用于設(shè)置節(jié)點(diǎn)的堆疊順序睛低，擁有更高堆疊順序的節(jié)點(diǎn)將顯示在堆疊順序較低的節(jié)點(diǎn)前面。
使用方法：示例
1.z-index僅對(duì)定位元素有效（position:relative||absolute||fixed）;
2.z-index只可比較同級(jí)元素
五服傍、position:relative和負(fù)margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別钱雷？
position:relative和負(fù)margin都可以使元素位置發(fā)生偏移，二者的區(qū)別表現(xiàn)在：
- 負(fù)margin會(huì)使元素在文檔流中的位置發(fā)生偏移吹零，它會(huì)放棄偏移之前占據(jù)的空間罩抗，緊挨其后的元素會(huì)填充這部分空間；
-
相對(duì)定位后元素位置發(fā)生偏移灿椅，它仍會(huì)堅(jiān)守原來(lái)占據(jù)的空間套蒂，不會(huì)讓文檔流的其他元素流入钞支。
示例：
設(shè)置-margin前
六、如何讓一個(gè)固定寬高的元素在頁(yè)面上垂直水平居中?
可以使用絕對(duì)定位和負(fù)margin,示例：
七操刀、浮動(dòng)元素有什么特征伸辟？對(duì)其他浮動(dòng)元素、普通元素馍刮、文字分別有什么影響?
- 浮動(dòng)元素的特征有：
1.塊在一排顯示信夫；
2.內(nèi)聯(lián)元素支持寬高；
3.無(wú)論是塊元素還是內(nèi)聯(lián)元素卡啰，沒(méi)有寬度時(shí)默認(rèn)內(nèi)容撐開寬度静稻；
4.脫離文檔流；
5.提升層級(jí)半級(jí)匈辱。 - 對(duì)其他浮動(dòng)元素的影響：后浮動(dòng)的元素永不會(huì)超過(guò)先浮動(dòng)元素的頂端振湾。
- 對(duì)普通元素的影響：浮動(dòng)元素會(huì)從文檔正常流中刪除，使得緊挨它的元素位置發(fā)生偏移亡脸，影響布局押搪。
- 對(duì)文字的影響：浮動(dòng)元素向下延伸時(shí)，不會(huì)影響正常文本的顯示浅碾，文本會(huì)相對(duì)于浮動(dòng)元素進(jìn)行偏移大州。但部分文本背景會(huì)被浮動(dòng)元素遮住。（可參考大話FLOAT）
浮動(dòng)示例：
八垂谢、清除浮動(dòng)指什么? 如何清除浮動(dòng)?
清除浮動(dòng)指的是：在非IE瀏覽器（如Firefox）下厦画，當(dāng)容器的高度為auto,且容器的內(nèi)容中有浮動(dòng)（float為left或right）的元素，在這種情況下滥朱，容器的高度不能自動(dòng)伸長(zhǎng)以適應(yīng)內(nèi)容的高度根暑，使得內(nèi)容溢出到容器外面而影響布局的現(xiàn)象，為了防止這個(gè)現(xiàn)象的出現(xiàn)而進(jìn)行的CSS處理徙邻，就叫CSS清除浮動(dòng)排嫌。
清除浮動(dòng)的方法：
1.使用帶clear屬性的空元素
在浮動(dòng)元素后使用一個(gè)空元素如<pre><div class="clear"></div></pre>，并在CSS中賦予<pre>.clear{clear:both;}</pre>屬性即可清理浮動(dòng)缰犁。亦可使用<pre><br class="clear" /></pre>或<pre><hr class="clear" /></pre>來(lái)進(jìn)行清理淳地。
2.使用CSS的overflow屬性
給浮動(dòng)元素的容器添加overflow:hidden;或overflow:auto;可以清除浮動(dòng)，另外在 IE6 中還需要觸發(fā) hasLayout 民鼓，例如為父元素設(shè)置容器寬高或設(shè)置 zoom:1薇芝。
3.使用CSS的:after偽元素
**** 附加：****關(guān)于使用clear:both清除浮動(dòng)，一直都不太明白丰嘉，還有就是對(duì)清除浮動(dòng)的理解有誤，以為清除浮動(dòng)之后嚷缭，元素的渲染順序和普通流一樣饮亏，實(shí)際不是這樣的耍贾，下面給出我自己的理解，不足之處路幸，歡迎大家批評(píng)指正荐开。
- 關(guān)于浮動(dòng)
如下代碼中：
在父容器中添加一個(gè)背景圖片，圖片會(huì)按照普通流渲染
若是在此基礎(chǔ)上給背景圖片添加浮動(dòng)简肴，效果如下：
我們可以看到父元素高度塌陷晃听，背景圖片脫離文檔流，所以此時(shí)父容器div補(bǔ)給高度了砰识，讓我們給父容器添加點(diǎn)文字看看它的高度變化
父容器的高度被撐開了能扒，有木有！有木有辫狼！
*** 所以子元素浮動(dòng)使得父元素塌陷的原因是：因?yàn)闆](méi)有預(yù)先設(shè)置div高度初斑，所以div高度由其包含的子元素高度決定。而浮動(dòng)脫離文檔流膨处，所以圖片并不會(huì)被計(jì)算高度见秤。此時(shí)的div中，相當(dāng)于div中子元素高度為0真椿。*** - 一個(gè)困擾我很久的問(wèn)題鹃答，和大家分享下，上代碼吧：
情況一
情況二
我不理解的點(diǎn)是為什么情況二中box2的寬度比情況一中box2的寬度大突硝，情況二中的box2可以浮動(dòng)上去挣跋，而情況一中的不可以呢？
答案是：因?yàn)榍闆r一中寬度限制100px狞换，所以box2文字不能靠右圍繞避咆，所以只能往下。 對(duì)于情況2修噪，因?yàn)閷挾葹?00px查库，所以box2在這個(gè)寬度內(nèi)可以圍繞box1 -
關(guān)于clear:both 的理解：
Clear:both;其實(shí)就是利用清除浮動(dòng)來(lái)把外層的div撐開，所以有時(shí)候黄琼，我們?cè)趯?nèi)部div都設(shè)置成浮動(dòng)之后樊销，就會(huì)發(fā)現(xiàn)，外層div的背景沒(méi)有顯示脏款，原因就是外層的div沒(méi)有撐開围苫，太小，所以能看到的背景僅限于一條線撤师。
示例如下：
關(guān)于CSS浮動(dòng)剂府、定位的知識(shí)先說(shuō)這么多，有什么不足的地方歡迎大家指正剃盾，之后需要補(bǔ)充的內(nèi)容會(huì)在betterwlf更新腺占。
版權(quán)歸本人所有淤袜，如有轉(zhuǎn)載請(qǐng)說(shuō)明來(lái)源
參考：
1.CSS定位方式
2.CSS定位詳解
3.總結(jié)一下CSS中的定位 Position 屬性
4.position
5.CSS定位
6.CSS樣式表中z-index使用方法總結(jié)
7.CSS相對(duì)定位|絕對(duì)定位(五)之z-index篇
8.小tip: margin:auto實(shí)現(xiàn)絕對(duì)定位元素的水平垂直居中
