關於CSS浮動、定位的詳細說明

關於CSS浮動、定位的詳細說明

一、文檔流的概念指什嗎？有哪種方式可以讓元素脫離文檔流?

• 文檔流，指的是元素排版版面配置階段中，元素會自動從左往右，從上往下的流式排列。並最終表單自上而下分成一行行，並在每行中按從左至右的順序排放元素。脫離文檔流即是元素打亂了這個排列，或是從排版中拿走。

• 讓元素脫離文檔流的方法有：浮動和定位。

二、有幾種定位方式，分別是如何?定位的，使用情境如何？

CSS定位方式有四種：預設定位（static）、相對定位（relative）、絕對位置（absolute）和固定定位（fixed）

• static:預設值。沒有定位，元素在正常的流中,top,right,bottom,left和z-index屬性無效。樣本如下：

• relative:產生相對定位的元素，通過top,bottom,left,right的位置相對於其正常位置進行定位。其中的相對指的是相對於元素在預設流中的位置。

注意：

1.將元素position屬性設定為relative之後，再通過top,bottom,left,right屬性對其進行相對於原來位置的位移；

2.元素位移之後，他本來在預設文件流中佔據的位置仍然存在，其緊挨其後的元素的定位依據它本來的位置定位；

3.該元素位移之後，可能存在覆蓋其他元素的情況，可以使用z-index屬性顯示層級有限層級。

樣本：

第二個盒子項目相對於之前的位置（虛線部分）向下平移了20px,向右平移了30px。

要想使第三個區塊層級元素被遮擋的部分浮現出來，我們可以使用如下代碼實現：

注意：使用z-index必須保證元素的樣式中含有定位方式，之前忘了給box3添加定位方式，導致z-index對box3不起作用。

• absolute：產生絕對位置的元素，相對於static定位外的第一個父元素進行定位。

注意：

1.絕對位置的元素已經脫離了文檔流，普通流中其他元素的布局就像絕對元素不存在一樣；

2.絕對位置的元素的位置是相對於最近的已定位的祖先元素，如果元素沒有已定位的祖先元素，它的位置就相對於body；

3.絕對位置的框可以覆蓋頁面的其他元素。

樣本：

這種情況是離box2最近的父元素已定位的情況，如果離box2最近的父元素沒有定位的話，樣本如下：

• fixed：本質上是一種絕對位置，不為元素預留空間。通過指定相對於螢幕視窗的位置來指定元素的空間，且元素的位置在螢幕滾動時不會發生變化。應用於很多網站頂端的固定導航、右下角的固定廣告等等。

樣本：

三、absolute, relative, fixed位移的參考點分別是什嗎？

absolute位移的參考點是：相對於最近的已定位的父元素，如果沒有，則相對於body元素；

relative位移的參考點是：相對於元素在普通流中的原來位置；

fixed位移的參考點是：相對於瀏覽器視窗。

四、z-index 有什麼作用? 如何使用?

z-index屬性用於設定節點的堆疊順序，擁有更高堆疊順序的節點將顯示在堆疊順序較低的節點前面。

使用方法：樣本

1.z-index僅對定位元素有效（position:relative||absolute||fixed）;

2.z-index只可比較同級元素

五、position:relative和負margin都可以使元素位置發生位移?二者有什麼區別？

position:relative和負margin都可以使元素位置發生位移，二者的區別表現在：

• 負margin會使元素在文檔流中的位置發生位移，它會放棄位移之前佔據的空間，緊挨其後的元素會填充這部分空間；

• 相對定位後元素位置發生位移，它仍會堅守原來佔據的空間，不會讓文檔流的其他元素流入。

樣本：

六、如何讓一個固定寬高的元素在頁面上垂直水平置中?

可以使用絕對位置和負margin,樣本：

七、浮動元素有什麼特徵？對其他浮動元素、普通元素、文字分別有什麼影響?

• 浮動元素的特徵有：

1.塊在一排顯示；

2.內嵌元素支援寬高；

3.無論是塊元素還是內嵌元素，沒有寬度時預設內容撐開寬度；

4.脫離文檔流；

5.提升層級半級。

• 對其他浮動元素的影響：後浮動的元素永不會超過先浮動元素的頂端。

• 對普通元素的影響：浮動元素會從文檔正常流中刪除，使得緊挨它的元素位置發生位移，影響布局。

• 對文字的影響：浮動元素向下延伸時，不會影響正常文本的顯示，文本會相對於浮動元素進行位移。但部分文本背景會被浮動元素遮住。（可參考大話FLOAT）

浮動樣本：

八、清除浮動指什麼? 如何清除浮動?

清除浮動指的是：在非IE瀏覽器（如Firefox）下，當容器的高度為auto,且容器的內容中有浮動（float為left或right）的元素，在這種情況下，容器的高度不能自動伸長以適應內容的高度，使得內容溢出到容器外面而影響布局的現象，為了防止這個現象的出現而進行的CSS處理，就叫CSS清除浮動。

清除浮動的方法：

1.使用帶clear屬性的空元素

在浮動元素後使用一個空元素如 <p class="clear"></p> ，並在CSS中賦予 .clear{clear:both;} 屬性即可清理浮動。亦可使用 <br class="clear" /> 或 <hr class="clear" /> 來進行清理。

2.使用CSS的overflow屬性

給浮動元素的容器添加overflow:hidden;或overflow:auto;可以清除浮動，另外在 IE6 中還需要觸發 hasLayout ，例如為父元素設定容器寬高或設定 zoom:1。

3.使用CSS的:after虛擬元素

附加：關於使用clear:both清除浮動，一直都不太明白，還有就是對清除浮動的理解有誤，以為清除浮動之後，元素的渲染順序和普通流一樣，實際不是這樣的，下面給出我自己的理解，不足之處，歡迎大家批評指正。

• 關於浮動

如下代碼中：

在父容器中添加一個背景圖片，圖片會按照普通流渲染

若是在此基礎上給背景圖片添加浮動，效果如下：

我們可以看到父元素高度塌陷，背景圖片脫離文檔流，所以此時父容器p補給高度了，讓我們給父容器添加點文字看看它的高度變化

父容器的高度被撐開了，有木有！有木有！

所以子項目浮動使得父元素塌陷的原因是：因為沒有預先設定p高度，所以p高度由其包含的子項目高度決定。而浮動脫離文檔流，所以圖片並不會被計算高度。此時的p中，相當於p中子項目高度為0。

• 一個困擾我很久的問題，和大家分享下，上代碼吧：

我不理解的點是：為什麼情況二中box2的寬度比情況一中box2的寬度大，情況二中的box2可以浮動上去，而情況一中的不可以呢？

答案是：因為情況一中寬度限制100px，所以box2文字不能靠右圍繞，所以只能往下。 對於情況2，因為寬度為200px，所以box2在這個寬度內可以圍繞box1

• 關於clear:both 的理解：

Clear:both;其實就是利用清除浮動來把外層的p撐開，所以有時候，我們在將內部p都設定成浮動之後，就會發現，外層p的背景沒有顯示，原因就是外層的p沒有撐開，太小，所以能看到的背景僅限於一條線。

樣本如下：

關於CSS浮動、定位的知識先說這麼多，有什麼不足的地方歡迎大家指正。