2022年前端面試指南：前端面試會(huì)問哪些問題？

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

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

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

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

　　元素的實(shí)際寬度=width+左右padding+左右border

　　元素的實(shí)際高度=height+上下padding+上下border

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

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

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

　　計(jì)算規(guī)則：

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

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

　　設(shè)置padding和border會(huì)使內(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框用的是原生的一般不會(huì)被遮住的。

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

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

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

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

　　· 如果給父元素添加visibility：hidden;同時(shí)在給子元素添加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萬(wàn)人。不論你是零基礎(chǔ)還是想提升，都可以找到適合的班型，千鋒教育隨時(shí)歡迎你來試聽。