從解析HTML開(kāi)始，破解頁(yè)面渲染時(shí)間長(zhǎng)難題

要：在本文中，將重點(diǎn)關(guān)注網(wǎng)頁(yè)的初始渲染，即它從解析 HTML 開(kāi)始。我將探索可能導(dǎo)致高渲染時(shí)間的問(wèn)題，以及如何解決它們。

本文分享自華為云社區(qū)《頁(yè)面首屏渲染性能指南-云社區(qū)-華為云》，作者：Ocean2022。

我們知道渲染頁(yè)面是一個(gè)將服務(wù)器的響應(yīng)內(nèi)容翻譯成圖片的過(guò)程。但是，如果你頁(yè)面的渲染性能比較糟糕的話(huà)，可能會(huì)帶來(lái)相對(duì)較高的跳出率。

在本文中，我將重點(diǎn)關(guān)注網(wǎng)頁(yè)的初始渲染，即它從解析 HTML 開(kāi)始。我將探索可能導(dǎo)致高渲染時(shí)間的問(wèn)題，以及如何解決它們。

關(guān)鍵渲染路徑（CRP）

關(guān)鍵渲染路徑 (CRP) 是瀏覽器將代碼轉(zhuǎn)換為屏幕上可顯示像素的過(guò)程。它有幾個(gè)階段，其中一些可以并行執(zhí)行以節(jié)省時(shí)間，但有些部分必須依次完成。 如下圖所示：

首先，一旦瀏覽器得到響應(yīng)，它就會(huì)開(kāi)始解析它。當(dāng)它遇到依賴(lài)項(xiàng)時(shí)，它會(huì)嘗試下載它。如果它是一個(gè)樣式表文件，瀏覽器必須在渲染頁(yè)面之前完全解析它，這就是為什么 CSS 會(huì)阻塞渲染的原因。

如果是腳本，瀏覽器必須：停止解析，下載腳本，然后運(yùn)行。只有在那之后它才能繼續(xù)解析，因?yàn)?JavaScript 程序可以改變網(wǎng)頁(yè)的內(nèi)容（尤其是 HTML）。這就是為什么 JS 會(huì)阻塞解析的原因。

完成所有解析后，瀏覽器將構(gòu)建文檔對(duì)象模型 (DOM) 和級(jí)聯(lián)樣式表對(duì)象模型 (CSSOM)。將它們組合在一起得到渲染樹(shù)。頁(yè)面的不顯示部分不會(huì)進(jìn)入渲染樹(shù)，因?yàn)樗话L制頁(yè)面所需的數(shù)據(jù)。

倒數(shù)第二步是將渲染樹(shù)進(jìn)行布局，這個(gè)階段也稱(chēng)為回流：就是計(jì)算每個(gè)渲染樹(shù)節(jié)點(diǎn)的每個(gè)位置及其大小的地方。

最后一步是繪制。它會(huì)根據(jù)瀏覽器在前一階段計(jì)算得到的數(shù)據(jù)對(duì)像素進(jìn)行著色。

優(yōu)化相關(guān)結(jié)論

因此，根據(jù)這一過(guò)程，我們?cè)趦?yōu)化性能方面，得出了一些結(jié)論。如果你要提升頁(yè)面初始化渲染的性能，你需要：

減少傳輸?shù)臄?shù)據(jù)量
減少瀏覽器必須下載的資源數(shù)量（尤其是阻塞的資源）
減小 CRP 的長(zhǎng)度

同時(shí)，我們會(huì)根據(jù)下面 3 個(gè)指標(biāo)來(lái)衡量?jī)?yōu)化的效率：

FP(First Paint)
FCP(First Contentful Paint)
FMP(First Meaningful Paint)

除了渲染時(shí)間之外，還有其他一些因素也需要考慮。例如，你的頁(yè)面使用了多少阻塞資源以及下載它們需要多長(zhǎng)時(shí)間。

性能優(yōu)化策略

鑒于我們?cè)谏厦娴贸龅慕Y(jié)論，我們得出網(wǎng)站性能優(yōu)化有三種主要策略：

盡量減少通過(guò)網(wǎng)絡(luò)傳輸?shù)臄?shù)據(jù)量；
減少通過(guò)網(wǎng)絡(luò)傳輸?shù)馁Y源總數(shù)；
縮短關(guān)鍵渲染路徑；

1. 減少要傳輸?shù)臄?shù)據(jù)量

首先，移除所有未使用的部分，例如 JavaScript 中無(wú)法訪(fǎng)問(wèn)的函數(shù)、帶有從不匹配任何元素的選擇器的樣式以及被 CSS 永遠(yuǎn)隱藏的 HTML 標(biāo)簽。其次，刪除所有重復(fù)項(xiàng)。

然后，我建議建立一個(gè)自動(dòng)壓縮過(guò)程。例如，它應(yīng)該從你的后端服務(wù)中刪除所有注釋?zhuān)ǖ皇窃创a）以及每個(gè)不包含附加信息的字符（例如 JS 中的空白字符）。

完成后，我們剩下的可以是文本字符串。這意味著我們可以安全地應(yīng)用諸如 GZIP（大多數(shù)瀏覽器都理解）之類(lèi)的壓縮算法。

最后，還有緩存。瀏覽器第一次呈現(xiàn)頁(yè)面時(shí)它不會(huì)有幫助，但它會(huì)在以后的訪(fǎng)問(wèn)中節(jié)省很多。 但是，記住兩點(diǎn)至關(guān)重要：

如果你使用 CDN，請(qǐng)確保支持緩存并在正確設(shè)置。
與其等待資源的到期，不如 將文件的“指紋”嵌入到其 URL 中，以使本地緩存無(wú)效。

當(dāng)然，應(yīng)該為每個(gè)資源定義緩存策略。有些可能很少改變或根本不會(huì)改變，有的則是變化的很快，還有些文件包含敏感的信息（可以使用 “private” 防止 CDN 緩存私有數(shù)據(jù)）。

2. 減少關(guān)鍵資源的總數(shù)

“關(guān)鍵”僅指網(wǎng)頁(yè)正確呈現(xiàn)所需的資源。因此，我們可以直接跳過(guò)所有流程中沒(méi)有涉及的樣式以及腳本文件。

樣式

為了告訴瀏覽器不需要特定的 CSS 文件，我們應(yīng)該為所有引用樣式表的鏈接設(shè)置媒體屬性。使用這種方法，瀏覽器將只根據(jù)需要處理與當(dāng)前媒體（設(shè)備類(lèi)型、屏幕尺寸）匹配的資源，同時(shí)降低所有其他樣式表的優(yōu)先級(jí)。例如，如果你將 media=“print” 屬性添加到引用樣式以打印頁(yè)面的樣式標(biāo)記，則這些樣式不會(huì)在不打印媒體時(shí)干擾你的關(guān)鍵渲染路徑。

為了進(jìn)一步改進(jìn)該過(guò)程，你還可以將一些樣式內(nèi)聯(lián)，這可以為我們節(jié)省了至少一次到服務(wù)器的往返行程。

腳本

如上所述，腳本會(huì)阻塞解析，因?yàn)樗鼈兛梢愿淖?DOM 和 CSSOM。為了避免這一點(diǎn)，所有腳本標(biāo)簽都必須用屬性標(biāo)記——異步或延遲。

標(biāo)有 async 的腳本不會(huì)阻塞 DOM 構(gòu)建或 CSSOM，因?yàn)樗鼈兛梢栽?CSSOM 構(gòu)建之前執(zhí)行。但請(qǐng)記住，內(nèi)聯(lián)腳本無(wú)論如何都會(huì)阻止 CSSOM，除非你將它們放在 CSS 之上。

