在辦公室的LV茶幾箱

儲(chǔ)藏間的茅臺(tái)被調(diào)包了

愛(ài)馬仕錢(qián)包、LV雙肩包被偷了

……

失竊的是陳女士

和她的父親、朋友

當(dāng)民警找上門(mén)時(shí)

她還不敢相信

小偷竟然是她身邊的司機(jī)邱某

近日

湖里區(qū)檢察院對(duì)邱某提起公訴

追究其刑事責(zé)任

辭職司機(jī)惦記老板LV茶幾箱

凌晨?jī)牲c(diǎn)多潛入辦公室調(diào)包

陳女士家住湖里

去年10月底，民警找上門(mén)

問(wèn)她的LV茶幾箱是否還在

陳女士很疑惑

茶幾箱是她半年前

花了34.5萬(wàn)元購(gòu)買(mǎi)的

一直擺放在辦公室里

民警告訴她

那個(gè)茶幾箱可能已經(jīng)被人調(diào)包了

陳女士趕緊找人鑒定

果然是假貨

她這才相信真的遭賊了

更令她意外的是

作案的是已經(jīng)離職的司機(jī)邱某

而且邱某并非第一次下手

他還偷了陳女士的父親

和朋友家中的貴重物品

2020年5月

26歲的邱某應(yīng)聘成為陳女士的司機(jī)，工作不到一年就提出離職，說(shuō)和妻子長(zhǎng)期兩地分居，想回江西老家。

2021年11月

邱某又聯(lián)系陳女士請(qǐng)求回公司繼續(xù)開(kāi)車(chē)，陳女士同意了。

去年7月

邱某再次辭職。

陳女士辦公室的茶幾箱

早就被邱某盯上了

他曾向二手奢侈品收購(gòu)商詢(xún)問(wèn)價(jià)格

一開(kāi)始覺(jué)得價(jià)格太低

一個(gè)月后再次聯(lián)系收購(gòu)商

最終談好以15萬(wàn)元成交

去年10月14日凌晨?jī)牲c(diǎn)多

邱某開(kāi)著租來(lái)的車(chē)

載著仿制的茶幾箱

用密碼開(kāi)門(mén)進(jìn)入陳女士辦公室

將真品調(diào)包

偷配鑰匙記門(mén)鎖密碼

趁家中無(wú)人多次潛入

邱某離職之前

還偷走了陳女士的

愛(ài)馬仕錢(qián)包和公文包

而被他“惦記”的

不只是陳女士的貴重物品

連陳女士父親和朋友的東西

也遭了殃

因?yàn)閹屠习迮苓^(guò)腿，邱某曾拿到過(guò)陳女士父親家中儲(chǔ)藏間的鑰匙，偷偷配制了鑰匙。儲(chǔ)藏間連著地下車(chē)庫(kù)，去年5月至9月，邱某多次用鑰匙打開(kāi)儲(chǔ)藏間，偷走多瓶2011年茅臺(tái)酒、路易十三洋酒， 陸續(xù)轉(zhuǎn)賣(mài)變現(xiàn)。

他還特意去超市買(mǎi)了低價(jià)白酒放進(jìn)箱子再封好，以假亂真。去年10月下旬，陳女士的父親拿酒招待客人時(shí)才發(fā)現(xiàn)被調(diào)包了。

陳女士的好友吳先生曾請(qǐng)邱某幫忙到家里取東西，把自家門(mén)鎖密碼告訴了他。邱某事先了解吳先生的作息時(shí)間，去年9月25日趁其家中無(wú)人，潛入?yún)窍壬抑型底邇善棵┡_(tái)酒、LV雙肩包，幾天后故伎重施又偷走4瓶茅臺(tái)酒。

經(jīng)查，邱某通過(guò)銷(xiāo)贓半年內(nèi)非法獲利39萬(wàn)余元。

經(jīng)開(kāi)庭審理 ，湖里區(qū)人民法院判決邱某犯盜竊罪判處其有期徒刑十年并處罰金6萬(wàn)元。

記者：彭菲

來(lái)源： 廈門(mén)晚報(bào)

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ò)誤，希望大家共同指出！

1.介紹一下標(biāo)準(zhǔn)的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？

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

（1）有兩種盒子模型：IE盒模型（border-box）、W3C標(biāo)準(zhǔn)盒模型（content-box）
（2）盒模型：分為內(nèi)容（content）、填充（padding）、邊界（margin）、邊框（border）四個(gè)部分

IE盒模型和W3C標(biāo)準(zhǔn)盒模型的區(qū)別：

（1）W3C標(biāo)準(zhǔn)盒模型：屬性width，height只包含內(nèi)容content，不包含border和padding
（2）IE盒模型：屬性width，height包含content、border和padding，指的是content
+padding+border。

在ie8+瀏覽器中使用哪個(gè)盒模型可以由box-sizing（CSS新增的屬性）控制，默認(rèn)值為content-box，即標(biāo)準(zhǔn)盒模型；
如果將box-sizing設(shè)為border-box則用的是IE盒模型。如果在ie6，7，8中DOCTYPE缺失會(huì)將盒子模型解釋為IE
盒子模型。若在頁(yè)面中聲明了DOCTYPE類(lèi)型，所有的瀏覽器都會(huì)把盒模型解釋為W3C盒模型。

回答：

盒模型都是由四個(gè)部分組成的，分別是margin、border、padding和content。

標(biāo)準(zhǔn)盒模型和IE盒模型的區(qū)別在于設(shè)置width和height時(shí)，所對(duì)應(yīng)的范圍不同。標(biāo)準(zhǔn)盒模型的width和height屬性的
范圍只包含了content，而IE盒模型的width和height屬性的范圍包含了border、padding和content。

一般來(lái)說(shuō)，我們可以通過(guò)修改元素的box-sizing屬性來(lái)改變?cè)氐暮心Ｐ汀?/code>

詳細(xì)的資料可以參考：《CSS 盒模型詳解》

2.CSS 選擇符有哪些？

（1）id選擇器（#myid）
（2）類(lèi)選擇器（.myclassname）
（3）標(biāo)簽選擇器（div,h1,p）
（4）后代選擇器（h1p）
（5）相鄰后代選擇器（子）選擇器（ul>li）
（6）兄弟選擇器（li~a）
（7）相鄰兄弟選擇器（li+a）
（8）屬性選擇器（a[rel="external"]）
（9）偽類(lèi)選擇器（a:hover,li:nth-child）
（10）偽元素選擇器（::before、::after）
（11）通配符選擇器（*）

3.::before 和:after 中雙冒號(hào)和單冒號(hào)有什么區(qū)別？解釋一下這 2 個(gè)偽元素的作用。

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

單冒號(hào)（:）用于CSS3偽類(lèi)，雙冒號(hào)（::）用于CSS3偽元素。（偽元素由雙冒號(hào)和偽元素名稱(chēng)組成）
雙冒號(hào)是在當(dāng)前規(guī)范中引入的，用于區(qū)分偽類(lèi)和偽元素。不過(guò)瀏覽器需要同時(shí)支持舊的已經(jīng)存在的偽元素寫(xiě)法，
比如:first-line、:first-letter、:before、:after等，
而新的在CSS3中引入的偽元素則不允許再支持舊的單冒號(hào)的寫(xiě)法。

想讓插入的內(nèi)容出現(xiàn)在其它內(nèi)容前，使用::before，否者，使用::after；
在代碼順序上，::after生成的內(nèi)容也比::before生成的內(nèi)容靠后。
如果按堆棧視角，::after生成的內(nèi)容會(huì)在::before生成的內(nèi)容之上。

回答：

在css3中使用單冒號(hào)來(lái)表示偽類(lèi)，用雙冒號(hào)來(lái)表示偽元素。但是為了兼容已有的偽元素的寫(xiě)法，在一些瀏覽器中也可以使用單冒號(hào)
來(lái)表示偽元素。

偽類(lèi)一般匹配的是元素的一些特殊狀態(tài)，如hover、link等，而偽元素一般匹配的特殊的位置，比如after、before等。

4.偽類(lèi)與偽元素的區(qū)別

css引入偽類(lèi)和偽元素概念是為了格式化文檔樹(shù)以外的信息。也就是說(shuō)，偽類(lèi)和偽元素是用來(lái)修飾不在文檔樹(shù)中的部分，比如，一句
話中的第一個(gè)字母，或者是列表中的第一個(gè)元素。

偽類(lèi)用于當(dāng)已有的元素處于某個(gè)狀態(tài)時(shí)，為其添加對(duì)應(yīng)的樣式，這個(gè)狀態(tài)是根據(jù)用戶行為而動(dòng)態(tài)變化的。比如說(shuō)，當(dāng)用戶懸停在指定的
元素時(shí)，我們可以通過(guò):hover來(lái)描述這個(gè)元素的狀態(tài)。

偽元素用于創(chuàng)建一些不在文檔樹(shù)中的元素，并為其添加樣式。它們?cè)试S我們?yōu)樵氐哪承┎糠衷O(shè)置樣式。比如說(shuō)，我們可以通過(guò)::be
fore來(lái)在一個(gè)元素前增加一些文本，并為這些文本添加樣式。雖然用戶可以看到這些文本，但是這些文本實(shí)際上不在文檔樹(shù)中。

有時(shí)你會(huì)發(fā)現(xiàn)偽元素使用了兩個(gè)冒號(hào)（::）而不是一個(gè)冒號(hào)（:）。這是CSS3的一部分，并嘗試區(qū)分偽類(lèi)和偽元素。大多數(shù)瀏覽
器都支持這兩個(gè)值。按照規(guī)則應(yīng)該使用（::）而不是（:），從而區(qū)分偽類(lèi)和偽元素。但是，由于在舊版本的W3C規(guī)范并未對(duì)此進(jìn)行
特別區(qū)分，因此目前絕大多數(shù)的瀏覽器都支持使用這兩種方式表示偽元素。

詳細(xì)資料可以參考：《總結(jié)偽類(lèi)與偽元素》

5.CSS 中哪些屬性可以繼承？

相關(guān)資料：

每個(gè)CSS屬性定義的概述都指出了這個(gè)屬性是默認(rèn)繼承的，還是默認(rèn)不繼承的。這決定了當(dāng)你沒(méi)有為元素的屬性指定值時(shí)該如何計(jì)算
值。

