【轉】104道 CSS 面試題，助你查漏補缺
原文：https://segmentfault.com/a/1190000022021557
104道 CSS 面試題，助你查漏補缺
CSS 面試知識點總結
最近在整理 CSS 的時候發現遇到了很多面試中常見的面試題，本部分主要原作者在 Github 等各大論壇收錄的 CSS 相關知識和一些相關面試題時所做的筆記，分享這份總結給大家，對大家對 CSS 的可以來一次全方位的檢漏和排查，感謝原作者 CavsZhouyou 的付出，原文鏈接放在文章最下方，如果出現錯誤，希望大家共同指出！
1.介紹一下標準的 CSS 的盒子模型？低版本 IE 的盒子模型有什麼不同的？
相關知識點：
（1）id選擇器（#myid）
（2）類選擇器（.myclassname）
（3）標籤選擇器（div,h1,p）
（4）後代選擇器（h1p）
（5）相鄰後代選擇器（子）選擇器（ul>li）
（6）兄弟選擇器（li~a）
（7）相鄰兄弟選擇器（li+a）
（8）屬性選擇器（a[rel="external"]）
（9）僞類選擇器（a:hover,li:nth-child）
（10）僞元素選擇器（::before、::after）
（11）通配符選擇器（*）
3.::before 和:after 中雙冒號和單冒號有什麼區別？解釋一下這 2 個僞元素的作用。
相關知識點：
div {
width: 200px;
margin: 0auto;
}
-水平居中，利用 text-align:center 實現
div {
position: absolute;
width: 300px;
height: 300px;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: pink; /*方便看效果*/
}
-水平垂直居中一
/*確定容器的寬高寬500高300的層設置層的外邊距div{*/
position:absolute;/*絕對定位*/
width:500px;
height:300px;
top:50%;
left:50%;
margin:-150px00-250px;/*外邊距爲自身寬高的一半*/
background-color:pink;/*方便看效果*/
}
-水平垂直居中二
/*未知容器的寬高，利用`transform`屬性*/
div {
position: absolute; /*相對定位或絕對定位均可*/
width: 500px;
height: 300px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: pink; /*方便看效果*/
}
-水平垂直居中三
/*利用flex佈局實際使用時應考慮兼容性*/
.container {
display: flex;
align-items: center; /*垂直居中*/
justify-content: center; /*水平居中*/
}
.containerdiv {
width: 100px;
height: 100px;
background-color: pink; /*方便看效果*/
}
-水平垂直居中四
block 塊類型。默認寬度爲父元素寬度，可設置寬高，換行顯示。
none 元素不顯示，並從文檔流中移除。
inline 行內元素類型。默認寬度爲內容寬度，不可設置寬高，同行顯示。
inline-block默認寬度爲內容寬度，可以設置寬高，同行顯示。
list-item 像塊類型元素一樣顯示，並添加樣式列表標記。
table 此元素會作爲塊級表格來顯示。
inherit 規定應該從父元素繼承display屬性的值。
詳細資料可以參考：
《CSSdisplay 屬性》
11.position 的值 relative 和 absolute 定位原點是？
相關知識點：
新增各種CSS選擇器 （:not(.input)：所有class不是“input”的節點）
圓角 （border-radius:8px）
多列布局 （multi-columnlayout）
陰影和反射 （Shadow\Reflect）
文字特效 （text-shadow）
文字渲染 （Text-decoration）
線性漸變 （gradient）
旋轉 （transform）
縮放，定位，傾斜，動畫，多背景
例如：transform:\scale(0.85,0.90)\translate(0px,-30px)\skew(-9deg,0deg)\Animation:
13.請解釋一下 CSS3 的 Flexbox（彈性盒佈局模型），以及適用場景？
相關知識點：
採用的是相鄰邊框連接處的均分原理。
將元素的寬高設爲0，只設置
border
，把任意三條邊隱藏掉（顏色設爲
transparent），剩下的就是一個三角形。
#demo {
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparenttransparentredtransparent;
}
15.一個滿屏品字佈局如何設計?
簡單的方式：
上面的div寬100%，
下面的兩個div分別寬50%，
然後用float或者inline使其不換行即可
16.CSS 多列等高如何實現？
（1）png24位的圖片在iE6瀏覽器上出現背景
解決方案：做成PNG8，也可以引用一段腳本處理。
（2）瀏覽器默認的margin和padding不同
解決方案：加一個全局的*{margin:0;padding:0;}來統一。
（3）IE6雙邊距bug：在IE6下，如果對元素設置了浮動，同時又設置了margin-left或
margin-right，margin值會加倍。
#box{float:left;width:10px;margin:00010px;}
這種情況之下IE會產生20px的距離
解決方案：在float的標籤樣式控制中加入_display:inline;將其轉化爲行內屬性。(_這個符號只有ie6會識別)
（4）漸進識別的方式，從總體中逐漸排除局部。
首先，巧妙的使用"<span class="hljs-number">9"這一標記，將IE遊覽器從所有情況中分離出來。
接着，再次使用"+"將IE8和IE7、IE6分離開來，這樣IE8已經獨立識別。
.bb{
background-color:#f1ee18;/所有識別/
.background-color:#00deff<span class="hljs-number">9;/IE6、7、8識別/
+background-color:#a200ff;/IE6、7識別/
_background-color:#1e0bd1;/IE6識別/
}
（5）IE下，可以使用獲取常規屬性的方法來獲取自定義屬性，也可以使用getAttribute()獲取自定義
屬性；Firefox下，只能使用getAttribute()獲取自定義屬性
解決方法：統一通過getAttribute()獲取自定義屬性。
（6）IE下，event對象有x、y屬性，但是沒有pageX、pageY屬性;Firefox下，event對象有
pageX、pageY屬性，但是沒有x、y屬性。
解決方法：（條件註釋）缺點是在IE瀏覽器下可能會增加額外的HTTP請求數。
（7）Chrome中文界面下默認會將小於12px的文本強制按照12px顯示
解決方法：
1.可通過加入CSS屬性-webkit-text-size-adjust:none;解決。但是，在chrome
更新到27版本之後就不可以用了。
2.還可以使用-webkit-transform:scale(0.5);注意-webkit-transform:scale(0.75);
收縮的是整個span的大小，這時候，必須要將span轉換成塊元素，可以使用display：block/inline-block/...；
（8）超鏈接訪問過後hover樣式就不出現了，被點擊訪問過的超鏈接樣式不再具有hover和active了
解決方法：改變CSS屬性的排列順序L-V-H-A
（9）怪異模式問題：漏寫DTD聲明，Firefox仍然會按照標準模式來解析網頁，但在IE中會觸發怪異模
式。爲避免怪異模式給我們帶來不必要的麻煩，最好養成書寫DTD聲明的好習慣。
18.li 與 li 之間有看不見的空白間隔是什麼原因引起的？有什麼解決辦法？
SASS（SASS、LESS沒有本質區別，只因爲團隊前端都是用的SASS）
34.CSS 優化、提高性能的方法有哪些？
（1）偶數字號相對更容易和web設計的其他部分構成比例關係。比如：當我用了14px的正文字號，我可能會在一些地方用14
×0.5=7px的margin，在另一些地方用14×1.5=21px的標題字號。
（2）瀏覽器緣故，低版本的瀏覽器ie6會把奇數字體強制轉化爲偶數，即13px渲染爲14px。
（3）系統差別，早期的Windows裏，中易宋體點陣只有12和14、15、16px，唯獨缺少13px。
詳細資料可以參考：
《談談網頁中使用奇數字體和偶數字體》
《現在網頁設計中的爲什麼少有人用 11px、13px、15px 等奇數的字體？》
37.margin 和 padding 分別適合什麼場景使用？
我的理解是把常用的css樣式單獨做成css文件……通用的和業務相關的分離出來，通用的做成樣式模塊兒共享，業務相關的，放 進業務相關的庫裏面做成對應功能的模塊兒。
詳細資料可以參考：
《CSS 規範-分類方法》
39.簡單說一下 css3 的 all 屬性。
hasLayout是IE特有的一個屬性。很多的IE下的cssbug都與其息息相關。在IE中，一個元素要麼自己對自身的內容進
行計算大小和組織，要麼依賴於父元素來計算尺寸和組織內容。當一個元素的hasLayout屬性值爲true時，它負責對自己和可
能的子孫元素進行尺寸計算和定位。雖然這意味着這個元素需要花更多的代價來維護自身和裏面的內容，而不是依賴於祖先元素來完
成這些工作。
詳細資料可以參考：
《CSS 基礎篇--CSS 中 IE 瀏覽器的 hasLayout，IE 低版本的 bug 根源》
《CSS 魔法堂：hasLayout 原來是這樣的！》
43.元素豎向的百分比設定是相對於容器的高度嗎？
響應式網站設計是一個網站能夠兼容多個終端，而不是爲每一個終端做一個特定的版本。基本原理是通過媒體查詢檢測不同的設備屏
幕尺寸做處理。頁面頭部必須有meta聲明的viewport。
詳細資料可以參考：
《響應式佈局原理》
《響應式佈局的實現方法和原理》
46.視差滾動效果，如何給每頁做不同的動畫？（回到頂部，向下滑動要再次出現，和只出現一次分別怎麼做？）
視差滾動是指多層背景以不同的速度移動，形成立體的運動效果，帶來非常出色的視覺體驗。
詳細資料可以參考：
《如何實現視差滾動效果的網頁？》
47.如何修改 chrome 記住密碼後自動填充表單的黃色背景？
多數顯示器默認頻率是60Hz，即1秒刷新60次，所以理論上最小間隔爲1/60*1000ms＝16.7ms
55.如何讓去除 inline-block 元素間間距？
移除空格、使用margin負值、使用font-size:0、letter-spacing、word-spacing
詳細資料可以參考：
《去除 inline-block 元素間間距的 N 種方法》
56.overflow:scroll 時不能平滑滾動的問題怎麼處理？
以下代碼可解決這種卡頓的問題：-webkit-overflow-scrolling:touch;是因爲這行代碼啓用了硬件加速特性，所以滑動很流
暢。
詳細資料可以參考：
《解決頁面使用 overflow:scroll 在 iOS 上滑動卡頓的問題》
57.有一個高度自適應的 div，裏面有兩個 div，一個高度 100px，希望另一個填滿剩下的高度。
頁面加載自上而下當然是先加載樣式。寫在body標籤後由於瀏覽器以逐行方式對HTML文檔進行解析，當解析到寫在尾部的樣式
表（外聯或寫在style標籤）會導致瀏覽器停止之前的渲染，等待加載且解析樣式表完成之後重新渲染，在windows的IE下可
能會出現FOUC現象（即樣式失效導致的頁面閃爍問題）
62.什麼是 CSS 預處理器/後處理器？
“幽靈空白節點”是內聯盒模型中非常重要的一個概念，具體指的是：在HTML5文檔聲明中，內聯元素的所有解析和渲染表現就如同 每個行框盒子的前面有一個“空白節點”一樣。這個“空白節點”永遠透明，不佔據任何寬度，看不見也無法通過腳本獲取，就好像幽靈 一樣，但又確確實實地存在，表現如同文本節點一樣，因此，我稱之爲“幽靈空白節點”。
73.什麼是替換元素？
如果使用數值作爲font-weight屬性值，必須是100～900的整百數。因爲這裏的數值僅僅是外表長得像數值，實際上是一個具有特定含義的關鍵字，並且這裏的數值關鍵字和字母關鍵字之間是有對應關係的。
92.text-indent 的特殊性？
letter-spacing作用於所有字符，但word-spacing僅作用於空格字符。換句話說，word-spacing的作用就是增加空格的間隙
寬度。
95.white-space 與換行和空格的控制？
/*三角形的實現原理是利用了元素邊框連接處的等分原理。*/
.triangle {
width: 0;
height: 0;
border-width: 100px;
border-style: solid;
border-color: tomatotransparenttransparenttransparent;
}
html5