相比之下，標(biāo)有 defer 的腳本將在頁(yè)面加載結(jié)束時(shí)進(jìn)行執(zhí)行。

換句話(huà)說(shuō)，使用 defer，腳本直到頁(yè)面加載事件被觸發(fā)后才會(huì)執(zhí)行，而 async 讓腳本在文檔被解析時(shí)就會(huì)在后臺(tái)運(yùn)行。

3.縮短關(guān)鍵渲染路徑長(zhǎng)度

最后，應(yīng)將 CRP 長(zhǎng)度縮短到可能的最小值。

作為樣式標(biāo)簽屬性的媒體查詢(xún)將減少必須下載的資源總數(shù)。 script 標(biāo)簽屬性 defer 和 async 將防止相應(yīng)的腳本阻塞解析。

使用 GZIP 壓縮、壓縮和歸檔資源將減少傳輸數(shù)據(jù)的大小（從而也減少數(shù)據(jù)傳輸時(shí)間）。

內(nèi)聯(lián)一些樣式和腳本也可以減少瀏覽器和服務(wù)器之間的往返次數(shù)。

按照最新的最佳性能實(shí)踐理念，一個(gè)網(wǎng)站應(yīng)該做的最快的第一件事就是展示 ATF 內(nèi)容。 ATF 代表首屏。 這是立即可見(jiàn)的區(qū)域，無(wú)需滾動(dòng)。 因此，最好以首先加載所需樣式和腳本的方式重新排列與渲染相關(guān)的所有內(nèi)容，而其他所有內(nèi)容都停止（既不解析也不渲染）。

結(jié)尾

總而言之，網(wǎng)站性能優(yōu)化包含了網(wǎng)站響應(yīng)的各個(gè)方面，例如緩存、設(shè)置 CDN、重構(gòu)、資源優(yōu)化等，但是所有這些都可以逐步完成。作為 Web 開(kāi)發(fā)人員，你可以將本文作為參考，并始終記住在實(shí)驗(yàn)之前和之后測(cè)量性能。

瀏覽器開(kāi)發(fā)人員盡最大努力優(yōu)化你訪(fǎng)問(wèn)的每個(gè)頁(yè)面的網(wǎng)站性能，這就是瀏覽器通常實(shí)現(xiàn)所謂的“預(yù)加載器”的原因。這部分程序會(huì)在你以 HTML 格式請(qǐng)求的資源之前進(jìn)行掃描，以便一次發(fā)出多個(gè)請(qǐng)求并讓它們并行運(yùn)行。這就是為什么在 HTML（逐行）以及腳本標(biāo)簽中保持樣式標(biāo)簽彼此靠近的原因。

此外，嘗試批量更新 HTML 以避免多個(gè)布局事件，這些事件不僅由 DOM 或 CSSOM 中的更改觸發(fā)，而且在設(shè)備方向更改和窗口大小調(diào)整時(shí)也會(huì)觸發(fā)。

點(diǎn)擊下方，第一時(shí)間了解華為云新鮮技術(shù)~

華為云博客_大數(shù)據(jù)博客_AI博客_云計(jì)算博客_開(kāi)發(fā)者中心-華為云

者：hh_phoebe

轉(zhuǎn)發(fā)鏈接：https://juejin.im/post/5ee0cf335188254ec9505381

SS 面試知識(shí)點(diǎn)總結(jié)

最近在整理 CSS 的時(shí)候發(fā)現(xiàn)遇到了很多面試中常見(jiàn)的面試題，本部分主要原作者在 Github 等各大論壇收錄的 CSS 相關(guān)知識(shí)和一些相關(guān)面試題時(shí)所做的筆記，分享這份總結(jié)給大家，對(duì)大家對(duì) CSS 的可以來(lái)一次全方位的檢漏和排查，感謝原作者 CavsZhouyou 的付出，原文鏈接放在文章最下方，如果出現(xiàn)錯(cuò)誤，希望大家共同指出！

前面CSS寫(xiě)法104個(gè)知識(shí)從01-52點(diǎn)已經(jīng)講過(guò)了，在本篇文章我就不再重復(fù)了。具體如下：

《關(guān)于前端CSS寫(xiě)法104個(gè)知識(shí)點(diǎn)匯總（一）》

接下來(lái)開(kāi)始進(jìn)入正題：

53.position:fixed;在 android 下無(wú)效怎么處理？

因?yàn)橐苿?dòng)端瀏覽器默認(rèn)的viewport叫做layoutviewport。在移動(dòng)端顯示時(shí)，因?yàn)閘ayoutviewport的寬度大于移動(dòng)端屏幕
的寬度，所以頁(yè)面會(huì)出現(xiàn)滾動(dòng)條左右移動(dòng)，fixed的元素是相對(duì)layoutviewport來(lái)固定位置的，而不是移動(dòng)端屏幕來(lái)固定位置的
，所以會(huì)出現(xiàn)感覺(jué)fixed無(wú)效的情況。

如果想實(shí)現(xiàn)fixed相對(duì)于屏幕的固定效果，我們需要改變的是viewport的大小為idealviewport，可以如下設(shè)置：

<metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-sca
le=1.0,user-scalable=no"/>

54.如果需要手動(dòng)寫(xiě)動(dòng)畫(huà)，你認(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 種方法》

56.overflow:scroll 時(shí)不能平滑滾動(dòng)的問(wèn)題怎么處理？

以下代碼可解決這種卡頓的問(wèn)題：-webkit-overflow-scrolling:touch;是因?yàn)檫@行代碼啟用了硬件加速特性，所以滑動(dòng)很流
暢。

詳細(xì)資料可以參考：《解決頁(yè)面使用 overflow:scroll 在 iOS 上滑動(dòng)卡頓的問(wèn)題》

57.有一個(gè)高度自適應(yīng)的 div，里面有兩個(gè) div，一個(gè)高度 100px，希望另一個(gè)填滿(mǎn)剩下的高度。

（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è)填滿(mǎn)剩下的高度(三種方案)》

58.png、jpg、gif 這些圖片格式解釋一下，分別什么時(shí)候用。有沒(méi)有了解過(guò) webp？

相關(guān)知識(shí)點(diǎn)：

（1）BMP，是無(wú)損的、既支持索引色也支持直接色的、點(diǎn)陣圖。這種圖片格式幾乎沒(méi)有對(duì)數(shù)據(jù)進(jìn)行壓縮，所以BMP格式的圖片通常
具有較大的文件大小。

（2）GIF是無(wú)損的、采用索引色的、點(diǎn)陣圖。采用LZW壓縮算法進(jìn)行編碼。文件小，是GIF格式的優(yōu)點(diǎn)，同時(shí)，GIF格式還具
有支持動(dòng)畫(huà)以及透明的優(yōu)點(diǎn)。但，GIF格式僅支持8bit的索引色，所以GIF格式適用于對(duì)色彩要求不高同時(shí)需要文件體積
較小的場(chǎng)景。

（3）JPEG是有損的、采用直接色的、點(diǎn)陣圖。JPEG的圖片的優(yōu)點(diǎn)，是采用了直接色，得益于更豐富的色彩，JPEG非常適合用來(lái)
存儲(chǔ)照片，與GIF相比，JPEG不適合用來(lái)存儲(chǔ)企業(yè)Logo、線(xiàn)框類(lèi)的圖。因?yàn)橛袚p壓縮會(huì)導(dǎo)致圖片模糊，而直接色的選用，
又會(huì)導(dǎo)致圖片文件較GIF更大。

（4）PNG-8是無(wú)損的、使用索引色的、點(diǎn)陣圖。PNG是一種比較新的圖片格式，PNG-8是非常好的GIF格式替代者，在可能的
情況下，應(yīng)該盡可能的使用PNG-8而不是GIF，因?yàn)樵谙嗤膱D片效果下，PNG-8具有更小的文件體積。除此之外，PNG-8
還支持透明度的調(diào)節(jié)，而GIF并不支持。現(xiàn)在，除非需要?jiǎng)赢?huà)的支持，否則我們沒(méi)有理由使用GIF而不是PNG-8。