當(dāng)元素的一個(gè)繼承屬性沒(méi)有指定值時(shí)，則取父元素的同屬性的計(jì)算值。只有文檔根元素取該屬性的概述中給定的初始值（這里的意思應(yīng)
該是在該屬性本身的定義中的默認(rèn)值）。

當(dāng)元素的一個(gè)非繼承屬性（在Mozillacode里有時(shí)稱(chēng)之為resetproperty）沒(méi)有指定值時(shí)，則取屬性的初始值initialv
alue（該值在該屬性的概述里被指定）。

有繼承性的屬性：

（1）字體系列屬性
font、font-family、font-weight、font-size、font-style、font-variant、font-stretch、font-size-adjust

（2）文本系列屬性
text-indent、text-align、text-shadow、line-height、word-spacing、letter-spacing、
text-transform、direction、color

（3）表格布局屬性
caption-sideborder-collapseempty-cells

（4）列表屬性
list-style-type、list-style-image、list-style-position、list-style

（5）光標(biāo)屬性
cursor

（6）元素可見(jiàn)性
visibility

（7）還有一些不常用的；speak，page，設(shè)置嵌套引用的引號(hào)類(lèi)型quotes等屬性


注意：當(dāng)一個(gè)屬性不是繼承屬性時(shí)，可以使用inherit關(guān)鍵字指定一個(gè)屬性應(yīng)從父元素繼承它的值，inherit關(guān)鍵字用于顯式地
指定繼承性，可用于任何繼承性/非繼承性屬性。

回答：

每一個(gè)屬性在定義中都給出了這個(gè)屬性是否具有繼承性，一個(gè)具有繼承性的屬性會(huì)在沒(méi)有指定值的時(shí)候，會(huì)使用父元素的同屬性的值
來(lái)作為自己的值。

一般具有繼承性的屬性有，字體相關(guān)的屬性，font-size和font-weight等。文本相關(guān)的屬性，color和text-align等。
表格的一些布局屬性、列表屬性如list-style等。還有光標(biāo)屬性cursor、元素可見(jiàn)性visibility。

當(dāng)一個(gè)屬性不是繼承屬性的時(shí)候，我們也可以通過(guò)將它的值設(shè)置為inherit來(lái)使它從父元素那獲取同名的屬性值來(lái)繼承。

詳細(xì)的資料可以參考：《繼承屬性》《CSS 有哪些屬性可以繼承？》

6.CSS 優(yōu)先級(jí)算法如何計(jì)算？

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

CSS的優(yōu)先級(jí)是根據(jù)樣式聲明的特殊性值來(lái)判斷的。

選擇器的特殊性值分為四個(gè)等級(jí)，如下：

（1）標(biāo)簽內(nèi)選擇符x,0,0,0
（2）ID選擇符0,x,0,0
（3）class選擇符/屬性選擇符/偽類(lèi)選擇符    0,0,x,0
（4）元素和偽元素選擇符0,0,0,x

計(jì)算方法：

（1）每個(gè)等級(jí)的初始值為0
（2）每個(gè)等級(jí)的疊加為選擇器出現(xiàn)的次數(shù)相加
（3）不可進(jìn)位，比如0,99,99,99
（4）依次表示為：0,0,0,0
（5）每個(gè)等級(jí)計(jì)數(shù)之間沒(méi)關(guān)聯(lián)
（6）等級(jí)判斷從左向右，如果某一位數(shù)值相同，則判斷下一位數(shù)值
（7）如果兩個(gè)優(yōu)先級(jí)相同，則最后出現(xiàn)的優(yōu)先級(jí)高，!important也適用
（8）通配符選擇器的特殊性值為：0,0,0,0
（9）繼承樣式優(yōu)先級(jí)最低，通配符樣式優(yōu)先級(jí)高于繼承樣式
（10）!important（權(quán)重），它沒(méi)有特殊性值，但它的優(yōu)先級(jí)是最高的，為了方便記憶，可以認(rèn)為它的特殊性值為1,0,0,0,0。

計(jì)算實(shí)例：

（1）#demoa{color:orange;}/*特殊性值：0,1,0,1*/
（2）div#demoa{color:red;}/*特殊性值：0,1,0,2*/


注意：
（1）樣式應(yīng)用時(shí)，css會(huì)先查看規(guī)則的權(quán)重（!important），加了權(quán)重的優(yōu)先級(jí)最高，當(dāng)權(quán)重相同的時(shí)候，會(huì)比較規(guī)則的特殊性。

（2）特殊性值越大的聲明優(yōu)先級(jí)越高。

（3）相同特殊性值的聲明，根據(jù)樣式引入的順序，后聲明的規(guī)則優(yōu)先級(jí)高（距離元素出現(xiàn)最近的）

回答：

判斷優(yōu)先級(jí)時(shí)，首先我們會(huì)判斷一條屬性聲明是否有權(quán)重，也就是是否在聲明后面加上了!important。一條聲明如果加上了權(quán)重，
那么它的優(yōu)先級(jí)就是最高的，前提是它之后不再出現(xiàn)相同權(quán)重的聲明。如果權(quán)重相同，我們則需要去比較匹配規(guī)則的特殊性。

一條匹配規(guī)則一般由多個(gè)選擇器組成，一條規(guī)則的特殊性由組成它的選擇器的特殊性累加而成。選擇器的特殊性可以分為四個(gè)等級(jí)，
第一個(gè)等級(jí)是行內(nèi)樣式，為1000，第二個(gè)等級(jí)是id選擇器，為0100，第三個(gè)等級(jí)是類(lèi)選擇器、偽類(lèi)選擇器和屬性選擇器，為0010，
第四個(gè)等級(jí)是元素選擇器和偽元素選擇器，為0001。規(guī)則中每出現(xiàn)一個(gè)選擇器，就將它的特殊性進(jìn)行疊加，這個(gè)疊加只限于對(duì)應(yīng)的等
級(jí)的疊加，不會(huì)產(chǎn)生進(jìn)位。選擇器特殊性值的比較是從左向右排序的，也就是說(shuō)以1開(kāi)頭的特殊性值比所有以0開(kāi)頭的特殊性值要大。
比如說(shuō)特殊性值為1000的的規(guī)則優(yōu)先級(jí)就要比特殊性值為0999的規(guī)則高。如果兩個(gè)規(guī)則的特殊性值相等的時(shí)候，那么就會(huì)根據(jù)它們引
入的順序，后出現(xiàn)的規(guī)則的優(yōu)先級(jí)最高。

對(duì)于組合聲明的特殊性值計(jì)算可以參考：《CSS 優(yōu)先級(jí)計(jì)算及應(yīng)用》《CSS 優(yōu)先級(jí)計(jì)算規(guī)則》

7.關(guān)于偽類(lèi) LVHA 的解釋?

a標(biāo)簽有四種狀態(tài)：鏈接訪問(wèn)前、鏈接訪問(wèn)后、鼠標(biāo)滑過(guò)、激活，分別對(duì)應(yīng)四種偽類(lèi):link、:visited、:hover、:active；

當(dāng)鏈接未訪問(wèn)過(guò)時(shí)：

（1）當(dāng)鼠標(biāo)滑過(guò)a鏈接時(shí)，滿足:link和:hover兩種狀態(tài)，要改變a標(biāo)簽的顏色，就必須將:hover偽類(lèi)在:link偽
類(lèi)后面聲明；
（2）當(dāng)鼠標(biāo)點(diǎn)擊激活a鏈接時(shí)，同時(shí)滿足:link、:hover、:active三種狀態(tài)，要顯示a標(biāo)簽激活時(shí)的樣式（:active），
必須將:active聲明放到:link和:hover之后。因此得出LVHA這個(gè)順序。

當(dāng)鏈接訪問(wèn)過(guò)時(shí)，情況基本同上，只不過(guò)需要將:link換成:visited。

這個(gè)順序能不能變？可以，但也只有:link和:visited可以交換位置，因?yàn)橐粋€(gè)鏈接要么訪問(wèn)過(guò)要么沒(méi)訪問(wèn)過(guò)，不可能同時(shí)滿足，
也就不存在覆蓋的問(wèn)題。

8.CSS3 新增偽類(lèi)有那些？

（1）elem:nth-child(n)選中父元素下的第n個(gè)子元素，并且這個(gè)子元素的標(biāo)簽名為elem，n可以接受具體的數(shù)
值，也可以接受函數(shù)。

（2）elem:nth-last-child(n)作用同上，不過(guò)是從后開(kāi)始查找。

（3）elem:last-child選中最后一個(gè)子元素。

（4）elem:only-child如果elem是父元素下唯一的子元素，則選中之。

（5）elem:nth-of-type(n)選中父元素下第n個(gè)elem類(lèi)型元素，n可以接受具體的數(shù)值，也可以接受函數(shù)。

（6）elem:first-of-type選中父元素下第一個(gè)elem類(lèi)型元素。

（7）elem:last-of-type選中父元素下最后一個(gè)elem類(lèi)型元素。

（8）elem:only-of-type如果父元素下的子元素只有一個(gè)elem類(lèi)型元素，則選中該元素。

（9）elem:empty選中不包含子元素和內(nèi)容的elem類(lèi)型元素。

（10）elem:target選擇當(dāng)前活動(dòng)的elem元素。

（11）:not(elem)選擇非elem元素的每個(gè)元素。

（12）:enabled    控制表單控件的禁用狀態(tài)。

（13）:disabled        控制表單控件的禁用狀態(tài)。

(14):checked單選框或復(fù)選框被選中。

詳細(xì)的資料可以參考：《CSS3 新特性總結(jié)(偽類(lèi))》《淺談 CSS 偽類(lèi)和偽元素及 CSS3 新增偽類(lèi)》

9.如何居中 div？

-水平居中：給 div 設(shè)置一個(gè)寬度，然后添加 margin:0auto 屬性

div {
  width: 200px;
  margin: 0auto;
}

-水平居中，利用 text-align:center 實(shí)現(xiàn)

.container {
  background: rgba(0, 0, 0, 0.5);
  text-align: center;
  font-size: 0;
}

