【面試題】104道 CSS 面試題，助你查漏補(bǔ)缺（下）
作者：CavsZhouyou
https://github.com/CavsZhouyou/Front-End-Interview-Notebook/blob/master/Css/Css.md
本部分主要是筆者在復(fù)習(xí) CSS 相關(guān)知識(shí)和一些相關(guān)面試題時(shí)所做的筆記，如果出現(xiàn)錯(cuò)誤，希望大家指出！
目錄
52.layoutviewport、visualviewport 和 idealviewport 的區(qū)別？[1] 53.position:fixed;在 android 下無效怎么處理？[2] 54.如果需要手動(dòng)寫動(dòng)畫，你認(rèn)為最小時(shí)間間隔是多久，為什么？（阿里）[3] 55.如何讓去除 inline-block 元素間間距？[4] 56.overflow:scroll 時(shí)不能平滑滾動(dòng)的問題怎么處理？[5] 57.有一個(gè)高度自適應(yīng)的 div，里面有兩個(gè) div，一個(gè)高度 100px，希望另一個(gè)填滿剩下的高度。[6] 58.png、jpg、gif 這些圖片格式解釋一下，分別什么時(shí)候用。有沒有了解過 webp？[7] 59.瀏覽器如何判斷是否支持 webp 格式圖片[8] 60.什么是 Cookie 隔離？（或者說：請(qǐng)求資源的時(shí)候不要讓它帶 cookie 怎么做）[9] 61.style 標(biāo)簽寫在 body 后與 body 前有什么區(qū)別？[10] 62.什么是 CSS 預(yù)處理器/后處理器？[11] 63.闡述一下 CSSSprites[12] 64.使用 rem 布局的優(yōu)缺點(diǎn)？[13] 65.幾種常見的 CSS 布局[14] 66.畫一條 0.5px 的線[15] 67.transition 和 animation 的區(qū)別[16] 68.什么是首選最小寬度？[17] 69.為什么 height:100\x 會(huì)無效？[18] 70.min-width/max-width 和 min-height/max-height 屬性間的覆蓋規(guī)則？[19] 71.內(nèi)聯(lián)盒模型基本概念[20] 72.什么是幽靈空白節(jié)點(diǎn)？[21] 73.什么是替換元素？[22] 74.替換元素的計(jì)算規(guī)則？[23] 75.content 與替換元素的關(guān)系？[24] 76.margin:auto 的填充規(guī)則？[25] 77.margin 無效的情形[26] 78.border 的特殊性？[27] 79.什么是基線和 x-height？[28] 80.line-height 的特殊性？[29] 81.vertical-align 的特殊性？[30] 82.overflow 的特殊性？[31] 83.無依賴絕對(duì)定位是什么？[32] 84.absolute 與 overflow 的關(guān)系？[33] 85.clip 裁剪是什么？[34] 86.relative 的特殊性？[35] 87.什么是層疊上下文？[36] 88.什么是層疊水平？[37] 89.元素的層疊順序？[38] 90.層疊準(zhǔn)則？[39] 91.font-weight 的特殊性？[40] 92.text-indent 的特殊性？[41] 93.letter-spacing 與字符間距？[42] 94.word-spacing 與單詞間距？[43] 95.white-space 與換行和空格的控制？[44] 96.隱藏元素的 background-image 到底加不加載？[45] 97.如何實(shí)現(xiàn)單行／多行文本溢出的省略（...）？[46] 98.常見的元素隱藏方式？[47] 99.css 實(shí)現(xiàn)上下固定中間自適應(yīng)布局？[48] 100.css 兩欄布局的實(shí)現(xiàn)？[49] 101.css 三欄布局的實(shí)現(xiàn)？[50] 102.實(shí)現(xiàn)一個(gè)寬高自適應(yīng)的正方形[51] 103.實(shí)現(xiàn)一個(gè)三角形[52] 104.一個(gè)自適應(yīng)矩形，水平垂直居中，且寬高比為 2:1[53]
53.position:fixed;在 android 下無效怎么處理？
因?yàn)橐苿?dòng)端瀏覽器默認(rèn)的viewport叫做layout?viewport。在移動(dòng)端顯示時(shí)，因?yàn)閘ayout?viewport的寬度大于移動(dòng)端屏幕
的寬度，所以頁面會(huì)出現(xiàn)滾動(dòng)條左右移動(dòng)，fixed的元素是相對(duì)layout?viewport來固定位置的，而不是移動(dòng)端屏幕來固定位置的
，所以會(huì)出現(xiàn)感覺fixed無效的情況。
如果想實(shí)現(xiàn)fixed相對(duì)于屏幕的固定效果，我們需要改變的是viewport的大小為ideal?viewport，可以如下設(shè)置：
"viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-sca
le=1.0,user-scalable=no"/>
54.如果需要手動(dòng)寫動(dòng)畫，你認(rèn)為最小時(shí)間間隔是多久，為什么？（阿里）
多數(shù)顯示器默認(rèn)頻率是60Hz，即1秒刷新60次，所以理論上最小間隔為1/60*1000ms＝16.7ms
55.如何讓去除 inline-block 元素間間距？
移除空格、使用margin負(fù)值、使用font-size:0、letter-spacing、word-spacing
詳細(xì)資料可以參考：《去除 inline-block 元素間間距的 N 種方法》[54]
56.overflow:scroll 時(shí)不能平滑滾動(dòng)的問題怎么處理？
以下代碼可解決這種卡頓的問題：-webkit-overflow-scrolling:touch;是因?yàn)檫@行代碼啟用了硬件加速特性，所以滑動(dòng)很流
暢。
詳細(xì)資料可以參考：《解決頁面使用 overflow:scroll 在 iOS 上滑動(dòng)卡頓的問題》[55]
57.有一個(gè)高度自適應(yīng)的 div，里面有兩個(gè) div，一個(gè)高度 100px，希望另一個(gè)填滿剩下的高度。
（1）外層div使用position：relative；高度要求自適應(yīng)的div使用position:absolute;top:100px;bottom:0;
left:0;right:0;
（2）使用flex布局，設(shè)置主軸為豎軸，第二個(gè)div的flex-grow為1。
詳細(xì)資料可以參考：《有一個(gè)高度自適應(yīng)的 div，里面有兩個(gè) div，一個(gè)高度 100px，希望另一個(gè)填滿剩下的高度(三種方案)》[56]
58.png、jpg、gif 這些圖片格式解釋一下，分別什么時(shí)候用。有沒有了解過 webp？
相關(guān)知識(shí)點(diǎn)：
（1）BMP，是無損的、既支持索引色也支持直接色的、點(diǎn)陣圖。這種圖片格式幾乎沒有對(duì)數(shù)據(jù)進(jìn)行壓縮，所以BMP格式的圖片通常
具有較大的文件大小。
（2）GIF是無損的、采用索引色的、點(diǎn)陣圖。采用LZW壓縮算法進(jìn)行編碼。文件小，是GIF格式的優(yōu)點(diǎn)，同時(shí)，GIF格式還具
有支持動(dòng)畫以及透明的優(yōu)點(diǎn)。但，GIF格式僅支持8bit的索引色，所以GIF格式適用于對(duì)色彩要求不高同時(shí)需要文件體積
較小的場景。
（3）JPEG是有損的、采用直接色的、點(diǎn)陣圖。JPEG的圖片的優(yōu)點(diǎn)，是采用了直接色，得益于更豐富的色彩，JPEG非常適合用來
存儲(chǔ)照片，與GIF相比，JPEG不適合用來存儲(chǔ)企業(yè)Logo、線框類的圖。因?yàn)橛袚p壓縮會(huì)導(dǎo)致圖片模糊，而直接色的選用，
又會(huì)導(dǎo)致圖片文件較GIF更大。
（4）PNG-8是無損的、使用索引色的、點(diǎn)陣圖。PNG是一種比較新的圖片格式，PNG-8是非常好的GIF格式替代者，在可能的
情況下，應(yīng)該盡可能的使用PNG-8而不是GIF，因?yàn)樵谙嗤膱D片效果下，PNG-8具有更小的文件體積。除此之外，PNG-8
還支持透明度的調(diào)節(jié)，而GIF并不支持?，F(xiàn)在，除非需要?jiǎng)赢嫷闹С郑駝t我們沒有理由使用GIF而不是PNG-8。
（5）PNG-24是無損的、使用直接色的、點(diǎn)陣圖。PNG-24的優(yōu)點(diǎn)在于，它壓縮了圖片的數(shù)據(jù)，使得同樣效果的圖片，PNG-24格
式的文件大小要比BMP小得多。當(dāng)然，PNG24的圖片還是要比JPEG、GIF、PNG-8大得多。
（6）SVG是無損的、矢量圖。SVG是矢量圖。這意味著SVG圖片由直線和曲線以及繪制它們的方法組成。當(dāng)你放大一個(gè)SVG圖
片的時(shí)候，你看到的還是線和曲線，而不會(huì)出現(xiàn)像素點(diǎn)。這意味著SVG圖片在放大時(shí)，不會(huì)失真，所以它非常適合用來繪制企
業(yè)Logo、Icon等。
（7）WebP是谷歌開發(fā)的一種新圖片格式，WebP是同時(shí)支持有損和無損壓縮的、使用直接色的、點(diǎn)陣圖。從名字就可以看出來它是
為Web而生的，什么叫為Web而生呢？就是說相同質(zhì)量的圖片，WebP具有更小的文件體積。現(xiàn)在網(wǎng)站上充滿了大量的圖片，
如果能夠降低每一個(gè)圖片的文件大小，那么將大大減少瀏覽器和服務(wù)器之間的數(shù)據(jù)傳輸量，進(jìn)而降低訪問延遲，提升訪問體驗(yàn)。
?在無損壓縮的情況下，相同質(zhì)量的WebP圖片，文件大小要比PNG小26%；
?在有損壓縮的情況下，具有相同圖片精度的WebP圖片，文件大小要比JPEG小25%~34%；
?WebP圖片格式支持圖片透明度，一個(gè)無損壓縮的WebP圖片，如果要支持透明度只需要22%的格外文件大小。
但是目前只有Chrome瀏覽器和Opera瀏覽器支持WebP格式，兼容性不太好。
回答：
我了解到的一共有七種常見的圖片的格式。
（1）第一種是BMP格式，它是無損壓縮的，支持索引色和直接色的點(diǎn)陣圖。由于它基本上沒有進(jìn)行壓縮，因此它的文件體積一般比
較大。
（2）第二種是GIF格式，它是無損壓縮的使用索引色的點(diǎn)陣圖。由于使用了LZW壓縮方法，因此文件的體積很小。并且GIF還
支持動(dòng)畫和透明度。但因?yàn)樗褂玫氖撬饕运m用于一些對(duì)顏色要求不高且需要文件體積小的場景。
（3）第三種是JPEG格式，它是有損壓縮的使用直接色的點(diǎn)陣圖。由于使用了直接色，色彩較為豐富，一般適用于來存儲(chǔ)照片。但
由于使用的是直接色，可能文件的體積相對(duì)于GIF格式來說更大。
（4）第四種是PNG-8格式，它是無損壓縮的使用索引色的點(diǎn)陣圖。它是GIF的一種很好的替代格式，它也支持透明度的調(diào)整，并
且文件的體積相對(duì)于GIF格式更小。一般來說如果不是需要?jiǎng)赢嫷那闆r，我們都可以使用PNG-8格式代替GIF格式。
（5）第五種是PNG-24格式，它是無損壓縮的使用直接色的點(diǎn)陣圖。PNG-24的優(yōu)點(diǎn)是它使用了壓縮算法，所以它的體積比BMP
格式的文件要小得多，但是相對(duì)于其他的幾種格式，還是要大一些。
（6）第六種格式是svg格式，它是矢量圖，它記錄的圖片的繪制方式，因此對(duì)矢量圖進(jìn)行放大和縮小不會(huì)產(chǎn)生鋸齒和失真。它一般
適合于用來制作一些網(wǎng)站logo或者圖標(biāo)之類的圖片。
（7）第七種格式是webp格式，它是支持有損和無損兩種壓縮方式的使用直接色的點(diǎn)陣圖。使用webp格式的最大的優(yōu)點(diǎn)是，在相
同質(zhì)量的文件下，它擁有更小的文件體積。因此它非常適合于網(wǎng)絡(luò)圖片的傳輸，因?yàn)閳D片體積的減少，意味著請(qǐng)求時(shí)間的減小，
這樣會(huì)提高用戶的體驗(yàn)。這是谷歌開發(fā)的一種新的圖片格式，目前在兼容性上還不是太好。
詳細(xì)資料可以參考：《圖片格式那么多，哪種更適合你？》[57]
59.瀏覽器如何判斷是否支持 webp 格式圖片
（1）寬高判斷法。通過創(chuàng)建image對(duì)象，將其src屬性設(shè)置為webp格式的圖片，然后在onload事件中獲取圖片的寬高，如
果能夠獲取，則說明瀏覽器支持webp格式圖片。如果不能獲取或者觸發(fā)了onerror函數(shù)，那么就說明瀏覽器不支持webp格
式的圖片。
（2）canvas判斷方法。我們可以動(dòng)態(tài)的創(chuàng)建一個(gè)canvas對(duì)象，通過canvas的toDataURL將設(shè)置為webp格式，然后判斷
返回值中是否含有image/webp字段，如果包含則說明支持WebP，反之則不支持。
詳細(xì)資料可以參考：《判斷瀏覽器是否支持 WebP 圖片》[58]《toDataURL()》[59]
60.什么是 Cookie 隔離？（或者說：請(qǐng)求資源的時(shí)候不要讓它帶 cookie 怎么做）
網(wǎng)站向服務(wù)器請(qǐng)求的時(shí)候，會(huì)自動(dòng)帶上cookie這樣增加表頭信息量，使請(qǐng)求變慢。
如果靜態(tài)文件都放在主域名下，那靜態(tài)文件請(qǐng)求的時(shí)候都帶有的cookie的數(shù)據(jù)提交給server的，非常浪費(fèi)流量，所以不如隔離開
，靜態(tài)資源放CDN。
因?yàn)閏ookie有域的限制，因此不能跨域提交請(qǐng)求，故使用非主要域名的時(shí)候，請(qǐng)求頭中就不會(huì)帶有cookie數(shù)據(jù)，這樣可以降低請(qǐng)
求頭的大小，降低請(qǐng)求時(shí)間，從而達(dá)到降低整體請(qǐng)求延時(shí)的目的。
同時(shí)這種方式不會(huì)將cookie傳入WebServer，也減少了WebServer對(duì)cookie的處理分析環(huán)節(jié)，提高了webserver的
http請(qǐng)求的解析速度。
詳細(xì)資料可以參考：《CDN 是什么？使用 CDN 有什么優(yōu)勢(shì)？》[60]
61.style 標(biāo)簽寫在 body 后與 body 前有什么區(qū)別？
頁面加載自上而下當(dāng)然是先加載樣式。寫在body標(biāo)簽后由于瀏覽器以逐行方式對(duì)HTML文檔進(jìn)行解析，當(dāng)解析到寫在尾部的樣式
表（外聯(lián)或?qū)懺趕tyle標(biāo)簽）會(huì)導(dǎo)致瀏覽器停止之前的渲染，等待加載且解析樣式表完成之后重新渲染，在windows的IE下可
能會(huì)出現(xiàn)FOUC現(xiàn)象（即樣式失效導(dǎo)致的頁面閃爍問題）
62.什么是 CSS 預(yù)處理器/后處理器？
CSS預(yù)處理器定義了一種新的語言，其基本思想是，用一種專門的編程語言，為CSS增加了一些編程的特性，將CSS作為目標(biāo)生成
文件，然后開發(fā)者就只要使用這種語言進(jìn)行編碼工作。通俗的說，CSS預(yù)處理器用一種專門的編程語言，進(jìn)行Web頁面樣式設(shè)計(jì)，然
后再編譯成正常的CSS文件。
預(yù)處理器例如：LESS、Sass、Stylus，用來預(yù)編譯Sass或less?csssprite，增強(qiáng)了css代碼的復(fù)用性，還有層級(jí)、mixin、
變量、循環(huán)、函數(shù)等，具有很方便的UI組件模塊化開發(fā)能力，極大的提高工作效率。
CSS后處理器是對(duì)CSS進(jìn)行處理，并最終生成CSS的預(yù)處理器，它屬于廣義上的CSS預(yù)處理器。我們很久以前就在用CSS后
處理器了，最典型的例子是CSS壓縮工具（如clean-css），只不過以前沒單獨(dú)拿出來說過。還有最近比較火的Autoprefixer，
以CanIUse上的瀏覽器支持?jǐn)?shù)據(jù)為基礎(chǔ)，自動(dòng)處理兼容性問題。
后處理器例如：PostCSS，通常被視為在完成的樣式表中根據(jù)CSS規(guī)范處理CSS，讓其更有效；目前最常做的是給CSS屬性添加瀏
覽器私有前綴，實(shí)現(xiàn)跨瀏覽器兼容性的問題。
詳細(xì)資料可以參考：《CSS 預(yù)處理器和后處理器》[61]
63.闡述一下 CSSSprites
將一個(gè)頁面涉及到的所有圖片都包含到一張大圖中去，然后利用CSS的background-image，background-repeat，background
-position的組合進(jìn)行背景定位。利用CSSSprites能很好地減少網(wǎng)頁的http請(qǐng)求，從而很好的提高頁面的性能；CSSSprites
能減少圖片的字節(jié)。
優(yōu)點(diǎn)：
減少HTTP請(qǐng)求數(shù)，極大地提高頁面加載速度
增加圖片信息重復(fù)度，提高壓縮比，減少圖片大小
更換風(fēng)格方便，只需在一張或幾張圖片上修改顏色或樣式即可實(shí)現(xiàn)
缺點(diǎn)：
圖片合并麻煩
維護(hù)麻煩，修改一個(gè)圖片可能需要重新布局整個(gè)圖片，樣式
64.使用 rem 布局的優(yōu)缺點(diǎn)？
優(yōu)點(diǎn)：
在屏幕分辨率千差萬別的時(shí)代，只要將rem與屏幕分辨率關(guān)聯(lián)起來就可以實(shí)現(xiàn)頁面的整體縮放，使得在設(shè)備上的展現(xiàn)都統(tǒng)一起來了。
而且現(xiàn)在瀏覽器基本都已經(jīng)支持rem了，兼容性也非常的好。
缺點(diǎn)：
（1）在奇葩的dpr設(shè)備上表現(xiàn)效果不太好，比如一些華為的高端機(jī)型用rem布局會(huì)出現(xiàn)錯(cuò)亂。
（2）使用iframe引用也會(huì)出現(xiàn)問題。
（3）rem在多屏幕尺寸適配上與當(dāng)前兩大平臺(tái)的設(shè)計(jì)哲學(xué)不一致。即大屏的出現(xiàn)到底是為了看得又大又清楚，還是為了看的更多的問
題。
詳細(xì)資料可以參考：《css3 的字體大小單位 rem 到底好在哪？》[62]《VW:是時(shí)候放棄 REM 布局了》[63]《為什么設(shè)計(jì)稿是 750px》[64]《使用 Flexible 實(shí)現(xiàn)手淘 H5 頁面的終端適配》[65]
65.幾種常見的 CSS 布局
詳細(xì)的資料可以參考：《幾種常見的 CSS 布局》[66]
66.畫一條 0.5px 的線
采用meta?viewport的方式
采用border-image的方式
采用transform:scale()的方式
詳細(xì)資料可以參考：《怎么畫一條 0.5px 的邊（更新）》[67]
67.transition 和 animation 的區(qū)別
transition關(guān)注的是CSS?property的變化，property值和時(shí)間的關(guān)系是一個(gè)三次貝塞爾曲線。
animation作用于元素本身而不是樣式屬性，可以使用關(guān)鍵幀的概念，應(yīng)該說可以實(shí)現(xiàn)更自由的動(dòng)畫效果。
詳細(xì)資料可以參考：《CSSanimation 與 CSStransition 有何區(qū)別？》[68]《CSS3Transition 和 Animation 區(qū)別及比較》[69]《CSS 動(dòng)畫簡介》[70]《CSS 動(dòng)畫：animation、transition、transform、translate》[71]
68.什么是首選最小寬度？
“首選最小寬度”，指的是元素最適合的最小寬度。
東亞文字（如中文）最小寬度為每個(gè)漢字的寬度。
西方文字最小寬度由特定的連續(xù)的英文字符單元決定。并不是所有的英文字符都會(huì)組成連續(xù)單元，一般會(huì)終止于空格（普通空格）、短
橫線、問號(hào)以及其他非英文字符等。
如果想讓英文字符和中文一樣，每一個(gè)字符都用最小寬度單元，可以試試使用CSS中的word-break:break-all。
69.為什么 height:100%會(huì)無效？
對(duì)于普通文檔流中的元素，百分比高度值要想起作用，其父級(jí)必須有一個(gè)可以生效的高度值。
原因是如果包含塊的高度沒有顯式指定（即高度由內(nèi)容決定），并且該元素不是絕對(duì)定位，則計(jì)算值為auto，因?yàn)榻忉尦闪薬uto，
所以無法參與計(jì)算。
使用絕對(duì)定位的元素會(huì)有計(jì)算值，即使祖先元素的height計(jì)算為auto也是如此。
70.min-width/max-width 和 min-height/max-height 屬性間的覆蓋規(guī)則？
（1）max-width會(huì)覆蓋width，即使width是行類樣式或者設(shè)置了!important。
（2）min-width會(huì)覆蓋max-width，此規(guī)則發(fā)生在min-width和max-width沖突的時(shí)候。
71.內(nèi)聯(lián)盒模型基本概念
（1）內(nèi)容區(qū)域（content?area）。內(nèi)容區(qū)域指一種圍繞文字看不見的盒子，其大小僅受字符本身特性控制，本質(zhì)上是一個(gè)字符盒子
（character?box）；但是有些元素，如圖片這樣的替換元素，其內(nèi)容顯然不是文字，不存在字符盒子之類的，因此，對(duì)于這些
元素，內(nèi)容區(qū)域可以看成元素自身。
（2）內(nèi)聯(lián)盒子（inline?box）?！皟?nèi)聯(lián)盒子”不會(huì)讓內(nèi)容成塊顯示，而是排成一行，這里的“內(nèi)聯(lián)盒子”實(shí)際指的就是元素的“外在盒
子”，用來決定元素是內(nèi)聯(lián)還是塊級(jí)。該盒子又可以細(xì)分為“內(nèi)聯(lián)盒子”和“匿名內(nèi)聯(lián)盒子”兩類。
（3）行框盒子（line?box），每一行就是一個(gè)“行框盒子”（實(shí)線框標(biāo)注），每個(gè)“行框盒子”又是由一個(gè)一個(gè)“內(nèi)聯(lián)盒子”組成的。
（4）包含塊（containing?box），由一行一行的“行框盒子”組成。
72.什么是幽靈空白節(jié)點(diǎn)？
“幽靈空白節(jié)點(diǎn)”是內(nèi)聯(lián)盒模型中非常重要的一個(gè)概念，具體指的是：在HTML5文檔聲明中，內(nèi)聯(lián)元素的所有解析和渲染表現(xiàn)就如同
每個(gè)行框盒子的前面有一個(gè)“空白節(jié)點(diǎn)”一樣。這個(gè)“空白節(jié)點(diǎn)”永遠(yuǎn)透明，不占據(jù)任何寬度，看不見也無法通過腳本獲取，就好像幽靈
一樣，但又確確實(shí)實(shí)地存在，表現(xiàn)如同文本節(jié)點(diǎn)一樣，因此，我稱之為“幽靈空白節(jié)點(diǎn)”。
73.什么是替換元素？
通過修改某個(gè)屬性值呈現(xiàn)的內(nèi)容就可以被替換的元素就稱為“替換元素”。因此，、