（5）PNG-24是無(wú)損的、使用直接色的、點(diǎn)陣圖。PNG-24的優(yōu)點(diǎn)在于，它壓縮了圖片的數(shù)據(jù)，使得同樣效果的圖片，PNG-24格
式的文件大小要比BMP小得多。當(dāng)然，PNG24的圖片還是要比JPEG、GIF、PNG-8大得多。

（6）SVG是無(wú)損的、矢量圖。SVG是矢量圖。這意味著SVG圖片由直線(xiàn)和曲線(xiàn)以及繪制它們的方法組成。當(dāng)你放大一個(gè)SVG圖
片的時(shí)候，你看到的還是線(xiàn)和曲線(xiàn)，而不會(huì)出現(xiàn)像素點(diǎn)。這意味著SVG圖片在放大時(shí)，不會(huì)失真，所以它非常適合用來(lái)繪制企
業(yè)Logo、Icon等。

（7）WebP是谷歌開(kāi)發(fā)的一種新圖片格式，WebP是同時(shí)支持有損和無(wú)損壓縮的、使用直接色的、點(diǎn)陣圖。從名字就可以看出來(lái)它是
為Web而生的，什么叫為Web而生呢？就是說(shuō)相同質(zhì)量的圖片，WebP具有更小的文件體積。現(xiàn)在網(wǎng)站上充滿(mǎn)了大量的圖片，
如果能夠降低每一個(gè)圖片的文件大小，那么將大大減少瀏覽器和服務(wù)器之間的數(shù)據(jù)傳輸量，進(jìn)而降低訪(fǎng)問(wèn)延遲，提升訪(fǎng)問(wèn)體驗(yàn)。

?在無(wú)損壓縮的情況下，相同質(zhì)量的WebP圖片，文件大小要比PNG小26%；
?在有損壓縮的情況下，具有相同圖片精度的WebP圖片，文件大小要比JPEG小25%~34%；
?WebP圖片格式支持圖片透明度，一個(gè)無(wú)損壓縮的WebP圖片，如果要支持透明度只需要22%的格外文件大小。

但是目前只有Chrome瀏覽器和Opera瀏覽器支持WebP格式，兼容性不太好。

回答：

我了解到的一共有七種常見(jiàn)的圖片的格式。

（1）第一種是BMP格式，它是無(wú)損壓縮的，支持索引色和直接色的點(diǎn)陣圖。由于它基本上沒(méi)有進(jìn)行壓縮，因此它的文件體積一般比
較大。

（2）第二種是GIF格式，它是無(wú)損壓縮的使用索引色的點(diǎn)陣圖。由于使用了LZW壓縮方法，因此文件的體積很小。并且GIF還
支持動(dòng)畫(huà)和透明度。但因?yàn)樗褂玫氖撬饕运m用于一些對(duì)顏色要求不高且需要文件體積小的場(chǎng)景。

（3）第三種是JPEG格式，它是有損壓縮的使用直接色的點(diǎn)陣圖。由于使用了直接色，色彩較為豐富，一般適用于來(lái)存儲(chǔ)照片。但
由于使用的是直接色，可能文件的體積相對(duì)于GIF格式來(lái)說(shuō)更大。

（4）第四種是PNG-8格式，它是無(wú)損壓縮的使用索引色的點(diǎn)陣圖。它是GIF的一種很好的替代格式，它也支持透明度的調(diào)整，并
且文件的體積相對(duì)于GIF格式更小。一般來(lái)說(shuō)如果不是需要?jiǎng)赢?huà)的情況，我們都可以使用PNG-8格式代替GIF格式。

（5）第五種是PNG-24格式，它是無(wú)損壓縮的使用直接色的點(diǎn)陣圖。PNG-24的優(yōu)點(diǎn)是它使用了壓縮算法，所以它的體積比BMP
格式的文件要小得多，但是相對(duì)于其他的幾種格式，還是要大一些。

（6）第六種格式是svg格式，它是矢量圖，它記錄的圖片的繪制方式，因此對(duì)矢量圖進(jìn)行放大和縮小不會(huì)產(chǎn)生鋸齒和失真。它一般
適合于用來(lái)制作一些網(wǎng)站logo或者圖標(biāo)之類(lèi)的圖片。

（7）第七種格式是webp格式，它是支持有損和無(wú)損兩種壓縮方式的使用直接色的點(diǎn)陣圖。使用webp格式的最大的優(yōu)點(diǎn)是，在相
同質(zhì)量的文件下，它擁有更小的文件體積。因此它非常適合于網(wǎng)絡(luò)圖片的傳輸，因?yàn)閳D片體積的減少，意味著請(qǐng)求時(shí)間的減小，
這樣會(huì)提高用戶(hù)的體驗(yàn)。這是谷歌開(kāi)發(fā)的一種新的圖片格式，目前在兼容性上還不是太好。

詳細(xì)資料可以參考：《圖片格式那么多，哪種更適合你？》

59.瀏覽器如何判斷是否支持 webp 格式圖片

（1）寬高判斷法。通過(guò)創(chuàng)建image對(duì)象，將其src屬性設(shè)置為webp格式的圖片，然后在onload事件中獲取圖片的寬高，如
果能夠獲取，則說(shuō)明瀏覽器支持webp格式圖片。如果不能獲取或者觸發(fā)了onerror函數(shù)，那么就說(shuō)明瀏覽器不支持webp格
式的圖片。

（2）canvas判斷方法。我們可以動(dòng)態(tài)的創(chuàng)建一個(gè)canvas對(duì)象，通過(guò)canvas的toDataURL將設(shè)置為webp格式，然后判斷
返回值中是否含有image/webp字段，如果包含則說(shuō)明支持WebP，反之則不支持。

詳細(xì)資料可以參考：《判斷瀏覽器是否支持 WebP 圖片》《toDataURL()》

60.什么是 Cookie 隔離？（或者說(shuō)：請(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)流量，所以不如隔離開(kā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ì)？》

61.style 標(biāo)簽寫(xiě)在 body 后與 body 前有什么區(qū)別？

頁(yè)面加載自上而下當(dāng)然是先加載樣式。寫(xiě)在body標(biāo)簽后由于瀏覽器以逐行方式對(duì)HTML文檔進(jìn)行解析，當(dāng)解析到寫(xiě)在尾部的樣式
表（外聯(lián)或?qū)懺趕tyle標(biāo)簽）會(huì)導(dǎo)致瀏覽器停止之前的渲染，等待加載且解析樣式表完成之后重新渲染，在windows的IE下可
能會(huì)出現(xiàn)FOUC現(xiàn)象（即樣式失效導(dǎo)致的頁(yè)面閃爍問(wèn)題）

62.什么是 CSS 預(yù)處理器/后處理器？

CSS預(yù)處理器定義了一種新的語(yǔ)言，其基本思想是，用一種專(zhuān)門(mén)的編程語(yǔ)言，為CSS增加了一些編程的特性，將CSS作為目標(biāo)生成
文件，然后開(kāi)發(fā)者就只要使用這種語(yǔ)言進(jìn)行編碼工作。通俗的說(shuō)，CSS預(yù)處理器用一種專(zhuān)門(mén)的編程語(yǔ)言，進(jìn)行Web頁(yè)面樣式設(shè)計(jì)，然
后再編譯成正常的CSS文件。

預(yù)處理器例如：LESS、Sass、Stylus，用來(lái)預(yù)編譯Sass或lesscsssprite，增強(qiáng)了css代碼的復(fù)用性，還有層級(jí)、mixin、
變量、循環(huán)、函數(shù)等，具有很方便的UI組件模塊化開(kāi)發(fā)能力，極大的提高工作效率。

