2022年前端面試指南：前端面試會問哪些問題？

　　1.簡述css中的不同盒模型的特性，以及應(yīng)用，介紹box-sizing屬性。

　　- **1.在css中盒模型分為2種：**

　　- **1)w3c標(biāo)準(zhǔn)盒子盒模型：**

　　默認(rèn)情況下我們使用的都是標(biāo)準(zhǔn)盒子模型，他的計算規(guī)則：

　　元素的實際寬度=width+左右padding+左右border

　　元素的實際高度=height+上下padding+上下border

　　width和height指的是內(nèi)容區(qū)的寬度和高度，所以設(shè)置了內(nèi)間距padding和邊框線border之后盒子是會被撐大的。

　　- **2)ie怪異盒子模型**

　　在ie盒模型中width和height就是元素的實際寬度和高度

　　計算規(guī)則：

　　元素內(nèi)容區(qū)的寬度=width-左右padding-左右border

　　元素內(nèi)容區(qū)的高度=height-上下padding-上下border

　　設(shè)置padding和border會使內(nèi)容區(qū)變小。

　　- **2.我們可以通過box-sizing屬性來更改盒子模型**

　　- 如果box-sizing:content-box;這種模式是w3c標(biāo)準(zhǔn)盒模型

　　- 如果box-sizing:border-box;這種模式是ie怪異盒模型

　　2.假設(shè)div里面設(shè)置overflow:hidden，里面有select框，被遮住怎么辦？

　　- 如果select框用的是原生的一般不會被遮住的。

　　- 如果用的是插件或者自己寫的，那么可能會被遮住，他被遮住的原因就是因為父級元素div里面寫了overflow:hidden，導(dǎo)致一旦超出這個盒子就會被隱藏掉，要想解決這個問題，那么我們可以改變這個下拉框的參照物，利用定位給他調(diào)整到指定的位置，利用z-index將層級提高，這樣就不會受到父元素的限制了。

　　3.父元素visibility：hidden;子元素設(shè)置visibility：visible，子元素顯示嗎？

　　· 這時候子元素是顯示的，原理如下：

　　· 當(dāng)只是給父元素添加visibility：hidden，子元素會繼承父元素的visibility：hidden的值，也會跟著父元素隱藏。

　　· 如果給父元素添加visibility：hidden;同時在給子元素添加visibility：visible，子元素是顯示的。原因：添加給子元素visibility：visible是大于父元素添加的visibility：hidden的。所以優(yōu)先執(zhí)行子元素的visibility：visible屬性。

　　更多關(guān)于“前端培訓(xùn)”的問題，歡迎咨詢千鋒教育在線名師。千鋒教育多年辦學(xué)，課程大綱緊跟企業(yè)需求，更科學(xué)更嚴(yán)謹(jǐn)，每年培養(yǎng)泛IT人才近2萬人。不論你是零基礎(chǔ)還是想提升，都可以找到適合的班型，千鋒教育隨時歡迎你來試聽。