.box {
  display: inline-block;
  width: 500px;
  height: 400px;
  background-color: pink;
}

-讓絕對(duì)定位的 div 居中

div {
  position: absolute;
  width: 300px;
  height: 300px;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: pink; /*方便看效果*/
}

-水平垂直居中一

/*確定容器的寬高寬500高300的層設(shè)置層的外邊距div{*/
position:absolute;/*絕對(duì)定位*/
width:500px;
height:300px;
top:50%;
left:50%;
margin:-150px00-250px;/*外邊距為自身寬高的一半*/
background-color:pink;/*方便看效果*/
}

-水平垂直居中二

/*未知容器的寬高，利用`transform`屬性*/
div {
  position: absolute; /*相對(duì)定位或絕對(duì)定位均可*/
  width: 500px;
  height: 300px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: pink; /*方便看效果*/
}

-水平垂直居中三

/*利用flex布局實(shí)際使用時(shí)應(yīng)考慮兼容性*/
.container {
  display: flex;
  align-items: center; /*垂直居中*/
  justify-content: center; /*水平居中*/
}
.containerdiv {
  width: 100px;
  height: 100px;
  background-color: pink; /*方便看效果*/
}

-水平垂直居中四

/*利用text-align:center和vertical-align:middle屬性*/
.container {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  text-align: center;
  font-size: 0;
  white-space: nowrap;
  overflow: auto;
}

.container::after {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.box {
  display: inline-block;
  width: 500px;
  height: 400px;
  background-color: pink;
  white-space: normal;
  vertical-align: middle;
}

回答：

一般常見(jiàn)的幾種居中的方法有：

對(duì)于寬高固定的元素

（1）我們可以利用margin:0auto來(lái)實(shí)現(xiàn)元素的水平居中。

（2）利用絕對(duì)定位，設(shè)置四個(gè)方向的值都為0，并將margin設(shè)置為auto，由于寬高固定，因此對(duì)應(yīng)方向?qū)崿F(xiàn)平分，可以實(shí)現(xiàn)水
平和垂直方向上的居中。

（3）利用絕對(duì)定位，先將元素的左上角通過(guò)top:50%和left:50%定位到頁(yè)面的中心，然后再通過(guò)margin負(fù)值來(lái)調(diào)整元素
的中心點(diǎn)到頁(yè)面的中心。

（4）利用絕對(duì)定位，先將元素的左上角通過(guò)top:50%和left:50%定位到頁(yè)面的中心，然后再通過(guò)translate來(lái)調(diào)整元素
的中心點(diǎn)到頁(yè)面的中心。

（5）使用flex布局，通過(guò)align-items:center和justify-content:center設(shè)置容器的垂直和水平方向上為居中對(duì)
齊，然后它的子元素也可以實(shí)現(xiàn)垂直和水平的居中。

對(duì)于寬高不定的元素，上面的后面兩種方法，可以實(shí)現(xiàn)元素的垂直和水平的居中。

10.display 有哪些值？說(shuō)明他們的作用。

block    塊類(lèi)型。默認(rèn)寬度為父元素寬度，可設(shè)置寬高，換行顯示。
none    元素不顯示，并從文檔流中移除。
inline    行內(nèi)元素類(lèi)型。默認(rèn)寬度為內(nèi)容寬度，不可設(shè)置寬高，同行顯示。
inline-block默認(rèn)寬度為內(nèi)容寬度，可以設(shè)置寬高，同行顯示。
list-item    像塊類(lèi)型元素一樣顯示，并添加樣式列表標(biāo)記。
table    此元素會(huì)作為塊級(jí)表格來(lái)顯示。
inherit    規(guī)定應(yīng)該從父元素繼承display屬性的值。

詳細(xì)資料可以參考：《CSSdisplay 屬性》

11.position 的值 relative 和 absolute 定位原點(diǎn)是？

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

absolute
生成絕對(duì)定位的元素，相對(duì)于值不為static的第一個(gè)父元素的paddingbox進(jìn)行定位，也可以理解為離自己這一級(jí)元素最近的
一級(jí)position設(shè)置為absolute或者relative的父元素的paddingbox的左上角為原點(diǎn)的。

fixed（老IE不支持）
生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位。

relative
生成相對(duì)定位的元素，相對(duì)于其元素本身所在正常位置進(jìn)行定位。

static
默認(rèn)值。沒(méi)有定位，元素出現(xiàn)在正常的流中（忽略top,bottom,left,right,z-index聲明）。

inherit
規(guī)定從父元素繼承position屬性的值。

回答：

relative定位的元素，是相對(duì)于元素本身的正常位置來(lái)進(jìn)行定位的。

absolute定位的元素，是相對(duì)于它的第一個(gè)position值不為static的祖先元素的paddingbox來(lái)進(jìn)行定位的。這句話
我們可以這樣來(lái)理解，我們首先需要找到絕對(duì)定位元素的一個(gè)position的值不為static的祖先元素，然后相對(duì)于這個(gè)祖先元
素的paddingbox來(lái)定位，也就是說(shuō)在計(jì)算定位距離的時(shí)候，padding的值也要算進(jìn)去。

12.CSS3 有哪些新特性？（根據(jù)項(xiàng)目回答）

新增各種CSS選擇器    （:not(.input)：所有class不是“input”的節(jié)點(diǎn)）
圓角        （border-radius:8px）
多列布局    （multi-columnlayout）
陰影和反射    （Shadow\Reflect）
文字特效        （text-shadow）
文字渲染        （Text-decoration）
線性漸變        （gradient）
旋轉(zhuǎn)            （transform）
縮放，定位，傾斜，動(dòng)畫(huà)，多背景
例如：transform:\scale(0.85,0.90)\translate(0px,-30px)\skew(-9deg,0deg)\Animation:

13.請(qǐng)解釋一下 CSS3 的 Flexbox（彈性盒布局模型），以及適用場(chǎng)景？

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

Flex是FlexibleBox的縮寫(xiě)，意為"彈性布局"，用來(lái)為盒狀模型提供最大的靈活性。

任何一個(gè)容器都可以指定為Flex布局。行內(nèi)元素也可以使用Flex布局。注意，設(shè)為Flex布局以后，子元素的float、cl
ear和vertical-align屬性將失效。

采用Flex布局的元素，稱(chēng)為Flex容器（flexcontainer），簡(jiǎn)稱(chēng)"容器"。它的所有子元素自動(dòng)成為容器成員，稱(chēng)為Flex
項(xiàng)目（flexitem），簡(jiǎn)稱(chēng)"項(xiàng)目"。

容器默認(rèn)存在兩根軸：水平的主軸（mainaxis）和垂直的交叉軸（crossaxis），項(xiàng)目默認(rèn)沿主軸排列。


以下6個(gè)屬性設(shè)置在容器上。

flex-direction屬性決定主軸的方向（即項(xiàng)目的排列方向）。

flex-wrap屬性定義，如果一條軸線排不下，如何換行。

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫(xiě)形式，默認(rèn)值為rownowrap。

justify-content屬性定義了項(xiàng)目在主軸上的對(duì)齊方式。

align-items屬性定義項(xiàng)目在交叉軸上如何對(duì)齊。

align-content屬性定義了多根軸線的對(duì)齊方式。如果項(xiàng)目只有一根軸線，該屬性不起作用。


以下6個(gè)屬性設(shè)置在項(xiàng)目上。

order屬性定義項(xiàng)目的排列順序。數(shù)值越小，排列越靠前，默認(rèn)為0。

flex-grow屬性定義項(xiàng)目的放大比例，默認(rèn)為0，即如果存在剩余空間，也不放大。

flex-shrink屬性定義了項(xiàng)目的縮小比例，默認(rèn)為1，即如果空間不足，該項(xiàng)目將縮小。

flex-basis屬性定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間。瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間。它的默認(rèn)
值為auto，即項(xiàng)目的本來(lái)大小。

flex屬性是flex-grow，flex-shrink和flex-basis的簡(jiǎn)寫(xiě)，默認(rèn)值為01auto。

align-self屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式，可覆蓋align-items屬性。默認(rèn)值為auto，表示繼承父
元素的align-items屬性，如果沒(méi)有父元素，則等同于stretch。

回答：

flex布局是CSS3新增的一種布局方式，我們可以通過(guò)將一個(gè)元素的display屬性值設(shè)置為flex從而使它成為一個(gè)flex
容器，它的所有子元素都會(huì)成為它的項(xiàng)目。

一個(gè)容器默認(rèn)有兩條軸，一個(gè)是水平的主軸，一個(gè)是與主軸垂直的交叉軸。我們可以使用flex-direction來(lái)指定主軸的方向。
我們可以使用justify-content來(lái)指定元素在主軸上的排列方式，使用align-items來(lái)指定元素在交叉軸上的排列方式。還
可以使用flex-wrap來(lái)規(guī)定當(dāng)一行排列不下時(shí)的換行方式。

對(duì)于容器中的項(xiàng)目，我們可以使用order屬性來(lái)指定項(xiàng)目的排列順序，還可以使用flex-grow來(lái)指定當(dāng)排列空間有剩余的時(shí)候，
項(xiàng)目的放大比例。還可以使用flex-shrink來(lái)指定當(dāng)排列空間不足時(shí)，項(xiàng)目的縮小比例。

詳細(xì)資料可以參考：《Flex 布局教程：語(yǔ)法篇》《Flex 布局教程：實(shí)例篇》

14.用純 CSS 創(chuàng)建一個(gè)三角形的原理是什么？

采用的是相鄰邊框連接處的均分原理。
  將元素的寬高設(shè)為0，只設(shè)置
  border
  ，把任意三條邊隱藏掉（顏色設(shè)為
  transparent），剩下的就是一個(gè)三角形。
  #demo {
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: transparenttransparentredtransparent;
}

15.一個(gè)滿屏品字布局如何設(shè)計(jì)?

簡(jiǎn)單的方式：
    上面的div寬100%，
    下面的兩個(gè)div分別寬50%，
    然后用float或者inline使其不換行即可

16.CSS 多列等高如何實(shí)現(xiàn)？