CSS后處理器是對(duì)CSS進(jìn)行處理，并最終生成CSS的預(yù)處理器，它屬于廣義上的CSS預(yù)處理器。我們很久以前就在用CSS后
處理器了，最典型的例子是CSS壓縮工具（如clean-css），只不過(guò)以前沒(méi)單獨(dú)拿出來(lái)說(shuō)過(guò)。還有最近比較火的Autoprefixer，
以CanIUse上的瀏覽器支持?jǐn)?shù)據(jù)為基礎(chǔ)，自動(dòng)處理兼容性問(wèn)題。

后處理器例如：PostCSS，通常被視為在完成的樣式表中根據(jù)CSS規(guī)范處理CSS，讓其更有效；目前最常做的是給CSS屬性添加瀏
覽器私有前綴，實(shí)現(xiàn)跨瀏覽器兼容性的問(wèn)題。

詳細(xì)資料可以參考：《CSS 預(yù)處理器和后處理器》

63.闡述一下 CSSSprites

將一個(gè)頁(yè)面涉及到的所有圖片都包含到一張大圖中去，然后利用CSS的background-image，background-repeat，background
-position的組合進(jìn)行背景定位。利用CSSSprites能很好地減少網(wǎng)頁(yè)的http請(qǐng)求，從而很好的提高頁(yè)面的性能；CSSSprites
能減少圖片的字節(jié)。

優(yōu)點(diǎn)：

減少HTTP請(qǐng)求數(shù)，極大地提高頁(yè)面加載速度
增加圖片信息重復(fù)度，提高壓縮比，減少圖片大小
更換風(fēng)格方便，只需在一張或幾張圖片上修改顏色或樣式即可實(shí)現(xiàn)

缺點(diǎn)：

圖片合并麻煩
維護(hù)麻煩，修改一個(gè)圖片可能需要重新布局整個(gè)圖片，樣式

64.使用 rem 布局的優(yōu)缺點(diǎn)？

優(yōu)點(diǎn)：
在屏幕分辨率千差萬(wàn)別的時(shí)代，只要將rem與屏幕分辨率關(guān)聯(lián)起來(lái)就可以實(shí)現(xiàn)頁(yè)面的整體縮放，使得在設(shè)備上的展現(xiàn)都統(tǒng)一起來(lái)了。
而且現(xiàn)在瀏覽器基本都已經(jīng)支持rem了，兼容性也非常的好。

缺點(diǎn)：
（1）在奇葩的dpr設(shè)備上表現(xiàn)效果不太好，比如一些華為的高端機(jī)型用rem布局會(huì)出現(xiàn)錯(cuò)亂。
（2）使用iframe引用也會(huì)出現(xiàn)問(wèn)題。
（3）rem在多屏幕尺寸適配上與當(dāng)前兩大平臺(tái)的設(shè)計(jì)哲學(xué)不一致。即大屏的出現(xiàn)到底是為了看得又大又清楚，還是為了看的更多的問(wèn)
題。

詳細(xì)資料可以參考：《css3 的字體大小單位 rem 到底好在哪？》《VW:是時(shí)候放棄 REM 布局了》《為什么設(shè)計(jì)稿是 750px》《使用 Flexible 實(shí)現(xiàn)手淘 H5 頁(yè)面的終端適配》

65.幾種常見(jiàn)的 CSS 布局

詳細(xì)的資料可以參考：《幾種常見(jiàn)的 CSS 布局》

66.畫(huà)一條 0.5px 的線(xiàn)

采用metaviewport的方式

采用border-image的方式

采用transform:scale()的方式

詳細(xì)資料可以參考：《怎么畫(huà)一條 0.5px 的邊（更新）》

67.transition 和 animation 的區(qū)別

transition關(guān)注的是CSSproperty的變化，property值和時(shí)間的關(guān)系是一個(gè)三次貝塞爾曲線(xiàn)。

animation作用于元素本身而不是樣式屬性，可以使用關(guān)鍵幀的概念，應(yīng)該說(shuō)可以實(shí)現(xiàn)更自由的動(dòng)畫(huà)效果。

詳細(xì)資料可以參考：《CSSanimation 與 CSStransition 有何區(qū)別？》《CSS3Transition 和 Animation 區(qū)別及比較》《CSS 動(dòng)畫(huà)簡(jiǎn)介》《CSS 動(dòng)畫(huà)：animation、transition、transform、translate》

68.什么是首選最小寬度？

“首選最小寬度”，指的是元素最適合的最小寬度。

東亞文字（如中文）最小寬度為每個(gè)漢字的寬度。

西方文字最小寬度由特定的連續(xù)的英文字符單元決定。并不是所有的英文字符都會(huì)組成連續(xù)單元，一般會(huì)終止于空格（普通空格）、短
橫線(xiàn)、問(wèn)號(hào)以及其他非英文字符等。

如果想讓英文字符和中文一樣，每一個(gè)字符都用最小寬度單元，可以試試使用CSS中的word-break:break-all。

69.為什么 height:100%會(huì)無(wú)效？

對(duì)于普通文檔流中的元素，百分比高度值要想起作用，其父級(jí)必須有一個(gè)可以生效的高度值。

原因是如果包含塊的高度沒(méi)有顯式指定（即高度由內(nèi)容決定），并且該元素不是絕對(duì)定位，則計(jì)算值為auto，因?yàn)榻忉尦闪薬uto，
所以無(wú)法參與計(jì)算。

使用絕對(duì)定位的元素會(huì)有計(jì)算值，即使祖先元素的height計(jì)算為auto也是如此。

70.min-width/max-width 和 min-height/max-height 屬性間的覆蓋規(guī)則？

（1）max-width會(huì)覆蓋width，即使width是行類(lèi)樣式或者設(shè)置了!important。

（2）min-width會(huì)覆蓋max-width，此規(guī)則發(fā)生在min-width和max-width沖突的時(shí)候。

71.內(nèi)聯(lián)盒模型基本概念

（1）內(nèi)容區(qū)域（contentarea）。內(nèi)容區(qū)域指一種圍繞文字看不見(jiàn)的盒子，其大小僅受字符本身特性控制，本質(zhì)上是一個(gè)字符盒子
（characterbox）；但是有些元素，如圖片這樣的替換元素，其內(nèi)容顯然不是文字，不存在字符盒子之類(lèi)的，因此，對(duì)于這些
元素，內(nèi)容區(qū)域可以看成元素自身。

（2）內(nèi)聯(lián)盒子（inlinebox）。“內(nèi)聯(lián)盒子”不會(huì)讓內(nèi)容成塊顯示，而是排成一行，這里的“內(nèi)聯(lián)盒子”實(shí)際指的就是元素的“外在盒
子”，用來(lái)決定元素是內(nèi)聯(lián)還是塊級(jí)。該盒子又可以細(xì)分為“內(nèi)聯(lián)盒子”和“匿名內(nèi)聯(lián)盒子”兩類(lèi)。

（3）行框盒子（linebox），每一行就是一個(gè)“行框盒子”（實(shí)線(xiàn)框標(biāo)注），每個(gè)“行框盒子”又是由一個(gè)一個(gè)“內(nèi)聯(lián)盒子”組成的。

（4）包含塊（containingbox），由一行一行的“行框盒子”組成。

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ù)任何寬度，看不見(jiàn)也無(wú)法通過(guò)腳本獲取，就好像幽靈
一樣，但又確確實(shí)實(shí)地存在，表現(xiàn)如同文本節(jié)點(diǎn)一樣，因此，我稱(chēng)之為“幽靈空白節(jié)點(diǎn)”。

