2019年前端面試題 | CSS篇 （更新於4月15日）

雖然說刷面試題有走捷徑之嫌，但我發現，對於我這樣沒有工做經歷的人來講，實際上是拓展本身實戰技能和加深知識理解的一個好機會。

分享出來，也但願你們不要背完了事，正經的去細細琢磨各類起因。

本篇是一個題目合集，部分答案我會整理後用本身的話說的儘可能簡單，部分網絡現成的好答案我就直接貼連接了，也尊重你們的勞動成果，但願各位不會太介意。

若有bug，歡迎指出👏👏

1. 什麼是盒子模型？

盒子模型包括content+padding+border+margin

標準盒子模型：寬度=內容的寬度（content）

低版本IE盒子模型：寬度=content+border+padding

2. CSS經常使用選擇器有哪些？

segmentfault.com/a/119000001…

3. CSS3新增僞類有哪些？

p:first-of-type 選擇屬於其父元素的首個元素

p:last-of-type 選擇屬於其父元素的最後元素

p:only-of-type 選擇屬於其父元素惟一的元素

p:only-child 選擇屬於其父元素的惟一子元素

p:nth-child(2) 選擇屬於其父元素的第二個子元素

:enabled :disabled 表單控件的禁用狀態。

:checked 單選框或複選框被選中

4. CSS3有哪些新增特性

這個問題賊大，做爲一個新聞專業出身的人，這種問題簡直是腦殘，新特性那麼多，難道須要我背一遍文檔你聽嗎？

可是，顯然面試官並不care你答不答的全，他本身都不定記得，對吧～

咱們徹底能夠從我的項目經驗出發，好比我本身，在作小程序時用過flex佈局，就能夠以這個爲主，再列舉三四個其餘的就好了。

爲了方便你們，這裏先列幾個出來：

(1)CSS3 彈性盒（ Flexible Box 或 flexbox）

是一種當頁面須要適應不一樣的屏幕大小以及設備類型時確保元素擁有恰當的行爲的佈局方式。

具體使用參考 www.jianshu.com/p/5856c4ae9…

注意：必定要分清主軸和側軸（交叉軸），flex-direction設置的是row，水平就是主軸，垂直就是側軸；設置爲colume，垂直就是主軸，水平就是側軸，而justify-content是設置主軸排列方式的，align-items是設置側軸排列方式的。知道這些就大概能用啦～

(2)僞類選擇器，參考上面的第三條，列表渲染修改單個列表樣式時，上面的nth-child()超好用

(3)邊框圓角：border-radius：3px

(4)@font-face，能夠引入客戶端沒有的字體

(5)媒體查詢@meida，具體用法：www.cnblogs.com/yan-ck/p/58…

其餘參考：blog.csdn.net/lxcao/artic…

5. CSS優先級計算規則

important Infinity

行間樣式 1000

id 100

class/屬性/僞類 10

標籤選擇器/僞元素 1

通配 0

6. 如何使用自定義字體

@font-face能夠實現，具體使用方法：www.jianshu.com/p/976d95fb8…

7. CSS有哪些繼承屬性

參考：www.cnblogs.com/thislbq/p/5…

8. CSS單行省略和多行省略

單行：

overflow: hidden;//隱藏溢出
text-overflow:ellipsis;//省略號
white-space: nowrap;//不換行
複製代碼

9. 如何去除inline-blcok元素間隙？

空隙產生緣由：HTML中的換行符、空格符、製表符等空白符，字體大小不爲0的狀況下，空白符佔據必定寬度，使用inline-block會產生元素間的空隙。

解決辦法：

1. 把全部的子元素寫在一行；
2. 子元素設置浮動；
3. 父元素的font-size設置爲0，子元素的font-size設置爲實際大小；
4. 使用註釋：

<div class="parent"> 
&emsp;&emsp;&emsp; <div class="child"></div><!--
&emsp;&emsp;--><div class="child"></div><!--
&emsp;&emsp;--><div class="child"></div><!--
&emsp;&emsp;--><div class="child"></div>
</div>
複製代碼

10. display屬性？