（1）利用padding-bottom|margin-bottom正負(fù)值相抵，不會(huì)影響頁(yè)面布局的特點(diǎn)。設(shè)置父容器設(shè)置超出隱藏（overflow:
hidden），這樣父容器的高度就還是它里面的列沒(méi)有設(shè)定padding-bottom時(shí)的高度，當(dāng)它里面的任一列高度增加了，則
父容器的高度被撐到里面最高那列的高度，其他比這列矮的列會(huì)用它們的padding-bottom補(bǔ)償這部分高度差。

（2）利用table-cell所有單元格高度都相等的特性，來(lái)實(shí)現(xiàn)多列等高。

（3）利用flex布局中項(xiàng)目align-items屬性默認(rèn)為stretch，如果項(xiàng)目未設(shè)置高度或設(shè)為auto，將占滿整個(gè)容器的高度
的特性，來(lái)實(shí)現(xiàn)多列等高。

詳細(xì)資料可以參考：《前端應(yīng)該掌握的 CSS 實(shí)現(xiàn)多列等高布局》《CSS：多列等高布局》

17.經(jīng)常遇到的瀏覽器的兼容性有哪些？原因，解決方法是什么，常用 hack 的技巧？

（1）png24位的圖片在iE6瀏覽器上出現(xiàn)背景
解決方案：做成PNG8，也可以引用一段腳本處理。

（2）瀏覽器默認(rèn)的margin和padding不同
解決方案：加一個(gè)全局的*{margin:0;padding:0;}來(lái)統(tǒng)一。

（3）IE6雙邊距bug：在IE6下，如果對(duì)元素設(shè)置了浮動(dòng)，同時(shí)又設(shè)置了margin-left或
margin-right，margin值會(huì)加倍。

#box{float:left;width:10px;margin:00010px;}

這種情況之下IE會(huì)產(chǎn)生20px的距離
解決方案：在float的標(biāo)簽樣式控制中加入_display:inline;將其轉(zhuǎn)化為行內(nèi)屬性。(_這個(gè)符號(hào)只有ie6會(huì)識(shí)別)

（4）漸進(jìn)識(shí)別的方式，從總體中逐漸排除局部。
首先，巧妙的使用"\9"這一標(biāo)記，將IE游覽器從所有情況中分離出來(lái)。
接著，再次使用"+"將IE8和IE7、IE6分離開(kāi)來(lái)，這樣IE8已經(jīng)獨(dú)立識(shí)別。
.bb{
background-color:#f1ee18;/*所有識(shí)別*/
.background-color:#00deff\9;/*IE6、7、8識(shí)別*/
+background-color:#a200ff;/*IE6、7識(shí)別*/
_background-color:#1e0bd1;/*IE6識(shí)別*/
}

（5）IE下，可以使用獲取常規(guī)屬性的方法來(lái)獲取自定義屬性，也可以使用getAttribute()獲取自定義
屬性；Firefox下，只能使用getAttribute()獲取自定義屬性
解決方法：統(tǒng)一通過(guò)getAttribute()獲取自定義屬性。

（6）IE下，event對(duì)象有x、y屬性，但是沒(méi)有pageX、pageY屬性;Firefox下，event對(duì)象有
pageX、pageY屬性，但是沒(méi)有x、y屬性。
解決方法：（條件注釋?zhuān)┤秉c(diǎn)是在IE瀏覽器下可能會(huì)增加額外的HTTP請(qǐng)求數(shù)。

（7）Chrome中文界面下默認(rèn)會(huì)將小于12px的文本強(qiáng)制按照12px顯示
解決方法：

1.可通過(guò)加入CSS屬性-webkit-text-size-adjust:none;解決。但是，在chrome
更新到27版本之后就不可以用了。

2.還可以使用-webkit-transform:scale(0.5);注意-webkit-transform:scale(0.75);
收縮的是整個(gè)span的大小，這時(shí)候，必須要將span轉(zhuǎn)換成塊元素，可以使用display：block/inline-block/...；

（8）超鏈接訪問(wèn)過(guò)后hover樣式就不出現(xiàn)了，被點(diǎn)擊訪問(wèn)過(guò)的超鏈接樣式不再具有hover和active了
解決方法：改變CSS屬性的排列順序L-V-H-A

（9）怪異模式問(wèn)題：漏寫(xiě)DTD聲明，F(xiàn)irefox仍然會(huì)按照標(biāo)準(zhǔn)模式來(lái)解析網(wǎng)頁(yè)，但在IE中會(huì)觸發(fā)怪異模
式。為避免怪異模式給我們帶來(lái)不必要的麻煩，最好養(yǎng)成書(shū)寫(xiě)DTD聲明的好習(xí)慣。

http://18.li 與 li 之間有看不見(jiàn)的空白間隔是什么原因引起的？有什么解決辦法？

瀏覽器會(huì)把inline元素間的空白字符（空格、換行、Tab等）渲染成一個(gè)空格。而為了美觀。我們通常是一個(gè)<li>放在一行，
這導(dǎo)致<li>換行后產(chǎn)生換行字符，它變成一個(gè)空格，占用了一個(gè)字符的寬度。

解決辦法：

（1）為<li>設(shè)置float:left。不足：有些容器是不能設(shè)置浮動(dòng)，如左右切換的焦點(diǎn)圖等。

（2）將所有<li>寫(xiě)在同一行。不足：代碼不美觀。

（3）將<ul>內(nèi)的字符尺寸直接設(shè)為0，即font-size:0。不足：<ul>中的其他字符尺寸也被設(shè)為0，需要額外重新設(shè)定其他
字符尺寸，且在Safari瀏覽器依然會(huì)出現(xiàn)空白間隔。

（4）消除<ul>的字符間隔letter-spacing:-8px，不足：這也設(shè)置了<li>內(nèi)的字符間隔，因此需要將<li>內(nèi)的字符
間隔設(shè)為默認(rèn)letter-spacing:normal。

詳細(xì)資料可以參考：《li 與 li 之間有看不見(jiàn)的空白間隔是什么原因引起的？》

19.為什么要初始化 CSS 樣式？

-因?yàn)闉g覽器的兼容問(wèn)題，不同瀏覽器對(duì)有些標(biāo)簽的默認(rèn)值是不同的，如果沒(méi)對(duì)CSS初始化往往會(huì)出現(xiàn)瀏覽器之間的頁(yè)面顯示差異。

-當(dāng)然，初始化樣式會(huì)對(duì)SEO有一定的影響，但魚(yú)和熊掌不可兼得，但力求影響最小的情況下初始化。

最簡(jiǎn)單的初始化方法：*{padding:0;margin:0;}（強(qiáng)烈不建議）

