最新版前端工程師面試題--前端基礎(chǔ)(2)
1.2、Css
介紹一下盒模型
參考回答：
CSS盒模型本質(zhì)上是一個(gè)盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實(shí)際內(nèi)容。
標(biāo)準(zhǔn)盒模型：一個(gè)塊的總寬度 =?width+margin(左右) +?padding(左右) +?border(左右)
怪異盒模型：一個(gè)塊的總寬度 =?width+margin(左右)(既width已經(jīng)包含了padding和border值)
設(shè)置盒模型：box-sizing:border-box;
css布局
參考回答：
六種布局方式總結(jié)：圣杯布局、雙飛翼布局、Flex布局、絕對(duì)定位布局、表格布局、網(wǎng)格布局。
圣杯布局是指布局從上到下分為header、container、footer，然后container部分定為三欄布局。這種布局方式同樣分為header、container、footer。圣杯布局的缺陷在于center是在container的padding中的，因此寬度小的時(shí)候會(huì)出現(xiàn)混亂。
雙飛翼布局給center部分包裹了一個(gè)main通過(guò)設(shè)置margin主動(dòng)地把頁(yè)面撐開。Flex布局是由CSS3提供的一種方便的布局方式。
絕對(duì)定位布局是給container設(shè)置position:relative和overflow:hidden，因?yàn)榻^對(duì)定位的元素的參照物為第一個(gè)postion不為static的祖先元素。left向左浮動(dòng)，right向右浮動(dòng)。center使用絕對(duì)定位，通過(guò)設(shè)置left和right并把兩邊撐開。center設(shè)置top:0和bottom:0使其高度撐開。
表格布局的好處是能使三欄的高度統(tǒng)一。
網(wǎng)格布局可能是最強(qiáng)大的布局方式了，使用起來(lái)極其方便，但目前而言，兼容性并不好。
網(wǎng)格布局，可以將頁(yè)面分割成多個(gè)區(qū)域，或者用來(lái)定義內(nèi)部元素的大小，位置，圖層關(guān)系。
transition和animation的區(qū)別
參考回答：
Animation和transition大部分屬性是相同的，他們都是隨時(shí)間改變?cè)氐膶傩灾担麄兊闹饕獏^(qū)別是transition需要觸發(fā)一個(gè)事件才能改變屬性，而animation不需要觸發(fā)任何事件的情況下才會(huì)隨時(shí)間改變屬性值，并且transition為2幀，從from....to，而animation可以一幀一幀的。
Flex布局
參考回答：
Flex是FlexibleBox的縮寫，意為"彈性布局"，用來(lái)為盒狀模型提供最大的靈活性。
布局的傳統(tǒng)解決方案，基于盒狀模型，依賴display屬性+position屬性+float屬性。它對(duì)于那些特殊布局非常不方便，比如，垂直居中就不容易實(shí)現(xiàn)。
簡(jiǎn)單的分為容器屬性和元素屬性
容器的屬性：
flex-direction：決定主軸的方向（即子item的排列方法）
justify-content：對(duì)齊方式，水平主軸對(duì)齊方式
align-items：對(duì)齊方式，豎直軸線方向
項(xiàng)目的屬性（元素的屬性）：
order屬性：定義項(xiàng)目的排列順序，順序越小，排列越靠前，默認(rèn)為0
flex-grow屬性：定義項(xiàng)目的放大比例，即使存在空間，也不會(huì)放大
flex-shrink屬性：定義了項(xiàng)目的縮小比例，當(dāng)空間不足的情況下會(huì)等比例的縮小，如果定義個(gè)item的flow-shrink為0，則為不縮小
flex-basis屬性：定義了在分配多余的空間，項(xiàng)目占據(jù)的空間。
flex：是flex-grow和flex-shrink、flex-basis的簡(jiǎn)寫，默認(rèn)值為0、1、auto。
align-self：允許單個(gè)項(xiàng)目與其他項(xiàng)目不一樣的對(duì)齊方式，可以覆蓋align-items，默認(rèn)屬性為auto，表示繼承父元素的align-items
垂直居中的方法
參考回答：
margin:auto法
div{
??width:400px;
??height:400px;
??position:relative;
??border:1pxsolid#465468;
}
img{
??position:absolute;
??margin:auto;
??top:0;
??left:0;
??right:0;
??bottom:0;
}<div>
????<img?src="mm.jpg">
</div>定位為上下左右為0，margin：0可以實(shí)現(xiàn)脫離文檔流的居中
margin負(fù)值法
.container{
??width:500px;
??height:400px;
??border:2px?solid?#379;
??position:relative;
}
.inner{
??width:480px;
??height:380px;
??background-color:#746;
??position:absolute;
??top:50%;
??left:50%;
??margin-top:-190px;/*height的一半*/
??margin-left:-240px;/*width的一半*/
}補(bǔ)充：其實(shí)這里也可以將marin-top和margin-left負(fù)值替換成，transform：translateX(-50%)和transform：translateY(-50%)
table-cell（未脫離文檔流的）
設(shè)置父元素的display:table-cell,并且vertical-align:middle，這樣子元素可以實(shí)現(xiàn)垂直居中。
div{
??width:300px;
??height:300px;
??border:3pxsolid#555;
??display:table-cell;
??vertical-align:middle;
??text-align:center;
}
img{
??vertical-align:middle;
}利用flex
將父元素設(shè)置為display:flex，并且設(shè)置align-items:center;justify-content:center;
.container{
??width:300px;
??height:200px;
??border:3px?solid?#546461;
??display:-webkit-flex;
??display:flex;
??-webkit-align-items:center;
??align-items:center;
??-webkit-justify-content:center;
??justify-content:center;
}
.inner{
???border:3px?solid?#458761;
???padding:20px;
}
說(shuō)一下塊元素和行元素
參考回答：
塊元素：獨(dú)占一行，并且有自動(dòng)填滿父元素，可以設(shè)置margin和pading以及高度和寬度
行元素：不會(huì)獨(dú)占一行，width和height會(huì)失效，并且在垂直方向的padding和margin會(huì)失效。
多行元素的文本省略號(hào)
參考回答：
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3;
overflow:hidden;
visibility=hidden,opacity=0，display:none之間的區(qū)別
參考回答：
opacity=0，該元素隱藏起來(lái)了，但不會(huì)改變頁(yè)面布局，并且，如果該元素已經(jīng)綁定一些事件，如click事件，那么點(diǎn)擊該區(qū)域，也能觸發(fā)點(diǎn)擊事件的
visibility=hidden，該元素隱藏起來(lái)了，但不會(huì)改變頁(yè)面布局，但是不會(huì)觸發(fā)該元素已經(jīng)綁定的事件
display=none，把元素隱藏起來(lái)，并且會(huì)改變頁(yè)面布局，可以理解成在頁(yè)面中把該元素刪除掉一樣。
CSS選擇器有哪些，優(yōu)先級(jí)呢
參考回答：
id選擇器，class選擇器，標(biāo)簽選擇器，偽元素選擇器，偽類選擇器等
同一元素引用了多個(gè)樣式時(shí)，排在后面的樣式屬性的優(yōu)先級(jí)高；
樣式選擇器的類型不同時(shí)，優(yōu)先級(jí)順序?yàn)椋?code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(30,107,184);background-color:rgba(27,31,35,.05);">id選擇器?>?class選擇器?>?標(biāo)簽選擇器；
標(biāo)簽之間存在層級(jí)包含關(guān)系時(shí)，后代元素會(huì)繼承祖先元素的樣式。如果后代元素定義了與祖先元素相同的樣式，則祖先元素的相同的樣式屬性會(huì)被覆蓋。繼承的樣式的優(yōu)先級(jí)比較低，至少比標(biāo)簽選擇器的優(yōu)先級(jí)低；
帶有!important標(biāo)記的樣式屬性的優(yōu)先級(jí)最高；
樣式表的來(lái)源不同時(shí)，優(yōu)先級(jí)順序?yàn)椋?code style="font-size:14px;font-family:'Operator Mono', Consolas, Monaco, Menlo, monospace;color:rgb(30,107,184);background-color:rgba(27,31,35,.05);">內(nèi)聯(lián)樣式?>?內(nèi)部樣式?>?外部樣式?>?瀏覽器用戶自定義樣式?>?瀏覽器默認(rèn)樣式
position屬性的值有哪些及其區(qū)別
參考回答：
Position屬性把元素放置在一個(gè)靜態(tài)的，相對(duì)的，絕對(duì)的，固定的位置中，
Static：位置設(shè)置為static的元素，他始終處于頁(yè)面流給予的位置，static元素會(huì)忽略任何top,buttom,left,right聲明
Relative：位置設(shè)置為relative的元素，可將其移至相對(duì)于其正常位置的地方，因此left：20會(huì)將元素移至元素正常位置左邊20個(gè)像素的位置
Absolute：此元素可定位于相對(duì)包含他的元素的指定坐標(biāo)，此元素可通過(guò)left，top等屬性規(guī)定
Fixed：位置被設(shè)為fiexd的元素，可定為與相對(duì)瀏覽器窗口的指定坐標(biāo)，可以通過(guò)left，top，right屬性來(lái)定位
inline-block、inline和block的區(qū)別
參考回答：
block元素會(huì)獨(dú)占一行，多個(gè)block元素會(huì)各自新起一行。默認(rèn)情況下，block元素寬度自動(dòng)填滿其父元素寬度。
block元素可以設(shè)置width,height屬性。塊級(jí)元素即使設(shè)置了寬度,仍然是獨(dú)占一行。block元素可以設(shè)置margin和padding屬性。
inline元素不會(huì)獨(dú)占一行，多個(gè)相鄰的行內(nèi)元素會(huì)排列在同一行里，直到一行排列不下，才會(huì)新?lián)Q一行，其寬度隨元素的內(nèi)容而變化。
inline元素設(shè)置width,height屬性無(wú)效。
inline元素的margin和padding屬性，水平方向的padding-left,padding-right,margin-left,margin-right都產(chǎn)生邊距效果；但豎直方向的padding-top,padding-bottom,margin-top,margin-bottom不會(huì)產(chǎn)生邊距效果。
inline-block：簡(jiǎn)單來(lái)說(shuō)就是將對(duì)象呈現(xiàn)為inline對(duì)象，但是對(duì)象的內(nèi)容作為block對(duì)象呈現(xiàn)。之后的內(nèi)聯(lián)對(duì)象會(huì)被排列在同一行內(nèi)。比如我們可以給一個(gè)link（a元素）inline-block屬性值，使其既具有block的寬度高度特性又具有inline的同行特性。
css預(yù)處理器有什么
參考回答：
less，sass等