2018最新前端面試題十一

這次帶給大家2018最新前端面試題，我們知道在前端工作中面試是必不可少的一部分，這次的前端面試常考問題分類整理匯總就是來幫助大家度過前端面試著一大難關。一起來看一下。

【相關推薦：前端面試題（2020）】

一、描述z-index和疊加上下文是如何形成的。

首先來看在CSS中疊加上下文形成的原因：

1.負邊距 margin為負值時元素會依參考線向外偏移。 margin-left/margin-top的參考線為左邊的元素/上面的元素（如無兄弟元素則為父元素的左內側/上內側）,margin-right和margin-bottom的參考線為元素本身的border右側/border下側。一般可以利用負邊距來就行佈局，但沒有計算好的話就可能造成元素重疊。堆疊順序由元素在文件中的先後位置決定，後出現的會在上面。

2.position的relative/absolute/fixed定位 當為元素設定position值為relative/absolute/fixed後，元素發生的偏移可能產生重疊，且z-index屬性被啟動。 z-index值可以控制定位元素在垂直於顯示器方向（Z 軸）上的堆疊順序（stack order），值大的元素重疊時會在值小的元素上面。

z-index屬性 z-index只能在position屬性值為relative或absolute或fixed的元素上有效。

基本原理：z-index值可以控制定位元素在垂直於顯示器方向（Z 軸）上的堆疊順序（stack order），值大的元素重疊時會在值小的元素上面。

使用相對性：z-index值只決定同一父元素中的同級子元素的堆疊順序。父元素的z-index值（如果有）為子元素定義了堆疊順序（css版堆疊「拼爹」）。

向上追溯找不到含有z-index值的父元素的情況下，則可以視為自由的z-index元素，它可以與父元素的同級兄弟定位元素或其他自由的定位元素來比較z-index的值，決定其堆疊順序。同級元素的z-index值如果相同，則堆疊順序由元素在文件中的先後位置決定，後出現的會在上面。所以如果當你發現一個z-index值較大的元素被值較小的元素遮擋了，請先檢查它們之間的dom結點關係，多半是因為其父結點含有激活並設置了z-index值的position定位元素。

二、請描述 BFC(Block Formatting Context) 及其如何運作。

BFC（Block Formatting Context）直譯為「區塊層級格式化範圍」。

三、列舉不同的清除浮動的技巧，並指出它們各自適用的使用情境。

首先來說明為什麼要清除浮動？ 當一個容器中的元素全部浮動之後，由於浮動會讓元素脫離普通文檔流，所以對於外面的這個容器來講它就沒有內容將它撐開，背景設置無法顯示，margin設置無法顯示。 清除浮動的方法：

 1、增加新的元素、應用clear：both；

例如： <div class="outer"> <div class="div1">1</div> <div class="div2">2</div> <div class="div3">3</div> <div class="clear"></div> </div>
.clear{clear:both; height: 0; line-height: 0; font-size: 0}

優點：簡單，程式碼少，瀏覽器支援好，不容易出現怪問題缺點是要增加很多無效佈局，但這是清除浮動用的比較多的一種方法。

 2、父級div定義overflow：auto或hidden 3d858467c007003fbb089751739b6be5

//这里添加了一个class <div class="div1">1</div> <div class="div2">2</div> <div class="div3">3</div> </div>
.over-flow{ overflow: auto; zoom: 1; //zoom: 1; 是在处理兼容性问题 }

原理：必須定義width或zoom:1，同時無法定義height，使用overflow屬性來清除浮動有一點要注意，overflow屬性共有三個屬性值：hidden,auto,visible。我們可以使用hiddent和auto值來清除浮動，但切記不能使用visible值，如果使用這個值將無法達到清除浮動效果。

優點：簡單，程式碼少，瀏覽器支援好缺點：使用auto時內部寬高超過父級div時，會出現捲軸，使用hidden時會被隱藏

 3、 after 方法原理：利用:after和:before來在元素內部插入兩個元素塊，從面達到清除浮動的效果。其實作原理類似clear:both方法，只是差別在於:clear在html插入一個div.clear標籤，而這個方法則是利用其偽類clear:after在元素內部增加一個類似div.clear的效果。

下面來看看其具體的使用方法：

<div class="outer"> <div class="div1">1</div> <div class="div2">2</div> <div class="div3">3</div> </div>
.outer {zoom:1;} /==for IE6/7 Maxthon2==/ .outer :after {clear:both;content:’.’;display:block;width: 0;height: 0;visibility:hidden;}

其中clear:both;指清除所有浮動；content: '.'; display:block;對於FF/chrome/opera/ IE8不能缺少，其中content（）可以取值也可以為空。 visibility:hidden;的作用是允許瀏覽器渲染它，但不要顯示出來，這樣才能實現清除浮動。 所以總的來說，推薦使用偽類的方法。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：

2018最新前端面試題十

2018最新前端面試題九

#2018最新前端面試題八

以上是2018最新前端面試題十一的詳細內容。更多資訊請關注PHP中文網其他相關文章！