淘寶的樣式初始化代碼：
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend
,button,input,textarea,th,td{margin:0;padding:0;}
body,button,input,select,textarea{font:12px/1.5tahoma,arial,\5b8b\4f53;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
address,cite,dfn,em,var{font-style:normal;}
code,kbd,pre,samp{font-family:couriernew,courier,monospace;}
small{font-size:12px;}
ul,ol{list-style:none;}
a{text-decoration:none;}
a:hover{text-decoration:underline;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
legend{color:#000;}
fieldset,img{border:0;}
button,input,select,textarea{font-size:100%;}
table{border-collapse:collapse;border-spacing:0;}

20.什么是包含塊，對(duì)于包含塊的理解?

包含塊（containingblock）就是元素用來(lái)計(jì)算和定位的一個(gè)框。

（1）根元素（很多場(chǎng)景下可以看成是<html>）被稱(chēng)為“初始包含塊”，其尺寸等同于瀏覽器可視窗口的大小。

（2）對(duì)于其他元素，如果該元素的position是relative或者static，則“包含塊”由其最近的塊容器祖先盒的contentbox
邊界形成。

（3）如果元素position:fixed，則“包含塊”是“初始包含塊”。

（4）如果元素position:absolute，則“包含塊”由最近的position不為static的祖先元素建立，具體方式如下：

如果該祖先元素是純inline元素，則規(guī)則略復(fù)雜：
?假設(shè)給內(nèi)聯(lián)元素的前后各生成一個(gè)寬度為0的內(nèi)聯(lián)盒子（inlinebox），則這兩個(gè)內(nèi)聯(lián)盒子的paddingbox外面的包
圍盒就是內(nèi)聯(lián)元素的“包含塊”；
?如果該內(nèi)聯(lián)元素被跨行分割了，那么“包含塊”是未定義的，也就是CSS2.1規(guī)范并沒(méi)有明確定義，瀏覽器自行發(fā)揮
否則，“包含塊”由該祖先的paddingbox邊界形成。

如果沒(méi)有符合條件的祖先元素，則“包含塊”是“初始包含塊”。

21.CSS 里的 visibility 屬性有個(gè) collapse 屬性值是干嘛用的？在不同瀏覽器下以后什么區(qū)別？

（1）對(duì)于一般的元素，它的表現(xiàn)跟visibility：hidden;是一樣的。元素是不可見(jiàn)的，但此時(shí)仍占用頁(yè)面空間。

（2）但例外的是，如果這個(gè)元素是table相關(guān)的元素，例如table行，tablegroup，table列，tablecolumngroup，它的
表現(xiàn)卻跟display:none一樣，也就是說(shuō)，它們占用的空間也會(huì)釋放。

在不同瀏覽器下的區(qū)別：

在谷歌瀏覽器里，使用collapse值和使用hidden值沒(méi)有什么區(qū)別。

在火狐瀏覽器、Opera和IE11里，使用collapse值的效果就如它的字面意思：table的行會(huì)消失，它的下面一行會(huì)補(bǔ)充它的位
置。

詳細(xì)資料可以參考：《CSS 里的 visibility 屬性有個(gè)鮮為人知的屬性值：collapse》

22.width:auto 和 width:100%的區(qū)別

一般而言

width:100%會(huì)使元素box的寬度等于父元素的contentbox的寬度。

width:auto會(huì)使元素?fù)螡M整個(gè)父元素，margin、border、padding、content區(qū)域會(huì)自動(dòng)分配水平空間。

23.絕對(duì)定位元素與非絕對(duì)定位元素的百分比計(jì)算的區(qū)別

絕對(duì)定位元素的寬高百分比是相對(duì)于臨近的position不為static的祖先元素的paddingbox來(lái)計(jì)算的。

非絕對(duì)定位元素的寬高百分比則是相對(duì)于父元素的contentbox來(lái)計(jì)算的。

24.簡(jiǎn)單介紹使用圖片 base64 編碼的優(yōu)點(diǎn)和缺點(diǎn)。

base64編碼是一種圖片處理格式，通過(guò)特定的算法將圖片編碼成一長(zhǎng)串字符串，在頁(yè)面上顯示的時(shí)候，可以用該字符串來(lái)代替圖片的
url屬性。

使用base64的優(yōu)點(diǎn)是：

（1）減少一個(gè)圖片的HTTP請(qǐng)求

使用base64的缺點(diǎn)是：

（1）根據(jù)base64的編碼原理，編碼后的大小會(huì)比原文件大小大1/3，如果把大圖片編碼到html/css中，不僅會(huì)造成文件體
積的增加，影響文件的加載速度，還會(huì)增加瀏覽器對(duì)html或css文件解析渲染的時(shí)間。

（2）使用base64無(wú)法直接緩存，要緩存只能緩存包含base64的文件，比如HTML或者CSS，這相比域直接緩存圖片的效果要
差很多。

（3）兼容性的問(wèn)題，ie8以前的瀏覽器不支持。

一般一些網(wǎng)站的小圖標(biāo)可以使用base64圖片來(lái)引入。

詳細(xì)資料可以參考：《玩轉(zhuǎn)圖片 base64 編碼》《前端開(kāi)發(fā)中，使用 base64 圖片的弊端是什么？》《小 tip:base64:URL 背景圖片與 web 頁(yè)面性能優(yōu)化》

25.'display'、'position'和'float'的相互關(guān)系？

（1）首先我們判斷display屬性是否為none，如果為none，則position和float屬性的值不影響元素最后的表現(xiàn)。

（2）然后判斷position的值是否為absolute或者fixed，如果是，則float屬性失效，并且display的值應(yīng)該被
設(shè)置為table或者block，具體轉(zhuǎn)換需要看初始轉(zhuǎn)換值。

（3）如果position的值不為absolute或者fixed，則判斷float屬性的值是否為none，如果不是，則display
的值則按上面的規(guī)則轉(zhuǎn)換。注意，如果position的值為relative并且float屬性的值存在，則relative相對(duì)
于浮動(dòng)后的最終位置定位。

（4）如果float的值為none，則判斷元素是否為根元素，如果是根元素則display屬性按照上面的規(guī)則轉(zhuǎn)換，如果不是，
則保持指定的display屬性值不變。

總的來(lái)說(shuō)，可以把它看作是一個(gè)類(lèi)似優(yōu)先級(jí)的機(jī)制，"position:absolute"和"position:fixed"優(yōu)先級(jí)最高，有它存在
的時(shí)候，浮動(dòng)不起作用，'display'的值也需要調(diào)整；其次，元素的'float'特性的值不是"none"的時(shí)候或者它是根元素
的時(shí)候，調(diào)整'display'的值；最后，非根元素，并且非浮動(dòng)元素，并且非絕對(duì)定位的元素，'display'特性值同設(shè)置值。

詳細(xì)資料可以參考：《position 跟 display、margincollapse、overflow、float 這些特性相互疊加后會(huì)怎么樣？》

26.margin 重疊問(wèn)題的理解。

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

塊級(jí)元素的上外邊距（margin-top）與下外邊距（margin-bottom）有時(shí)會(huì)合并為單個(gè)外邊距，這樣的現(xiàn)象稱(chēng)為“margin合
并”。

產(chǎn)生折疊的必備條件：margin必須是鄰接的!

而根據(jù)w3c規(guī)范，兩個(gè)margin是鄰接的必須滿足以下條件：

?必須是處于常規(guī)文檔流（非float和絕對(duì)定位）的塊級(jí)盒子，并且處于同一個(gè)BFC當(dāng)中。
?沒(méi)有線盒，沒(méi)有空隙，沒(méi)有padding和border將他們分隔開(kāi)
?都屬于垂直方向上相鄰的外邊距，可以是下面任意一種情況
?元素的margin-top與其第一個(gè)常規(guī)文檔流的子元素的margin-top
?元素的margin-bottom與其下一個(gè)常規(guī)文檔流的兄弟元素的margin-top
?height為auto的元素的margin-bottom與其最后一個(gè)常規(guī)文檔流的子元素的margin-bottom
?高度為0并且最小高度也為0，不包含常規(guī)文檔流的子元素，并且自身沒(méi)有建立新的BFC的元素的margin-top
和margin-bottom


margin合并的3種場(chǎng)景：

（1）相鄰兄弟元素margin合并。

解決辦法：
?設(shè)置塊狀格式化上下文元素（BFC）

（2）父級(jí)和第一個(gè)/最后一個(gè)子元素的margin合并。

解決辦法：

對(duì)于margin-top合并，可以進(jìn)行如下操作（滿足一個(gè)條件即可）：
?父元素設(shè)置為塊狀格式化上下文元素；
?父元素設(shè)置border-top值；
?父元素設(shè)置padding-top值；
?父元素和第一個(gè)子元素之間添加內(nèi)聯(lián)元素進(jìn)行分隔。

對(duì)于margin-bottom合并，可以進(jìn)行如下操作（滿足一個(gè)條件即可）：
?父元素設(shè)置為塊狀格式化上下文元素；
?父元素設(shè)置border-bottom值；
?父元素設(shè)置padding-bottom值；
?父元素和最后一個(gè)子元素之間添加內(nèi)聯(lián)元素進(jìn)行分隔；
?父元素設(shè)置height、min-height或max-height。

（3）空塊級(jí)元素的margin合并。

解決辦法：
?設(shè)置垂直方向的border；
?設(shè)置垂直方向的padding；
?里面添加內(nèi)聯(lián)元素（直接Space鍵空格是沒(méi)用的）；
?設(shè)置height或者min-height。

回答：

margin重疊指的是在垂直方向上，兩個(gè)相鄰元素的margin發(fā)生重疊的情況。

一般來(lái)說(shuō)可以分為四種情形：

第一種是相鄰兄弟元素的marin-bottom和margin-top的值發(fā)生重疊。這種情況下我們可以通過(guò)設(shè)置其中一個(gè)元素為BFC
來(lái)解決。

第二種是父元素的margin-top和子元素的margin-top發(fā)生重疊。它們發(fā)生重疊是因?yàn)樗鼈兪窍噜彽模晕覀兛梢酝ㄟ^(guò)這
一點(diǎn)來(lái)解決這個(gè)問(wèn)題。我們可以為父元素設(shè)置border-top、padding-top值來(lái)分隔它們，當(dāng)然我們也可以將父元素設(shè)置為BFC
來(lái)解決。

第三種是高度為auto的父元素的margin-bottom和子元素的margin-bottom發(fā)生重疊。它們發(fā)生重疊一個(gè)是因?yàn)樗鼈兿?
鄰，一個(gè)是因?yàn)楦冈氐母叨炔还潭āＲ虼宋覀兛梢詾楦冈卦O(shè)置border-bottom、padding-bottom來(lái)分隔它們，也可以為
父元素設(shè)置一個(gè)高度，max-height和min-height也能解決這個(gè)問(wèn)題。當(dāng)然將父元素設(shè)置為BFC是最簡(jiǎn)單的方法。

第四種情況，是沒(méi)有內(nèi)容的元素，自身的margin-top和margin-bottom發(fā)生的重疊。我們可以通過(guò)為其設(shè)置border、pa
dding或者高度來(lái)解決這個(gè)問(wèn)題。

27.對(duì) BFC 規(guī)范（塊級(jí)格式化上下文：blockformattingcontext）的理解？

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

塊格式化上下文（BlockFormattingContext，BFC）是Web頁(yè)面的可視化CSS渲染的一部分，是布局過(guò)程中生成塊級(jí)盒
子的區(qū)域，也是浮動(dòng)元素與其他元素的交互限定區(qū)域。

通俗來(lái)講

?BFC是一個(gè)獨(dú)立的布局環(huán)境，可以理解為一個(gè)容器，在這個(gè)容器中按照一定規(guī)則進(jìn)行物品擺放，并且不會(huì)影響其它環(huán)境中的物品。
?如果一個(gè)元素符合觸發(fā)BFC的條件，則BFC中的元素布局不受外部影響。

創(chuàng)建BFC

（1）根元素或包含根元素的元素
（2）浮動(dòng)元素float＝left|right或inherit（≠none）
（3）絕對(duì)定位元素position＝absolute或fixed
（4）display＝inline-block|flex|inline-flex|table-cell或table-caption
（5）overflow＝hidden|auto或scroll(≠visible)

回答：

BFC指的是塊級(jí)格式化上下文，一個(gè)元素形成了BFC之后，那么它內(nèi)部元素產(chǎn)生的布局不會(huì)影響到外部元素，外部元素的布局也
不會(huì)影響到BFC中的內(nèi)部元素。一個(gè)BFC就像是一個(gè)隔離區(qū)域，和其他區(qū)域互不影響。

一般來(lái)說(shuō)根元素是一個(gè)BFC區(qū)域，浮動(dòng)和絕對(duì)定位的元素也會(huì)形成BFC，display屬性的值為inline-block、flex這些
屬性時(shí)也會(huì)創(chuàng)建BFC。還有就是元素的overflow的值不為visible時(shí)都會(huì)創(chuàng)建BFC。

詳細(xì)資料可以參考：《深入理解 BFC 和 MarginCollapse》《前端面試題-BFC（塊格式化上下文）》

28.IFC 是什么？

IFC指的是行級(jí)格式化上下文，它有這樣的一些布局規(guī)則：

（1）行級(jí)上下文內(nèi)部的盒子會(huì)在水平方向，一個(gè)接一個(gè)地放置。
（2）當(dāng)一行不夠的時(shí)候會(huì)自動(dòng)切換到下一行。
（3）行級(jí)上下文的高度由內(nèi)部最高的內(nèi)聯(lián)盒子的高度決定。

詳細(xì)資料可以參考：

《BFC 和 IFC 的理解（布局）》

29.請(qǐng)解釋一下為什么需要清除浮動(dòng)？清除浮動(dòng)的方式