73.什么是替換元素？

通過(guò)修改某個(gè)屬性值呈現(xiàn)的內(nèi)容就可以被替換的元素就稱(chēng)為“替換元素”。因此，<img>、<object>、<video>、<iframe>或者表
單元素<textarea>和<input>和<select>都是典型的替換元素。

替換元素除了內(nèi)容可替換這一特性以外，還有以下一些特性。

（1）內(nèi)容的外觀不受頁(yè)面上的CSS的影響。用專(zhuān)業(yè)的話(huà)講就是在樣式表現(xiàn)在CSS作用域之外。如何更改替換元素本身的外觀需要
類(lèi)似appearance屬性，或者瀏覽器自身暴露的一些樣式接口，

（2）有自己的尺寸。在Web中，很多替換元素在沒(méi)有明確尺寸設(shè)定的情況下，其默認(rèn)的尺寸（不包括邊框）是300像素×150像
素，如<video>、<iframe>或者<canvas>等，也有少部分替換元素為0像素，如<img>圖片，而表單元素的替換元素
的尺寸則和瀏覽器有關(guān)，沒(méi)有明顯的規(guī)律。

（3）在很多CSS屬性上有自己的一套表現(xiàn)規(guī)則。比較具有代表性的就是vertical-align屬性，對(duì)于替換元素和非替換元素，ve
rtical-align屬性值的解釋是不一樣的。比方說(shuō)vertical-align的默認(rèn)值的baseline，很簡(jiǎn)單的屬性值，基線(xiàn)之意，
被定義為字符x的下邊緣，而替換元素的基線(xiàn)卻被硬生生定義成了元素的下邊緣。

（4）所有的替換元素都是內(nèi)聯(lián)水平元素，也就是替換元素和替換元素、替換元素和文字都是可以在一行顯示的。但是，替換元素默認(rèn)
的display值卻是不一樣的，有的是inline，有的是inline-block。

74.替換元素的計(jì)算規(guī)則？

替換元素的尺寸從內(nèi)而外分為3類(lèi)：固有尺寸、HTML尺寸和CSS尺寸。

（1）固有尺寸指的是替換內(nèi)容原本的尺寸。例如，圖片、視頻作為一個(gè)獨(dú)立文件存在的時(shí)候，都是有著自己的寬度和高度的。

（2）HTML尺寸只能通過(guò)HTML原生屬性改變，這些HTML原生屬性包括<img>的width和height屬性、<input>的s
ize屬性、<textarea>的cols和rows屬性等。

（3）CSS尺寸特指可以通過(guò)CSS的width和height或者max-width/min-width和max-height/min-height設(shè)置的
尺寸，對(duì)應(yīng)盒尺寸中的contentbox。

這3層結(jié)構(gòu)的計(jì)算規(guī)則具體如下

（1）如果沒(méi)有CSS尺寸和HTML尺寸，則使用固有尺寸作為最終的寬高。

（2）如果沒(méi)有CSS尺寸，則使用HTML尺寸作為最終的寬高。

（3）如果有CSS尺寸，則最終尺寸由CSS屬性決定。

（4）如果“固有尺寸”含有固有的寬高比例，同時(shí)僅設(shè)置了寬度或僅設(shè)置了高度，則元素依然按照固有的寬高比例顯示。

（5）如果上面的條件都不符合，則最終寬度表現(xiàn)為300像素，高度為150像素。

（6）內(nèi)聯(lián)替換元素和塊級(jí)替換元素使用上面同一套尺寸計(jì)算規(guī)則。

75.content 與替換元素的關(guān)系？

content屬性生成的對(duì)象稱(chēng)為“匿名替換元素”。

（1）我們使用content生成的文本是無(wú)法選中、無(wú)法復(fù)制的，好像設(shè)置了userselect:none聲明一般，但是普通元素的文本
卻可以被輕松選中。同時(shí)，content生成的文本無(wú)法被屏幕閱讀設(shè)備讀取，也無(wú)法被搜索引擎抓取，因此，千萬(wàn)不要自以為是
地把重要的文本信息使用content屬性生成，因?yàn)檫@對(duì)可訪(fǎng)問(wèn)性和SEO都很不友好。

（2）content生成的內(nèi)容不能左右:empty偽類(lèi)。

（3）content動(dòng)態(tài)生成值無(wú)法獲取。

76.margin:auto 的填充規(guī)則？

margin的'auto'可不是擺設(shè)，是具有強(qiáng)烈的計(jì)算意味的關(guān)鍵字，用來(lái)計(jì)算元素對(duì)應(yīng)方向應(yīng)該獲得的剩余間距大小。但是觸發(fā)mar
gin:auto計(jì)算有一個(gè)前提條件，就是width或height為auto時(shí)，元素是具有對(duì)應(yīng)方向的自動(dòng)填充特性的。

（1）如果一側(cè)定值，一側(cè)auto，則auto為剩余空間大小。
（2）如果兩側(cè)均是auto，則平分剩余空間。

77.margin 無(wú)效的情形

（1）display計(jì)算值inline的非替換元素的垂直margin是無(wú)效的。對(duì)于內(nèi)聯(lián)替換元素，垂直margin有效，并且沒(méi)有ma
rgin合并的問(wèn)題。

（2）表格中的<tr>和<td>元素或者設(shè)置display計(jì)算值是table-cell或table-row的元素的margin都是無(wú)效的。

（3）絕對(duì)定位元素非定位方位的margin值“無(wú)效”。

（4）定高容器的子元素的margin-bottom或者寬度定死的子元素的margin-right的定位“失效”。

78.border 的特殊性？

（1）border-width卻不支持百分比。

（2）border-style的默認(rèn)值是none，有一部分人可能會(huì)誤以為是solid。這也是單純?cè)O(shè)置border-width或border-col
or沒(méi)有邊框顯示的原因。

（3）border-style:double的表現(xiàn)規(guī)則：雙線(xiàn)寬度永遠(yuǎn)相等，中間間隔±1。

（4）border-color默認(rèn)顏色就是color色值。

（5）默認(rèn)background背景圖片是相對(duì)于paddingbox定位的。

79.什么是基線(xiàn)和 x-height？

字母x的下邊緣（線(xiàn)）就是我們的基線(xiàn)。

x-height指的就是小寫(xiě)字母x的高度，術(shù)語(yǔ)描述就是基線(xiàn)和等分線(xiàn)（meanline）（也稱(chēng)作中線(xiàn)，midline）之間的距離。在C
SS世界中，middle指的是基線(xiàn)往上1/2x-height高度。我們可以近似理解為字母x交叉點(diǎn)那個(gè)位置。

ex是CSS中的一個(gè)相對(duì)單位，指的是小寫(xiě)字母x的高度，沒(méi)錯(cuò)，就是指x-height。ex的價(jià)值就在其副業(yè)上不受字體和字號(hào)影
響的內(nèi)聯(lián)元素的垂直居中對(duì)齊效果。內(nèi)聯(lián)元素默認(rèn)是基線(xiàn)對(duì)齊的，而基線(xiàn)就是x的底部，而1ex就是一個(gè)x的高度。

80.line-height 的特殊性？

（1）對(duì)于非替換元素的純內(nèi)聯(lián)元素，其可視高度完全由line-height決定。對(duì)于文本這樣的純內(nèi)聯(lián)元素，line-height就是高
度計(jì)算的基石，用專(zhuān)業(yè)說(shuō)法就是指定了用來(lái)計(jì)算行框盒子高度的基礎(chǔ)高度。