block: 指定元素爲塊級元素，能夠設寬高，元素先後自帶換行符，好比div、p。 inline：指定元素爲內聯元素，不能設置寬高，元素不帶換行符，會顯示在同一行，好比span。 inline-block：行內塊元素，兼具前二者的特色，元素先後不帶換行符，但又能夠設置寬高，好比input\img。 none：能夠隱藏元素。 經常使用的還有2個，我我的認爲很是實用，就是table和table-cell，結合使用在父子元素身上，子元素若是有大段文字，只要再加一個vertical-align:middle，就能輕鬆將文字垂直居中。 CSS3新增了一個很是適合移動端使用的flex，能很好的適應不一樣屏幕大小。

11. box-sizing屬性

用來控制元素的盒子模型的解析模式，默認爲content-box。

context-box：W3C的標準盒子模型，設置元素的height/width屬性指的是content部分的高/寬；border-box：IE傳統盒子模型。設置元素的height/width屬性指的是border + padding + content部分的高/寬。

12. display:none與visibility:hidden

不少前端的同窗認爲visibility: hidden和display: none的區別僅僅在於display: none隱藏後的元素不佔據任何空間，而visibility: hidden隱藏後的元素空間依舊保留 ，實際上沒那麼簡單，visibility是一個很是有故事性的屬性

一、visibility具備繼承性，給父元素設置visibility:hidden;子元素也會繼承這個屬性。可是若是從新給子元素設置visibility: visible,則子元素又會顯示出來。這個和display: none有着質的區別

二、visibility: hidden不會影響計數器的計數，如圖所示，visibility: hidden雖然讓一個元素不見了，可是其計數器仍在運行。這和display: none徹底不同。

13.visibility屬性的collapse屬性值

collapse屬性頗有意思，當一個元素的 visibility 屬性被設置成 collapse 值後，對於通常的元素，它的表現跟 hidden 是同樣的。但例外的是，若是這個元素是table相關的元素，例如table行，table group，table列，table column group，它的表現會和瀏覽器不一樣而變化。

在谷歌瀏覽器裏，使用 collapse 值和使用 hidden 值沒有什麼區別。

在火狐瀏覽器和IE8裏，使用 collapse值的效果就如它的字面意思：table的行會消失，它的下面一行會補充它的位置。效果相似於display：none。

14. em\px\rem區別

px：絕對單位，頁面按精確像素展現。

em：相對單位，基準點爲父節點字體的大小，若是自身定義了font-size按自身來計算（瀏覽器默認字體是16px），整個頁面內1em不是一個固定的值。

rem：相對單位，可理解爲」root em」, 相對根節點html的字體大小來計算，CSS3新加屬性，chrome/firefox/IE9+支持。

PX特色：

1. IE沒法調整那些使用px做爲單位的字體大小；

2. 國外的大部分網站可以調整的緣由在於其使用了em或rem做爲字體單位；

3. Firefox可以調整px和em，rem，可是96%以上的中國網民使用IE瀏覽器(或內核)。

EM特色 ：

1. em的值並非固定的；

2. em會繼承父級元素的字體大小。

rem特色：

rem是CSS3新增的一個相對單位（root em，根em），這個單位引發了普遍關注。區別在於使用rem爲元素設定字體大小時，仍然是相對大小，但相對的只是HTML根元素。

這個單位可謂集相對大小和絕對大小的優勢於一身，經過它既能夠作到只修改根元素就成比例地調整全部字體大小，又能夠避免字體大小逐層複合的連鎖反應。

目前，除了IE8及更早版本外，全部瀏覽器均已支持rem。對於不支持它的瀏覽器，應對方法也很簡單，就是多寫一個絕對單位的聲明。這些瀏覽器會忽略用rem設定的字體大小。

position有哪些值？

一、static（靜態定位）：默認值。沒有定位，元素出如今正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。

二、relative（相對定位）：生成相對定位的元素，經過top,bottom,left,right的設置相對於其正常（原先自己）位置進行定位。可經過z-index進行層次分級。元素位置變換之後，不會脫離文檔流。 

三、absolute（絕對定位）：生成絕對定位的元素，相對於 static 定位之外的第一個父元素進行定位。元素的位置經過 "left", "top", "right" 以及 "bottom" 屬性進行規定。可經過z-index進行層次分級，會脫離文檔流。

