前端面試學習(五)

2021-07-27 23:41:08 字數 1685 閱讀 8763

1.說說你對頁面中使用定位(position)的理解?

答:使用

css布局position非常重要,語法如下:

position:static | relative | absolute | fixed | center | page | sticky

預設值:

static,center、page、sticky是css3中新增加的值。

(1)、static

可以認為靜態的,預設元素都是靜態的定位,物件遵循常規流。此時

4個定位偏移屬性不會被應用,也就是使用left,right,bottom,top將不會生效。

(2)、relative

相對定位,物件遵循常規流,並且參照自身在常規流中的位置通過

top,right,bottom,left這4個定位偏移屬性進行偏移時不會影響常規流中的任何元素。

(3)、absolute

a、絕對定位,物件脫離常規流,此時偏移屬性參照的是離自身最近的定位祖先元素,如果沒有定位的祖先元素,則一直回溯到body元素。盒子的偏移位置不影響常規流中的任何元素,其margin不與其他任何margin摺疊。

b、元素定位參考的是離自身最近的定位祖先元素,要滿足兩個條件,第乙個是自己的祖先元素,可以是父元素也可以是父元素的父元素,一直找,如果沒有則選擇body為對照物件。第二個條件是要求祖先元素必須定位,通俗說就是position的屬性值為非static都行。

(4)、fixed

固定定位,與

absolute一致,但偏移定位是以視窗為參考。當出現滾動條時,物件不會隨著滾動。

(5)、center

與absolute一致,但偏移定位是以定位祖先元素的中心點為參考。盒子在其包含容器垂直水平居中。(css3)

(6)、page

與absolute一致。元素在分頁**或者區域塊內,元素的包含塊始終是初始包含塊,否則取決於每個absolute模式。(css3)

(7)、sticky

物件在常態時遵循常規流。它就像是

relative和fixed的合體,當在螢幕中時按常規流排版,當捲動到螢幕外時則表現如fixed。該屬性的表現是現實中你見到的吸附效果。(css3)。

2.如何解決多個元素重疊問題?

答:使用z-index屬性可以設定元素的層疊順序

z-index屬性

語法:z-index: auto |

預設值:

auto

適用於:定位元素。即定義了

position為非static的元素

取值:auto: 元素在當前層疊上下文中的層疊級別是0。元素不會建立新的區域性層疊上下文,除非它是根元素。 

整數:用整數值來定義堆疊級別。可以為負值。

說明:檢索或設定物件的層疊順序。

z-index用於確定元素在當前層疊上下文中的層疊級別,並確定該元素是否建立新的區域性層疊上下文。 

當多個元素層疊在一起時,數字大者將顯示在上面。

3.overfloa:hidden是否形成新的塊級格式化上下文?

答:會形成,觸發

bfc的條件有:

- float的值不為none。

- overflow的值不為visible。

- display的值為table-cell, table-caption, inline-block 中的任何乙個。

- position的值不為relative 和static。

前端面試 前端面試總結2018 07

2周面試了11家公司吧,具體面試題如下 面試第一周 7.23 7.27 中谷芯厚建 蘇寧vivo外包 電面 杭州通策會 第二週 7.30 8.3 南京軟體谷研究院 烽火科技 邁特望,蘇寧外包 電面 平安科技外包 華泰 外包 一輪 技術面,二輪現場技術面 三隻松鼠 電面 一.中谷芯 二.厚建 angu...

前端面試 前端面試題300道

jsonp是如何產生的 1 乙個眾所周知的問題,ajax直接請求普通檔案存在跨域無許可權問題,甭管你是靜態頁面 動態頁面 web伺服器,wcf,只要是跨域請求,一律不准。2 不過我們又發現,web頁面上呼叫js檔案時則不受是否跨域的影響 不僅如此,我們還發現凡是擁有 src 這個屬性的標籤都擁有跨域...

前端面試整合

1.befor和 befor區別 1 相同點 都可以用來表示偽類物件,設定物件前面的內容 befor和 befor是等效的 2 不同點 befor是css2的寫法,befor是css3的寫法。css2的相容性好 h5開發中用 befor好 但冒號是css3偽類。雙冒號表示偽元素 2.盒模型 box ...