（2）內(nèi)聯(lián)元素的高度由固定高度和不固定高度組成，這個(gè)不固定的部分就是這里的“行距”。換句話(huà)說(shuō)，line-height之所以起作
用，就是通過(guò)改變“行距”來(lái)實(shí)現(xiàn)的。在CSS中，“行距”分散在當(dāng)前文字的上方和下方，也就是即使是第一行文字，其上方也是
有“行距”的，只不過(guò)這個(gè)“行距”的高度僅僅是完整“行距”高度的一半，因此，也被稱(chēng)為“半行距”。

（3）行距=line-height-font-size。

（4）border以及l(fā)ine-height等傳統(tǒng)CSS屬性并沒(méi)有小數(shù)像素的概念。如果標(biāo)注的是文字上邊距，則向下取整；如果是文字下
邊距，則向上取整。

（5）對(duì)于純文本元素，line-height直接決定了最終的高度。但是，如果同時(shí)有替換元素，則line-height只能決定最小高度。

（6）對(duì)于塊級(jí)元素，line-height對(duì)其本身是沒(méi)有任何作用的，我們平時(shí)改變line-height，塊級(jí)元素的高度跟著變化實(shí)際上是
通過(guò)改變塊級(jí)元素里面內(nèi)聯(lián)級(jí)別元素占據(jù)的高度實(shí)現(xiàn)的。

（7）line-height的默認(rèn)值是normal，還支持?jǐn)?shù)值、百分比值以及長(zhǎng)度值。為數(shù)值類(lèi)型時(shí)，其最終的計(jì)算值是和當(dāng)前font-si
ze相乘后的值。為百分比值時(shí)，其最終的計(jì)算值是和當(dāng)前font-size相乘后的值。為長(zhǎng)度值時(shí)原意不變。

（8）如果使用數(shù)值作為line-height的屬性值，那么所有的子元素繼承的都是這個(gè)值；但是，如果使用百分比值或者長(zhǎng)度值作為
屬性值，那么所有的子元素繼承的是最終的計(jì)算值。

（9）無(wú)論內(nèi)聯(lián)元素line-height如何設(shè)置，最終父級(jí)元素的高度都是由數(shù)值大的那個(gè)line-height決定的。

（10）只要有“內(nèi)聯(lián)盒子”在，就一定會(huì)有“行框盒子”，就是每一行內(nèi)聯(lián)元素外面包裹的一層看不見(jiàn)的盒子。然后，重點(diǎn)來(lái)了，在每個(gè)
“行框盒子”前面有一個(gè)寬度為0的具有該元素的字體和行高屬性的看不見(jiàn)的“幽靈空白節(jié)點(diǎn)”。

81.vertical-align 的特殊性？

（1）vertical-align的默認(rèn)值是baseline，即基線(xiàn)對(duì)齊，而基線(xiàn)的定義是字母x的下邊緣。因此，內(nèi)聯(lián)元素默認(rèn)都是沿著字
母x的下邊緣對(duì)齊的。對(duì)于圖片等替換元素，往往使用元素本身的下邊緣作為基線(xiàn)。：一個(gè)inline-block元素，如果里面
沒(méi)有內(nèi)聯(lián)元素，或者overflow不是visible，則該元素的基線(xiàn)就是其margin底邊緣；否則其基線(xiàn)就是元素里面最后一行
內(nèi)聯(lián)元素的基線(xiàn)。

（2）vertical-align:top就是垂直上邊緣對(duì)齊，如果是內(nèi)聯(lián)元素，則和這一行位置最高的內(nèi)聯(lián)元素的頂部對(duì)齊；如果display
計(jì)算值是table-cell的元素，我們不妨腦補(bǔ)成<td>元素，則和<tr>元素上邊緣對(duì)齊。

（3）vertical-align:middle是中間對(duì)齊，對(duì)于內(nèi)聯(lián)元素，元素的垂直中心點(diǎn)和行框盒子基線(xiàn)往上1/2x-height處對(duì)齊。對(duì)
于table-cell元素，單元格填充盒子相對(duì)于外面的表格行居中對(duì)齊。

（4）vertical-align支持?jǐn)?shù)值屬性，根據(jù)數(shù)值的不同，相對(duì)于基線(xiàn)往上或往下偏移，如果是負(fù)值，往下偏移，如果是正值，往上
偏移。

（5）vertical-align屬性的百分比值則是相對(duì)于line-height的計(jì)算值計(jì)算的。

（6）vertical-align起作用是有前提條件的，這個(gè)前提條件就是：只能應(yīng)用于內(nèi)聯(lián)元素以及display值為table-cell的元
素。

（7）table-cell元素設(shè)置vertical-align垂直對(duì)齊的是子元素，但是其作用的并不是子元素，而是table-cell元素自身。

82.overflow 的特殊性？

（1）一個(gè)設(shè)置了overflow:hidden聲明的元素，假設(shè)同時(shí)存在border屬性和padding屬性，則當(dāng)子元素內(nèi)容超出容器寬度
高度限制的時(shí)候，剪裁的邊界是borderbox的內(nèi)邊緣，而非paddingbox的內(nèi)邊緣。

（2）HTML中有兩個(gè)標(biāo)簽是默認(rèn)可以產(chǎn)生滾動(dòng)條的，一個(gè)是根元素<html>，另一個(gè)是文本域<textarea>。

（3）滾動(dòng)條會(huì)占用容器的可用寬度或高度。

（4）元素設(shè)置了overflow:hidden聲明，里面內(nèi)容高度溢出的時(shí)候，滾動(dòng)依然存在，僅僅滾動(dòng)條不存在！

83.無(wú)依賴(lài)絕對(duì)定位是什么？

沒(méi)有設(shè)置left/top/right/bottom屬性值的絕對(duì)定位稱(chēng)為“無(wú)依賴(lài)絕對(duì)定位”。

無(wú)依賴(lài)絕對(duì)定位其定位的位置和沒(méi)有設(shè)置position:absolute時(shí)候的位置相關(guān)。

84.absolute 與 overflow 的關(guān)系？

（1）如果overflow不是定位元素，同時(shí)絕對(duì)定位元素和overflow容器之間也沒(méi)有定位元素，則overflow無(wú)法對(duì)absolute
元素進(jìn)行剪裁。

（2）如果overflow的屬性值不是hidden而是auto或者scroll，即使絕對(duì)定位元素高寬比overflow元素高寬還要大，也
都不會(huì)出現(xiàn)滾動(dòng)條。

（3）overflow元素自身transform的時(shí)候，Chrome和Opera瀏覽器下的overflow剪裁是無(wú)效的。

85.clip 裁剪是什么？

所謂“可訪(fǎng)問(wèn)性隱藏”，指的是雖然內(nèi)容肉眼看不見(jiàn)，但是其他輔助設(shè)備卻能夠進(jìn)行識(shí)別和訪(fǎng)問(wèn)的隱藏。

clip剪裁被我稱(chēng)為“最佳可訪(fǎng)問(wèn)性隱藏”的另外一個(gè)原因就是，它具有更強(qiáng)的普遍適應(yīng)性，任何元素、任何場(chǎng)景都可以無(wú)障礙使用。

86.relative 的特殊性？

（1）相對(duì)定位元素的left/top/right/bottom的百分比值是相對(duì)于包含塊計(jì)算的，而不是自身。注意，雖然定位位移是相對(duì)自身，但是百分比值的計(jì)算值不是。

（2）top和bottom這兩個(gè)垂直方向的百分比值計(jì)算跟height的百分比值是一樣的，都是相對(duì)高度計(jì)算的。同時(shí)，如果包含塊的高度是auto，那么計(jì)算值是0，偏移無(wú)效，也就是說(shuō)，如果父元素沒(méi)有設(shè)定高度或者不是“格式化高度”，那么relative類(lèi)似top:20%的代碼等同于top:0。