浮動(dòng)元素可以左右移動(dòng)，直到遇到另一個(gè)浮動(dòng)元素或者遇到它外邊緣的包含框。浮動(dòng)框不屬于文檔流中的普通流，當(dāng)元素浮動(dòng)之后，
不會(huì)影響塊級(jí)元素的布局，只會(huì)影響內(nèi)聯(lián)元素布局。此時(shí)文檔流中的普通流就會(huì)表現(xiàn)得該浮動(dòng)框不存在一樣的布局模式。當(dāng)包含框
的高度小于浮動(dòng)框的時(shí)候，此時(shí)就會(huì)出現(xiàn)“高度塌陷”。

清除浮動(dòng)是為了清除使用浮動(dòng)元素產(chǎn)生的影響。浮動(dòng)的元素，高度會(huì)塌陷，而高度的塌陷使我們頁(yè)面后面的布局不能正常顯示。

清除浮動(dòng)的方式

（1）使用clear屬性清除浮動(dòng)。參考28。

（2）使用BFC塊級(jí)格式化上下文來(lái)清除浮動(dòng)。參考26。

因?yàn)锽FC元素不會(huì)影響外部元素的特點(diǎn)，所以BFC元素也可以用來(lái)清除浮動(dòng)的影響，因?yàn)槿绻磺宄釉馗?dòng)則父元
素高度塌陷，必然會(huì)影響后面元素布局和定位，這顯然有違BFC元素的子元素不會(huì)影響外部元素的設(shè)定。

30.使用 clear 屬性清除浮動(dòng)的原理？

使用clear屬性清除浮動(dòng)，其語(yǔ)法如下：

clear:none|left|right|both

如果單看字面意思，clear:left應(yīng)該是“清除左浮動(dòng)”，clear:right應(yīng)該是“清除右浮動(dòng)”的意思，實(shí)際上，這種解釋是有問(wèn)
題的，因?yàn)楦?dòng)一直還在，并沒(méi)有清除。

官方對(duì)clear屬性的解釋是：“元素盒子的邊不能和前面的浮動(dòng)元素相鄰。”，我們對(duì)元素設(shè)置clear屬性是為了避免浮動(dòng)元素
對(duì)該元素的影響，而不是清除掉浮動(dòng)。

還需要注意的一點(diǎn)是clear屬性指的是元素盒子的邊不能和前面的浮動(dòng)元素相鄰，注意這里“前面的”3個(gè)字，也就是clear屬
性對(duì)“后面的”浮動(dòng)元素是不聞不問(wèn)的。考慮到float屬性要么是left，要么是right，不可能同時(shí)存在，同時(shí)由于clear
屬性對(duì)“后面的”浮動(dòng)元素不聞不問(wèn)，因此，當(dāng)clear:left有效的時(shí)候，clear:right必定無(wú)效，也就是此時(shí)clear:left
等同于設(shè)置clear:both；同樣地，clear:right如果有效也是等同于設(shè)置clear:both。由此可見(jiàn)，clear:left和cle
ar:right這兩個(gè)聲明就沒(méi)有任何使用的價(jià)值，至少在CSS世界中是如此，直接使用clear:both吧。

一般使用偽元素的方式清除浮動(dòng)

.clear::after{
content:'';
display:table;//也可以是'block'，或者是'list-item'
clear:both;
}

clear屬性只有塊級(jí)元素才有效的，而::after等偽元素默認(rèn)都是內(nèi)聯(lián)水平，這就是借助偽元素清除浮動(dòng)影響時(shí)需要設(shè)置disp
lay屬性值的原因。

31.zoom:1 的清除浮動(dòng)原理?

清除浮動(dòng)，觸發(fā)hasLayout；
zoom屬性是IE瀏覽器的專(zhuān)有屬性，它可以設(shè)置或檢索對(duì)象的縮放比例。解決ie下比較奇葩的bug。譬如外邊距（margin）
的重疊，浮動(dòng)清除，觸發(fā)ie的haslayout屬性等。

來(lái)龍去脈大概如下：
當(dāng)設(shè)置了zoom的值之后，所設(shè)置的元素就會(huì)就會(huì)擴(kuò)大或者縮小，高度寬度就會(huì)重新計(jì)算了，這里一旦改變zoom值時(shí)其實(shí)也會(huì)發(fā)
生重新渲染，運(yùn)用這個(gè)原理，也就解決了ie下子元素浮動(dòng)時(shí)候父元素不隨著自動(dòng)擴(kuò)大的問(wèn)題。

zoom屬性是IE瀏覽器的專(zhuān)有屬性，火狐和老版本的webkit核心的瀏覽器都不支持這個(gè)屬性。然而，zoom現(xiàn)在已經(jīng)被逐步標(biāo)
準(zhǔn)化，出現(xiàn)在CSS3.0規(guī)范草案中。

目前非ie由于不支持這個(gè)屬性，它們又是通過(guò)什么屬性來(lái)實(shí)現(xiàn)元素的縮放呢？可以通過(guò)css3里面的動(dòng)畫(huà)屬性scale進(jìn)行縮放。

32.移動(dòng)端的布局用過(guò)媒體查詢(xún)嗎？

假設(shè)你現(xiàn)在正用一臺(tái)顯示設(shè)備來(lái)閱讀這篇文章，同時(shí)你也想把它投影到屏幕上，或者打印出來(lái)，而顯示設(shè)備、屏幕投影和打印等這些
媒介都有自己的特點(diǎn)，CSS就是為文檔提供在不同媒介上展示的適配方法

當(dāng)媒體查詢(xún)?yōu)檎鏁r(shí)，相關(guān)的樣式表或樣式規(guī)則會(huì)按照正常的級(jí)聯(lián)規(guī)被應(yīng)用。當(dāng)媒體查詢(xún)返回假，標(biāo)簽上帶有媒體查詢(xún)的樣式表仍將被
下載（只不過(guò)不會(huì)被應(yīng)用）。

包含了一個(gè)媒體類(lèi)型和至少一個(gè)使用寬度、高度和顏色等媒體屬性來(lái)限制樣式表范圍的表達(dá)式。CSS3加入的媒體查詢(xún)使得無(wú)需修改
內(nèi)容便可以使樣式應(yīng)用于某些特定的設(shè)備范圍。

詳細(xì)資料可以參考：《CSS3@media 查詢(xún)》《響應(yīng)式布局和自適應(yīng)布局詳解》

33.使用 CSS 預(yù)處理器嗎？喜歡哪個(gè)？

SASS（SASS、LESS沒(méi)有本質(zhì)區(qū)別，只因?yàn)閳F(tuán)隊(duì)前端都是用的SASS）

34.CSS 優(yōu)化、提高性能的方法有哪些？

加載性能：

（1）css壓縮：將寫(xiě)好的css進(jìn)行打包壓縮，可以減少很多的體積。
（2）css單一樣式：當(dāng)需要下邊距和左邊距的時(shí)候，很多時(shí)候選擇:margin:top0bottom0;但margin-bottom:bot
tom;margin-left:left;執(zhí)行的效率更高。
（3）減少使用@import,而建議使用link，因?yàn)楹笳咴陧?yè)面加載時(shí)一起加載，前者是等待頁(yè)面加載完成之后再進(jìn)行加載。

選擇器性能：

（1）關(guān)鍵選擇器（keyselector）。選擇器的最后面的部分為關(guān)鍵選擇器（即用來(lái)匹配目標(biāo)元素的部分）。CSS選擇符是從右到
左進(jìn)行匹配的。當(dāng)使用后代選擇器的時(shí)候，瀏覽器會(huì)遍歷所有子元素來(lái)確定是否是指定的元素等等；

（2）如果規(guī)則擁有ID選擇器作為其關(guān)鍵選擇器，則不要為規(guī)則增加標(biāo)簽。過(guò)濾掉無(wú)關(guān)的規(guī)則（這樣樣式系統(tǒng)就不會(huì)浪費(fèi)時(shí)間去匹
配它們了）。

（3）避免使用通配規(guī)則，如*{}計(jì)算次數(shù)驚人！只對(duì)需要用到的元素進(jìn)行選擇。

（4）盡量少的去對(duì)標(biāo)簽進(jìn)行選擇，而是用class。

（5）盡量少的去使用后代選擇器，降低選擇器的權(quán)重值。后代選擇器的開(kāi)銷(xiāo)是最高的，盡量將選擇器的深度降到最低，最高不要超過(guò)
三層，更多的使用類(lèi)來(lái)關(guān)聯(lián)每一個(gè)標(biāo)簽元素。

（6）了解哪些屬性是可以通過(guò)繼承而來(lái)的，然后避免對(duì)這些屬性重復(fù)指定規(guī)則。

渲染性能：

（1）慎重使用高性能屬性：浮動(dòng)、定位。

（2）盡量減少頁(yè)面重排、重繪。

（3）去除空規(guī)則：｛｝。空規(guī)則的產(chǎn)生原因一般來(lái)說(shuō)是為了預(yù)留樣式。去除這些空規(guī)則無(wú)疑能減少css文檔體積。

（4）屬性值為0時(shí)，不加單位。

（5）屬性值為浮動(dòng)小數(shù)0.**，可以省略小數(shù)點(diǎn)之前的0。

（6）標(biāo)準(zhǔn)化各種瀏覽器前綴：帶瀏覽器前綴的在前。標(biāo)準(zhǔn)屬性在后。

（7）不使用@import前綴，它會(huì)影響css的加載速度。

（8）選擇器優(yōu)化嵌套，盡量避免層級(jí)過(guò)深。

（9）css雪碧圖，同一頁(yè)面相近部分的小圖標(biāo)，方便使用，減少頁(yè)面的請(qǐng)求次數(shù)，但是同時(shí)圖片本身會(huì)變大，使用時(shí)，優(yōu)劣考慮清
楚，再使用。

（10）正確使用display的屬性，由于display的作用，某些樣式組合會(huì)無(wú)效，徒增樣式體積的同時(shí)也影響解析性能。

（11）不濫用web字體。對(duì)于中文網(wǎng)站來(lái)說(shuō)WebFonts可能很陌生，國(guó)外卻很流行。webfonts通常體積龐大，而且一些瀏
覽器在下載webfonts時(shí)會(huì)阻塞頁(yè)面渲染損傷性能。