四、fixed（固定定位）：生成絕對定位的元素，相對於瀏覽器窗口進行定位。元素的位置經過 "left", "top", "right" 以及 "bottom" 屬性進行規定。可經過z-index進行層次分級。

如何讓非文字類元素實現水平垂直居中？

普通div的水平居中

margin: 0 auto;
height: 50px;
width: 80px;
複製代碼

絕對定位的水平居中：

position:absolute;
left:50%;
top:50%;
margin-left:-50px;
margin-top:-50px;
複製代碼

浮動元素的水平垂直居中：

border: 1px solid red;
float: left;
position:absolute;
width: 200px;
height: 100px;
left: 50%;
top: 50%;
margin: -50px 0 0 -100px;
複製代碼

利用絕對定位元素的自動伸縮特性水平垂直居中

.father{
    position: relative;
    width: 500px;
    height: 500px;
}
.son{
    position:absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

複製代碼

利用flex佈局水平垂直居中（回答這個顯得更高端）

#box{
    display: flex;
    display: -webkit-flex;
    border: 1px solid #0000FF;
    height: 200px;
    width: 400px;
    align-items:center;
    justify-content:center;
}
.item{
    width: 50px;
    height: 40px;
    border: 1px solid #00C1B3;
}
複製代碼

在不知道圖片大小的狀況下，如何設置樣式讓圖片不變形？

max-width: 100%

如何清除浮動？

www.cnblogs.com/hanqingtao/…

請解釋一下CSS3的flexbox（彈性盒佈局模型）,以及適用場景？

www.cnblogs.com/lixuemin/p/…

用純CSS建立一個三角形

width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000; 
複製代碼

rgba和opacity的透明有何不一樣？

opacity會繼承父元素的opacity 屬性，而RGBA設置的元素的後代元素不會繼承不透明屬性。簡單來講就是opacity做用於元素和元素全部內容的透明

rgba相對於opacity仍是技高一籌的，固然只要是涉及顏色的，均可以用rgba來設置。

對BFC規範(塊級格式化上下文：block formatting context)的理解

BFC有如下特性：

一、內部的Box會在垂直方向，從頂部開始一個接一個地放置。 二、Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生疊加 三、每一個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，不然相反)。即便存在浮動也是如此。 四、BFC的區域不會與float box疊加。 五、BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素，反之亦然。 六、計算BFC的高度時，浮動元素也參與計算。

那麼咱們怎樣作就能夠觸發BFC呢

• float 除了none之外的值 overflow 除了visible 之外的值（hidden，auto，scroll ）
• display (table-cell，table-caption，inline-block, flex, inline-flex)
• position值爲（absolute，fixed） fieldset元素
• fieldset元素 在以上狀況下能夠建立BFC

BFC能夠解決的問題

• margin疊加的問題，咱們將某個元素放到咱們新建的BFC裏面就能夠避免margin疊加、
• 對於左右佈局的元素，咱們能夠給右側的元素添加overflow:hidden或者auto，左側的是float:left
• 能夠清除浮動，計算BFC高度，浮動元素不會撐開父元素的高度，咱們可讓父元素觸發BFC,即便用overflow:hidden

媒體查詢

語法：

@media mediatype and|not|only (media feature) {
    CSS-Code;
}
複製代碼

案例:

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}
複製代碼

聖盃佈局和雙飛翼佈局

www.cnblogs.com/imwtr/p/444…

瀏覽器解析CSS選擇器

自右向左

響應式設計

怎麼讓瀏覽器支持小於12px 的文字？

.Num{
    display: inline-block;
    font-size: 14px;
    transform: scale(0.8);
 }
複製代碼

link和@import的區別

1. link屬於XHTML標籤，而@import是CSS提供的。
2. 頁面被加載時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載。
3. import只在IE 5以上才能識別，而link是XHTML標籤，無兼容問題。
4. link方式的樣式權重高於@import的權重。
5. 使用dom控制樣式時的差異。當使用javascript控制dom去改變樣式的時候，只能使用link標籤，由於@import不是dom能夠控制的。

重排和重繪

www.cnblogs.com/zichi/p/472…

CSS優化與性能提升

www.cnblogs.com/xiaoloulan/…

如何消除ul和li前面的點？

list-style:none

純屬我的記錄，未完待續……