（3）當(dāng)相對(duì)定位元素同時(shí)應(yīng)用對(duì)立方向定位值的時(shí)候，也就是top/bottom和left/right同時(shí)使用的時(shí)候，只有一個(gè)方向的定位屬性會(huì)起作用。而誰(shuí)起作用則是與文檔流的順序有關(guān)的，默認(rèn)的文檔流是自上而下、從左往右，因此top/bottom同時(shí)使用的時(shí)候，bottom失效；left/right同時(shí)使用的時(shí)候，right失效。

87.什么是層疊上下文？

層疊上下文，英文稱(chēng)作stackingcontext，是HTML中的一個(gè)三維的概念。如果一個(gè)元素含有層疊上下文，我們可以理解為這個(gè)元
素在z軸上就“高人一等”。

層疊上下文元素有如下特性：

（1）層疊上下文的層疊水平要比普通元素高（原因后面會(huì)說(shuō)明）。
（2）層疊上下文可以阻斷元素的混合模式。
（3）層疊上下文可以嵌套，內(nèi)部層疊上下文及其所有子元素均受制于外部的“層疊上下文”。
（4）每個(gè)層疊上下文和兄弟元素獨(dú)立，也就是說(shuō)，當(dāng)進(jìn)行層疊變化或渲染的時(shí)候，只需要考慮后代元素。
（5）每個(gè)層疊上下文是自成體系的，當(dāng)元素發(fā)生層疊的時(shí)候，整個(gè)元素被認(rèn)為是在父層疊上下文的層疊順序中。


層疊上下文的創(chuàng)建：

（1）頁(yè)面根元素天生具有層疊上下文，稱(chēng)為根層疊上下文。根層疊上下文指的是頁(yè)面根元素，可以看成是<html>元素。因此，頁(yè)面中所有的元素一定處于至少一個(gè)“層疊結(jié)界”中。

（2）對(duì)于position值為relative/absolute以及Firefox/IE瀏覽器（不包括Chrome瀏覽器）下含有position:fixed聲明的定位元素，當(dāng)其z-index值不是auto的時(shí)候，會(huì)創(chuàng)建層疊上下文。Chrome等WebKit內(nèi)核瀏覽器下，position:fixed元素天然層疊上下文元素，無(wú)須z-index為數(shù)值。根據(jù)我的測(cè)試，目前IE和Firefox仍是老套路。

（3）其他一些CSS3屬性，比如元素的opacity值不是1。

88.什么是層疊水平？

層疊水平，英文稱(chēng)作stackinglevel，決定了同一個(gè)層疊上下文中元素在z軸上的顯示順序。

顯而易見(jiàn)，所有的元素都有層疊水平，包括層疊上下文元素，也包括普通元素。然而，對(duì)普通元素的層疊水平探討只局限在當(dāng)前層疊上
下文元素中。

89.元素的層疊順序？

層疊順序，英文稱(chēng)作 stackingorder，表示元素發(fā)生層疊時(shí)有著特定的垂直顯示順序。

90.層疊準(zhǔn)則？

（1）誰(shuí)大誰(shuí)上：當(dāng)具有明顯的層疊水平標(biāo)識(shí)的時(shí)候，如生效的z-index屬性值，在同一個(gè)層疊上下文領(lǐng)域，層疊水平值大的那一個(gè)覆蓋小的那一個(gè)。

（2）后來(lái)居上：當(dāng)元素的層疊水平一致、層疊順序相同的時(shí)候，在DOM流中處于后面的元素會(huì)覆蓋前面的元素。

91.font-weight 的特殊性？

如果使用數(shù)值作為font-weight屬性值，必須是100～900的整百數(shù)。因?yàn)檫@里的數(shù)值僅僅是外表長(zhǎng)得像數(shù)值，實(shí)際上是一個(gè)具有特定含義的關(guān)鍵字，并且這里的數(shù)值關(guān)鍵字和字母關(guān)鍵字之間是有對(duì)應(yīng)關(guān)系的。

92.text-indent 的特殊性？

（1）text-indent僅對(duì)第一行內(nèi)聯(lián)盒子內(nèi)容有效。

（2）非替換元素以外的display計(jì)算值為inline的內(nèi)聯(lián)元素設(shè)置text-indent值無(wú)效，如果計(jì)算值inline-block/inli
ne-table則會(huì)生效。

（3）<input>標(biāo)簽按鈕text-indent值無(wú)效。

（4）<button>標(biāo)簽按鈕text-indent值有效。

（5）text-indent的百分比值是相對(duì)于當(dāng)前元素的“包含塊”計(jì)算的，而不是當(dāng)前元素。

93.letter-spacing 與字符間距？

letter-spacing可以用來(lái)控制字符之間的間距，這里說(shuō)的“字符”包括英文字母、漢字以及空格等。

letter-spacing具有以下一些特性。

（1）繼承性。
（2）默認(rèn)值是normal而不是0。雖然說(shuō)正常情況下，normal的計(jì)算值就是0，但兩者還是有差別的，在有些場(chǎng)景下，letter-spacing會(huì)調(diào)整normal的計(jì)算值以實(shí)現(xiàn)更好的版面布局。
（3）支持負(fù)值，且值足夠大的時(shí)候，會(huì)讓字符形成重疊，甚至反向排列。
（4）和text-indent屬性一樣，無(wú)論值多大或多小，第一行一定會(huì)保留至少一個(gè)字符。
（5）支持小數(shù)值，即使0.1px也是支持的。
（6）暫不支持百分比值。

94.word-spacing 與單詞間距？

letter-spacing作用于所有字符，但word-spacing僅作用于空格字符。換句話(huà)說(shuō)，word-spacing的作用就是增加空格的間隙
寬度。

95.white-space 與換行和空格的控制？

white-space屬性聲明了如何處理元素內(nèi)的空白字符，這類(lèi)空白字符包括Space（空格）鍵、Enter（回車(chē)）鍵、Tab（制表符）
鍵產(chǎn)生的空白。因此，white-space可以決定圖文內(nèi)容是否在一行顯示（回車(chē)空格是否生效），是否顯示大段連續(xù)空白（空格是否
生效）等。

其屬性值包括下面這些。
?normal：合并空白字符和換行符。
?pre：空白字符不合并，并且內(nèi)容只在有換行符的地方換行。
?nowrap：該值和normal一樣會(huì)合并空白字符，但不允許文本環(huán)繞。
?pre-wrap：空白字符不合并，并且內(nèi)容只在有換行符的地方換行，同時(shí)允許文本環(huán)繞。
?pre-line：合并空白字符，但只在有換行符的地方換行，允許文本環(huán)繞。

96.隱藏元素的 background-image 到底加不加載？

相關(guān)知識(shí)點(diǎn)：

根據(jù)測(cè)試，一個(gè)元素如果display計(jì)算值為none，在IE瀏覽器下（IE8～I(xiàn)E11，更高版本不確定）依然會(huì)發(fā)送圖片請(qǐng)求，F(xiàn)ire
fox瀏覽器不會(huì)，至于Chrome和Safari瀏覽器則似乎更加智能一點(diǎn)：如果隱藏元素同時(shí)又設(shè)置了background-image，則圖片
依然會(huì)去加載；如果是父元素的display計(jì)算值為none，則背景圖不會(huì)請(qǐng)求，此時(shí)瀏覽器或許放心地認(rèn)為這個(gè)背景圖暫時(shí)是不會(huì)使
用的。

如果不是background-image，而是<img>元素，則設(shè)置display:none在所有瀏覽器下依舊都會(huì)請(qǐng)求圖片資源。

還需要注意的是如果設(shè)置的樣式?jīng)]有對(duì)應(yīng)的元素，則background-image也不會(huì)加載。hover情況下的background-image，在觸
發(fā)時(shí)加載。

回答：

-（1）元素的背景圖片