可維護(hù)性、健壯性：

（1）將具有相同屬性的樣式抽離出來(lái)，整合并通過(guò)class在頁(yè)面中進(jìn)行使用，提高css的可維護(hù)性。
（2）樣式與內(nèi)容分離：將css代碼定義到外部css中。

詳細(xì)資料可以參考：《CSS 優(yōu)化、提高性能的方法有哪些？》《CSS 優(yōu)化，提高性能的方法》

35.瀏覽器是怎樣解析 CSS 選擇器的？

樣式系統(tǒng)從關(guān)鍵選擇器開(kāi)始匹配，然后左移查找規(guī)則選擇器的祖先元素。只要選擇器的子樹(shù)一直在工作，樣式系統(tǒng)就會(huì)持續(xù)左移，直
到和規(guī)則匹配，或者是因?yàn)椴黄ヅ涠艞壴撘?guī)則。

試想一下，如果采用從左至右的方式讀取CSS規(guī)則，那么大多數(shù)規(guī)則讀到最后（最右）才會(huì)發(fā)現(xiàn)是不匹配的，這樣做會(huì)費(fèi)時(shí)耗能，
最后有很多都是無(wú)用的；而如果采取從右向左的方式，那么只要發(fā)現(xiàn)最右邊選擇器不匹配，就可以直接舍棄了，避免了許多無(wú)效匹配。

詳細(xì)資料可以參考：《探究 CSS 解析原理》

36.在網(wǎng)頁(yè)中應(yīng)該使用奇數(shù)還是偶數(shù)的字體？為什么呢？

（1）偶數(shù)字號(hào)相對(duì)更容易和web設(shè)計(jì)的其他部分構(gòu)成比例關(guān)系。比如：當(dāng)我用了14px的正文字號(hào)，我可能會(huì)在一些地方用14
×0.5=7px的margin，在另一些地方用14×1.5=21px的標(biāo)題字號(hào)。
（2）瀏覽器緣故，低版本的瀏覽器ie6會(huì)把奇數(shù)字體強(qiáng)制轉(zhuǎn)化為偶數(shù)，即13px渲染為14px。
（3）系統(tǒng)差別，早期的Windows里，中易宋體點(diǎn)陣只有12和14、15、16px，唯獨(dú)缺少13px。

詳細(xì)資料可以參考：《談?wù)劸W(wǎng)頁(yè)中使用奇數(shù)字體和偶數(shù)字體》《現(xiàn)在網(wǎng)頁(yè)設(shè)計(jì)中的為什么少有人用 11px、13px、15px 等奇數(shù)的字體？》

37.margin 和 padding 分別適合什么場(chǎng)景使用？

margin是用來(lái)隔開(kāi)元素與元素的間距；padding是用來(lái)隔開(kāi)元素與內(nèi)容的間隔。
margin用于布局分開(kāi)元素使元素與元素互不相干。
padding用于元素與內(nèi)容之間的間隔，讓內(nèi)容（文字）與（包裹）元素之間有一段距離。

何時(shí)應(yīng)當(dāng)使用margin：
?需要在border外側(cè)添加空白時(shí)。
?空白處不需要背景（色）時(shí)。
?上下相連的兩個(gè)盒子之間的空白，需要相互抵消時(shí)。如15px+20px的margin，將得到20px的空白。

何時(shí)應(yīng)當(dāng)時(shí)用padding：
?需要在border內(nèi)測(cè)添加空白時(shí)。
?空白處需要背景（色）時(shí)。
?上下相連的兩個(gè)盒子之間的空白，希望等于兩者之和時(shí)。如15px+20px的padding，將得到35px的空白。

38.抽離樣式模塊怎么寫(xiě)，說(shuō)出思路，有無(wú)實(shí)踐經(jīng)驗(yàn)？[阿里航旅的面試題]

我的理解是把常用的css樣式單獨(dú)做成css文件……通用的和業(yè)務(wù)相關(guān)的分離出來(lái)，通用的做成樣式模塊兒共享，業(yè)務(wù)相關(guān)的，放
進(jìn)業(yè)務(wù)相關(guān)的庫(kù)里面做成對(duì)應(yīng)功能的模塊兒。

詳細(xì)資料可以參考：《CSS 規(guī)范-分類(lèi)方法》

39.簡(jiǎn)單說(shuō)一下 css3 的 all 屬性。

all屬性實(shí)際上是所有CSS屬性的縮寫(xiě)，表示，所有的CSS屬性都怎樣怎樣，但是，不包括unicode-bidi和direction
這兩個(gè)CSS屬性。支持三個(gè)CSS通用屬性值，initial,inherit,unset。

initial是初始值的意思，也就是該元素元素都除了unicode-bidi和direction以外的CSS屬性都使用屬性的默認(rèn)初始
值。

inherit是繼承的意思，也就是該元素除了unicode-bidi和direction以外的CSS屬性都繼承父元素的屬性值。

unset是取消設(shè)置的意思，也就是當(dāng)前元素瀏覽器或用戶設(shè)置的CSS忽略，然后如果是具有繼承特性的CSS，如color，則
使用繼承值；如果是沒(méi)有繼承特性的CSS屬性，如background-color，則使用初始值。

詳細(xì)資料可以參考：《簡(jiǎn)單了解 CSS3 的 all 屬性》

40.為什么不建議使用統(tǒng)配符初始化 css 樣式。

采用*{pading:0;margin:0;}這樣的寫(xiě)法好處是寫(xiě)起來(lái)很簡(jiǎn)單，但是是通配符，需要把所有的標(biāo)簽都遍歷一遍，當(dāng)網(wǎng)站較大時(shí)，
樣式比較多，這樣寫(xiě)就大大的加強(qiáng)了網(wǎng)站運(yùn)行的負(fù)載，會(huì)使網(wǎng)站加載的時(shí)候需要很長(zhǎng)一段時(shí)間，因此一般大型的網(wǎng)站都有分層次的一
套初始化樣式。

出于性能的考慮，并不是所有標(biāo)簽都會(huì)有padding和margin，因此對(duì)常見(jiàn)的具有默認(rèn)padding和margin的元素初始化即
可，并不需使用通配符*來(lái)初始化。

41.absolute 的 containingblock（包含塊）計(jì)算方式跟正常流有什么不同？

（1）內(nèi)聯(lián)元素也可以作為“包含塊”所在的元素；

（2）“包含塊”所在的元素不是父塊級(jí)元素，而是最近的position不為static的祖先元素或根元素；

（3）邊界是paddingbox而不是contentbox。

42.對(duì)于 hasLayout 的理解？

hasLayout是IE特有的一個(gè)屬性。很多的IE下的cssbug都與其息息相關(guān)。在IE中，一個(gè)元素要么自己對(duì)自身的內(nèi)容進(jìn)
行計(jì)算大小和組織，要么依賴(lài)于父元素來(lái)計(jì)算尺寸和組織內(nèi)容。當(dāng)一個(gè)元素的hasLayout屬性值為true時(shí)，它負(fù)責(zé)對(duì)自己和可
能的子孫元素進(jìn)行尺寸計(jì)算和定位。雖然這意味著這個(gè)元素需要花更多的代價(jià)來(lái)維護(hù)自身和里面的內(nèi)容，而不是依賴(lài)于祖先元素來(lái)完
成這些工作。

詳細(xì)資料可以參考：《CSS 基礎(chǔ)篇--CSS 中 IE 瀏覽器的 hasLayout，IE 低版本的 bug 根源》《CSS 魔法堂：hasLayout 原來(lái)是這樣的！》

43.元素豎向的百分比設(shè)定是相對(duì)于容器的高度嗎？

如果是height的話，是相對(duì)于包含塊的高度。

如果是padding或者margin豎直方向的屬性則是相對(duì)于包含塊的寬度。

44.全屏滾動(dòng)的原理是什么？用到了 CSS 的哪些屬性？（待深入實(shí)踐）

原理：有點(diǎn)類(lèi)似于輪播，整體的元素一直排列下去，假設(shè)有5個(gè)需要展示的全屏頁(yè)面，那么高度是500%，只是展示100%，容器及容
器內(nèi)的頁(yè)面取當(dāng)前可視區(qū)高度，同時(shí)容器的父級(jí)元素overflow屬性值設(shè)為hidden，通過(guò)更改容器可視區(qū)的位置來(lái)實(shí)現(xiàn)全
屏滾動(dòng)效果。主要是響應(yīng)鼠標(biāo)事件，頁(yè)面通過(guò)CSS的動(dòng)畫(huà)效果，進(jìn)行移動(dòng)。

overflow：hidden；transition：all1000msease；

詳細(xì)資料可以參考：《js 實(shí)現(xiàn)網(wǎng)頁(yè)全屏切換（平滑過(guò)渡），鼠標(biāo)滾動(dòng)切換》《用 ES6 寫(xiě)全屏滾動(dòng)插件》

45.什么是響應(yīng)式設(shè)計(jì)？響應(yīng)式設(shè)計(jì)的基本原理是什么？如何兼容低版本的 IE？（待深入了解）

響應(yīng)式網(wǎng)站設(shè)計(jì)是一個(gè)網(wǎng)站能夠兼容多個(gè)終端，而不是為每一個(gè)終端做一個(gè)特定的版本。基本原理是通過(guò)媒體查詢(xún)檢測(cè)不同的設(shè)備屏
幕尺寸做處理。頁(yè)面頭部必須有meta聲明的viewport。

詳細(xì)資料可以參考：《響應(yīng)式布局原理》《響應(yīng)式布局的實(shí)現(xiàn)方法和原理》

46.視差滾動(dòng)效果，如何給每頁(yè)做不同的動(dòng)畫(huà)？（回到頂部，向下滑動(dòng)要再次出現(xiàn)，和只出現(xiàn)一次分別怎么做？）

視差滾動(dòng)是指多層背景以不同的速度移動(dòng)，形成立體的運(yùn)動(dòng)效果，帶來(lái)非常出色的視覺(jué)體驗(yàn)。

詳細(xì)資料可以參考：《如何實(shí)現(xiàn)視差滾動(dòng)效果的網(wǎng)頁(yè)？》

47.如何修改 chrome 記住密碼后自動(dòng)填充表單的黃色背景？

