關(guān)于CSS浮動(dòng)、定位的詳細(xì)說(shuō)明

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

二、有幾種定位方式，分別是如何實(shí)現(xiàn)定位的，使用場(chǎng)景如何？

CSS定位方式有四種：默認(rèn)定位（static）、相對(duì)定位（relative）、絕對(duì)定位（absolute）和固定定位（fixed）

注意：

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不起作用。

注意：

1.絕對(duì)定位的元素已經(jīng)脫離了文檔流，普通流中其他元素的布局就像絕對(duì)元素不存在一樣；

2.絕對(duì)定位的元素的位置是相對(duì)于最近的已定位的祖先元素，如果元素沒(méi)有已定位的祖先元素，它的位置就相對(duì)于body；

3.絕對(duì)定位的框可以覆蓋頁(yè)面的其他元素。

示例：

這種情況是離box2最近的父元素已定位的情況，如果離box2最近的父元素沒(méi)有定位的話，示例如下：

示例：

三、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)在：

示例：

六、如何讓一個(gè)固定寬高的元素在頁(yè)面上垂直水平居中?

可以使用絕對(duì)定位和負(fù)margin,示例：

七、浮動(dòng)元素有什么特征？對(duì)其他浮動(dòng)元素、普通元素、文字分別有什么影響?

1.塊在一排顯示；

2.內(nèi)聯(lián)元素支持寬高；

3.無(wú)論是塊元素還是內(nèi)聯(lián)元素，沒(méi)有寬度時(shí)默認(rèn)內(nèi)容撐開(kāi)寬度；

4.脫離文檔流；

5.提升層級(jí)半級(jí)。

浮動(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è)空元素如 <p class="clear"></p> ，并在CSS中賦予 .clear{clear:both;} 屬性即可清理浮動(dòng)。亦可使用 <br class="clear" /> 或 <hr class="clear" /> 來(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)指正。

如下代碼中：

在父容器中添加一個(gè)背景圖片，圖片會(huì)按照普通流渲染

若是在此基礎(chǔ)上給背景圖片添加浮動(dòng)，效果如下：

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

父容器的高度被撐開(kāi)了，有木有！有木有！

所以子元素浮動(dòng)使得父元素塌陷的原因是：因?yàn)闆](méi)有預(yù)先設(shè)置p高度，所以p高度由其包含的子元素高度決定。而浮動(dòng)脫離文檔流，所以圖片并不會(huì)被計(jì)算高度。此時(shí)的p中，相當(dāng)于p中子元素高度為0。

我不理解的點(diǎn)是：為什么情況二中box2的寬度比情況一中box2的寬度大，情況二中的box2可以浮動(dòng)上去，而情況一中的不可以呢？

答案是：因?yàn)榍闆r一中寬度限制100px，所以box2文字不能靠右圍繞，所以只能往下。 對(duì)于情況2，因?yàn)閷挾葹?00px，所以box2在這個(gè)寬度內(nèi)可以圍繞box1

Clear:both;其實(shí)就是利用清除浮動(dòng)來(lái)把外層的p撐開(kāi)，所以有時(shí)候，我們?cè)趯?nèi)部p都設(shè)置成浮動(dòng)之后，就會(huì)發(fā)現(xiàn)，外層p的背景沒(méi)有顯示，原因就是外層的p沒(méi)有撐開(kāi)，太小，所以能看到的背景僅限于一條線。

示例如下：

關(guān)于CSS浮動(dòng)、定位的知識(shí)先說(shuō)這么多，有什么不足的地方歡迎大家指正。

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com