-元素本身設(shè)置 display:none，會(huì)請(qǐng)求圖片 -父級(jí)元素設(shè)置 display:none，不會(huì)請(qǐng)求圖片 -樣式?jīng)]有元素使用，不會(huì)請(qǐng)求-:hover 樣式下，觸發(fā)時(shí)請(qǐng)求

-（2）img 標(biāo)簽圖片任何情況下都會(huì)請(qǐng)求圖片

詳細(xì)資料可以參考：《CSS 控制前端圖片 HTTP 請(qǐng)求的各種情況示例》

97.如何實(shí)現(xiàn)單行／多行文本溢出的省略（...）？

/*單行文本溢出*/
p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*多行文本溢出*/
p {
  position: relative;
  line-height: 1.5em;
  /*高度為需要顯示的行數(shù)*行高，比如這里我們顯示兩行，則為3*/
  height: 3em;
  overflow: hidden;
}

p:after {
  content: "...";
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: #fff;
}

詳細(xì)資料可以參考：《【CSS/JS】如何實(shí)現(xiàn)單行／多行文本溢出的省略》《CSS 多行文本溢出省略顯示》

98.常見(jiàn)的元素隱藏方式？

-（1）使用 display:none;隱藏元素，渲染樹(shù)不會(huì)包含該渲染對(duì)象，因此該元素不會(huì)在頁(yè)面中占據(jù)位置，也不會(huì)響應(yīng)綁定的監(jiān)聽(tīng)事件。

-（2）使用 visibility:hidden;隱藏元素。元素在頁(yè)面中仍占據(jù)空間，但是不會(huì)響應(yīng)綁定的監(jiān)聽(tīng)事件。

-（3）使用 opacity:0;將元素的透明度設(shè)置為 0，以此來(lái)實(shí)現(xiàn)元素的隱藏。元素在頁(yè)面中仍然占據(jù)空間，并且能夠響應(yīng)元素綁定的監(jiān)聽(tīng)事件。

-（4）通過(guò)使用絕對(duì)定位將元素移除可視區(qū)域內(nèi)，以此來(lái)實(shí)現(xiàn)元素的隱藏。

-（5）通過(guò) z-index 負(fù)值，來(lái)使其他元素遮蓋住該元素，以此來(lái)實(shí)現(xiàn)隱藏。

-（6）通過(guò) clip/clip-path 元素裁剪的方法來(lái)實(shí)現(xiàn)元素的隱藏，這種方法下，元素仍在頁(yè)面中占據(jù)位置，但是不會(huì)響應(yīng)綁定的監(jiān)聽(tīng)事件。

-（7）通過(guò) transform:scale(0,0)來(lái)將元素縮放為 0，以此來(lái)實(shí)現(xiàn)元素的隱藏。這種方法下，元素仍在頁(yè)面中占據(jù)位置，但是不會(huì)響應(yīng)綁定的監(jiān)聽(tīng)事件。

詳細(xì)資料可以參考：《CSS 隱藏元素的八種方法》

99.css 實(shí)現(xiàn)上下固定中間自適應(yīng)布局？

利用絕對(duì)定位實(shí)現(xiàn)body {
  padding: 0;
  margin: 0;
}

.header {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100px;
  background: red;
}

.container {
  position: absolute;
  top: 100px;
  bottom: 100px;
  width: 100%;
  background: green;
}

.footer {
  position: absolute;
  bottom: 0;
  height: 100px;
  width: 100%;
  background: red;
}

利用flex布局實(shí)現(xiàn)html,
body {
  height: 100%;
}

body {
  display: flex;
  padding: 0;
  margin: 0;
  flex-direction: column;
}

.header {
  height: 100px;
  background: red;
}

.container {
  flex-grow: 1;
  background: green;
}

.footer {
  height: 100px;
  background: red;
}

詳細(xì)資料可以參考：《css 實(shí)現(xiàn)上下固定中間自適應(yīng)布局》

100.css 兩欄布局的實(shí)現(xiàn)？

相關(guān)資料：

/*兩欄布局一般指的是頁(yè)面中一共兩欄，左邊固定，右邊自適應(yīng)的布局，一共有四種實(shí)現(xiàn)的方式。*/
/*以左邊寬度固定為200px為例*/

/*（1）利用浮動(dòng)，將左邊元素寬度設(shè)置為200px，并且設(shè)置向左浮動(dòng)。將右邊元素的margin-left設(shè)置為200px，寬度設(shè)置為auto（默認(rèn)為auto，撐滿(mǎn)整個(gè)父元素）。*/
.outer {
  height: 100px;
}

.left {
  float: left;

  height: 100px;
  width: 200px;

  background: tomato;
}

.right {
  margin-left: 200px;

  width: auto;
  height: 100px;

  background: gold;
}

/*（2）第二種是利用flex布局，將左邊元素的放大和縮小比例設(shè)置為0，基礎(chǔ)大小設(shè)置為200px。將右邊的元素的放大比例設(shè)置為1，縮小比例設(shè)置為1，基礎(chǔ)大小設(shè)置為auto。*/
.outer {
  display: flex;

  height: 100px;
}

.left {
  flex-shrink: 0;
  flex-grow: 0;
  flex-basis: 200px;

  background: tomato;
}

.right {
  flex: auto;
  /*11auto*/

  background: gold;
}

/*（3）第三種是利用絕對(duì)定位布局的方式，將父級(jí)元素設(shè)置相對(duì)定位。左邊元素設(shè)置為absolute定位，并且寬度設(shè)置為
200px。將右邊元素的margin-left的值設(shè)置為200px。*/
.outer {
  position: relative;

  height: 100px;
}

.left {
  position: absolute;

  width: 200px;
  height: 100px;

  background: tomato;
}

.right {
  margin-left: 200px;
  height: 100px;

  background: gold;
}

/*（4）第四種還是利用絕對(duì)定位的方式，將父級(jí)元素設(shè)置為相對(duì)定位。左邊元素寬度設(shè)置為200px，右邊元素設(shè)置為絕對(duì)定位，左邊定位為200px，其余方向定位為0。*/
.outer {
  position: relative;

  height: 100px;
}

.left {
  width: 200px;
  height: 100px;

  background: tomato;
}

.right {
  position: absolute;

  top: 0;
  right: 0;
  bottom: 0;
  left: 200px;

  background: gold;
}

《兩欄布局 demo 展示》

回答：

兩欄布局一般指的是頁(yè)面中一共兩欄，左邊固定，右邊自適應(yīng)的布局，一共有四種實(shí)現(xiàn)的方式。

以左邊寬度固定為 200px 為例

-（1）利用浮動(dòng)，將左邊元素寬度設(shè)置為 200px，并且設(shè)置向左浮動(dòng)。將右邊元素的 margin-left 設(shè)置為 200px，寬度設(shè)置為 auto（默認(rèn)為 auto，撐滿(mǎn)整個(gè)父元素）。

-（2）第二種是利用 flex 布局，將左邊元素的放大和縮小比例設(shè)置為 0，基礎(chǔ)大小設(shè)置為 200px。將右邊的元素的放大比例設(shè)置為 1，縮小比例設(shè)置為 1，基礎(chǔ)大小設(shè)置為 auto。

-（3）第三種是利用絕對(duì)定位布局的方式，將父級(jí)元素設(shè)置相對(duì)定位。左邊元素設(shè)置為 absolute 定位，并且寬度設(shè)置為 200px。將右邊元素的 margin-left 的值設(shè)置為 200px。

-（4）第四種還是利用絕對(duì)定位的方式，將父級(jí)元素設(shè)置為相對(duì)定位。左邊元素寬度設(shè)置為 200px，右邊元素設(shè)置為絕對(duì)定位，左邊定位為 200px，其余方向定位為 0。

101.css 三欄布局的實(shí)現(xiàn)？