chrome表單自動(dòng)填充后，input文本框的背景會(huì)變成黃色的，通過(guò)審查元素可以看到這是由于chrome會(huì)默認(rèn)給自動(dòng)填充的in
put表單加上input:-webkit-autofill私有屬性，然后對(duì)其賦予以下樣式：

{
background-color:rgb(250,255,189)!important;
background-image:none!important;
color:rgb(0,0,0)!important;
}

對(duì)chrome默認(rèn)定義的background-color，background-image，color使用important是不能提高其優(yōu)先級(jí)的，但是
其他屬性可使用。

使用足夠大的純色內(nèi)陰影來(lái)覆蓋input輸入框的黃色背景，處理如下

input:-webkit-autofill,textarea:-webkit-autofill,select:-webkit-autofill{
-webkit-box-shadow:000px1000pxwhiteinset;
border:1pxsolid#CCC!important;
}

詳細(xì)資料可以參考：《去掉 chrome 記住密碼后的默認(rèn)填充樣式》《修改谷歌瀏覽器 chrome 記住密碼后自動(dòng)填充表單的黃色背景》

48.怎么讓 Chrome 支持小于 12px 的文字？

在谷歌下css設(shè)置字體大小為12px及以下時(shí)，顯示都是一樣大小，都是默認(rèn)12px。

解決辦法：

（1）可以使用Webkit的內(nèi)核的-webkit-text-size-adjust的私有CSS屬性來(lái)解決，只要加了-webkit-text-size
-adjust:none;字體大小就不受限制了。但是chrome更新到27版本之后就不可以用了。所以高版本chrome谷歌瀏覽器
已經(jīng)不再支持-webkit-text-size-adjust樣式，所以要使用時(shí)候慎用。

（2）還可以使用css3的transform縮放屬性-webkit-transform:scale(0.5);注意-webkit-transform:scale(0.
75);收縮的是整個(gè)元素的大小，這時(shí)候，如果是內(nèi)聯(lián)元素，必須要將內(nèi)聯(lián)元素轉(zhuǎn)換成塊元素，可以使用display：block/
inline-block/...；

（3）使用圖片：如果是內(nèi)容固定不變情況下，使用將小于12px文字內(nèi)容切出做圖片，這樣不影響兼容也不影響美觀。

詳細(xì)資料可以參考：《谷歌瀏覽器不支持 CSS 設(shè)置小于 12px 的文字怎么辦？》

49.讓頁(yè)面里的字體變清晰，變細(xì)用 CSS 怎么做？

webkit內(nèi)核的私有屬性：-webkit-font-smoothing，用于字體抗鋸齒，使用后字體看起來(lái)會(huì)更清晰舒服。

在MacOS測(cè)試環(huán)境下面設(shè)置-webkit-font-smoothing:antialiased;但是這個(gè)屬性?xún)H僅是面向MacOS，其他操作系統(tǒng)設(shè)
置后無(wú)效。

詳細(xì)資料可以參考：《讓字體變的更清晰 CSS 中-webkit-font-smoothing》

50.font-style 屬性中 italic 和 oblique 的區(qū)別？

italic和oblique這兩個(gè)關(guān)鍵字都表示“斜體”的意思。

它們的區(qū)別在于，italic是使用當(dāng)前字體的斜體字體，而oblique只是單純地讓文字傾斜。如果當(dāng)前字體沒(méi)有對(duì)應(yīng)的斜體字體，
則退而求其次，解析為oblique，也就是單純形狀傾斜。

51.設(shè)備像素、css 像素、設(shè)備獨(dú)立像素、dpr、ppi 之間的區(qū)別？

設(shè)備像素指的是物理像素，一般手機(jī)的分辨率指的就是設(shè)備像素，一個(gè)設(shè)備的設(shè)備像素是不可變的。

css像素和設(shè)備獨(dú)立像素是等價(jià)的，不管在何種分辨率的設(shè)備上，css像素的大小應(yīng)該是一致的，css像素是一個(gè)相對(duì)單位，它是相
對(duì)于設(shè)備像素的，一個(gè)css像素的大小取決于頁(yè)面縮放程度和dpr的大小。

dpr指的是設(shè)備像素和設(shè)備獨(dú)立像素的比值，一般的pc屏幕，dpr=1。在iphone4時(shí)，蘋(píng)果推出了retina屏幕，它的dpr
為2。屏幕的縮放會(huì)改變dpr的值。

ppi指的是每英寸的物理像素的密度，ppi越大，屏幕的分辨率越大。

詳細(xì)資料可以參考：《什么是物理像素、虛擬像素、邏輯像素、設(shè)備像素，什么又是 PPI,DPI,DPR 和 DIP》《前端工程師需要明白的「像素」》《CSS 像素、物理像素、邏輯像素、設(shè)備像素比、PPI、Viewport》《前端開(kāi)發(fā)中像素的概念》

52.layoutviewport、visualviewport 和 idealviewport 的區(qū)別？

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

如果把移動(dòng)設(shè)備上瀏覽器的可視區(qū)域設(shè)為viewport的話，某些網(wǎng)站就會(huì)因?yàn)関iewport太窄而顯示錯(cuò)亂，所以這些瀏覽器就決定
默認(rèn)情況下把viewport設(shè)為一個(gè)較寬的值，比如980px，這樣的話即使是那些為桌面設(shè)計(jì)的網(wǎng)站也能在移動(dòng)瀏覽器上正常顯示了。
ppk把這個(gè)瀏覽器默認(rèn)的viewport叫做layoutviewport。

layoutviewport的寬度是大于瀏覽器可視區(qū)域的寬度的，所以我們還需要一個(gè)viewport來(lái)代表瀏覽器可視區(qū)域的大小，ppk把
這個(gè)viewport叫做visualviewport。

idealviewport是最適合移動(dòng)設(shè)備的viewport，idealviewport的寬度等于移動(dòng)設(shè)備的屏幕寬度，只要在css中把某一元
素的寬度設(shè)為idealviewport的寬度（單位用px），那么這個(gè)元素的寬度就是設(shè)備屏幕的寬度了，也就是寬度為100%的效果。i
dealviewport的意義在于，無(wú)論在何種分辨率的屏幕下，那些針對(duì)idealviewport而設(shè)計(jì)的網(wǎng)站，不需要用戶手動(dòng)縮放，也
不需要出現(xiàn)橫向滾動(dòng)條，都可以完美的呈現(xiàn)給用戶。

回答：

移動(dòng)端一共需要理解三個(gè)viewport的概念的理解。

第一個(gè)視口是布局視口，在移動(dòng)端顯示網(wǎng)頁(yè)時(shí)，由于移動(dòng)端的屏幕尺寸比較小，如果網(wǎng)頁(yè)使用移動(dòng)端的屏幕尺寸進(jìn)行布局的話，那么整
個(gè)頁(yè)面的布局都會(huì)顯示錯(cuò)亂。所以移動(dòng)端瀏覽器提供了一個(gè)layoutviewport布局視口的概念，使用這個(gè)視口來(lái)對(duì)頁(yè)面進(jìn)行布局展
示，一般layoutviewport的大小為980px，因此頁(yè)面布局不會(huì)有太大的變化，我們可以通過(guò)拖動(dòng)和縮放來(lái)查看到這個(gè)頁(yè)面。

第二個(gè)視口指的是視覺(jué)視口，visualviewport指的是移動(dòng)設(shè)備上我們可見(jiàn)的區(qū)域的視口大小，一般為屏幕的分辨率的大小。visu
alviewport和layoutviewport的關(guān)系，就像是我們通過(guò)窗戶看外面的風(fēng)景，視覺(jué)視口就是窗戶，而外面的風(fēng)景就是布局視口
中的網(wǎng)頁(yè)內(nèi)容。

第三個(gè)視口是理想視口，由于layoutviewport一般比visualviewport要大，所以想要看到整個(gè)頁(yè)面必須通過(guò)拖動(dòng)和縮放才
能實(shí)現(xiàn)。所以又提出了idealviewport的概念，idealviewport下用戶不用縮放和滾動(dòng)條就能夠查看到整個(gè)頁(yè)面，并且頁(yè)面在
不同分辨率下顯示的內(nèi)容大小相同。idealviewport其實(shí)就是通過(guò)修改layoutviewport的大小，讓它等于設(shè)備的寬度，這個(gè)
寬度可以理解為是設(shè)備獨(dú)立像素，因此根據(jù)idealviewport設(shè)計(jì)的頁(yè)面，在不同分辨率的屏幕下，顯示應(yīng)該相同。

詳細(xì)資料可以參考：《移動(dòng)前端開(kāi)發(fā)之 viewport 的深入理解》《說(shuō)說(shuō)移動(dòng)前端中 viewport（視口）》《移動(dòng)端適配知識(shí)你到底知多少》

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è)填滿剩下的高度。

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

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、線框類(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圖片由直線和曲線以及繪制它們的方法組成。當(dāng)你放大一個(gè)SVG圖
片的時(shí)候，你看到的還是線和曲線，而不會(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)站上充滿了大量的圖片，
如果能夠降低每一個(gè)圖片的文件大小，那么將大大減少瀏覽器和服務(wù)器之間的數(shù)據(jù)傳輸量，進(jìn)而降低訪問(wèn)延遲，提升訪問(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ì)提高用戶的體驗(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.畫(huà)一條 0.5px 的線

采用metaviewport的方式

采用border-image的方式

采用transform:scale()的方式

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

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

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

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

推薦閱讀

5個(gè)JavaScript技巧讓你成為更好的開(kāi)發(fā)者

Vue知識(shí)點(diǎn)，面試必備（基礎(chǔ)到進(jìn)階，覆蓋vue3.0，持續(xù)更新整理）

前端開(kāi)發(fā)，一份關(guān)于vue-cli3項(xiàng)目常用項(xiàng)配置

React實(shí)戰(zhàn)之React+Redux實(shí)現(xiàn)一個(gè)天氣預(yù)報(bào)小項(xiàng)目

前端開(kāi)發(fā)，用英雄聯(lián)盟的方式講解JavaScript設(shè)計(jì)模式（二）

出處：segmentfault
鏈接：104道 CSS 面試題，助你查漏補(bǔ)缺