HTML&CSS：
	對Web標(biāo)準(zhǔn)的理解（結(jié)構(gòu)、表現(xiàn)、行為）、瀏覽器內(nèi)核、渲染原理、依賴管理、兼容性、CSS語法、層次關(guān)系，常用屬性、布局、選擇器、權(quán)重、盒模型、Hack、CSS預(yù)處理器、
	CSS3、Flexbox、CSS Modules、Document flow、BFC、HTML5（離線 & 存儲(chǔ)、Histoy,多媒體、WebGL\SVG\Canvas）；		
JavaScript：
 數(shù)據(jù)類型、運(yùn)算、對象、Function、繼承、閉包、作用域、事件、Prototype、RegExp、JSON、Ajax、DOM、BOM、
 內(nèi)存泄漏、跨域、異步請求、模板引擎、模塊化、Flux、同構(gòu)、算法、ECMAScript6、Nodejs、HTTP、
其他：
 主流MVVM框架(React\Vue\Angular)、Hybrid App\React Native\Weex、TypeScript、RESTFul、WEB安全、前端工程化、依賴管理、性能優(yōu)化、
 重構(gòu)、團(tuán)隊(duì)協(xié)作、可維護(hù)、易用性、SEO、UED、前端技術(shù)選型、快速學(xué)習(xí)能力等；

 答案：A把藥放進(jìn)箱子，用自己的鎖把箱子鎖上。B拿到箱子后，再在箱子上加一把自己的鎖。
 箱子運(yùn)回A后，A取下自己的鎖。箱子再運(yùn)到B手中時(shí)，B取下自己的鎖，獲得藥物。

 答案是通過探測鼠標(biāo)移動(dòng)的方向和軌跡，具體查看Khan Academy工程師 Ben Kamens 寫的 jQuery插件

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

最近在整理 CSS 的時(shí)候發(fā)現(xiàn)遇到了很多面試中常見的面試題，本部分主要原作者在 Github 等各大論壇收錄的 CSS 相關(guān)知識(shí)和一些相關(guān)面試題時(shí)所做的筆記，分享這份總結(jié)給大家，對大家對 CSS 的可以來一次全方位的檢漏和排查，感謝原作者 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
盒子模型。若在頁面中聲明了DOCTYPE類型，所有的瀏覽器都會(huì)把盒模型解釋為W3C盒模型。

回答：

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

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

一般來說，我們可以通過修改元素的box-sizing屬性來改變元素的盒模型。

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

2.CSS 選擇符有哪些？

（1）id選擇器（#myid）
（2）類選擇器（.myclassname）
（3）標(biāo)簽選擇器（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 中雙冒號(hào)和單冒號(hào)有什么區(qū)別？解釋一下這 2 個(gè)偽元素的作用。

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

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

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

回答：

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

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

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

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

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

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

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

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

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

相關(guān)資料：

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

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

當(dāng)元素的一個(gè)非繼承屬性（在Mozillacode里有時(shí)稱之為resetproperty）沒有指定值時(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）元素可見性
visibility

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


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

回答：

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

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

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

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

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

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

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

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

（1）標(biāo)簽內(nèi)選擇符x,0,0,0
（2）ID選擇符0,x,0,0
（3）class選擇符/屬性選擇符/偽類選擇符    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ù)之間沒關(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)重），它沒有特殊性值，但它的優(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í)是類選擇器、偽類選擇器和屬性選擇器，為0010，
第四個(gè)等級(jí)是元素選擇器和偽元素選擇器，為0001。規(guī)則中每出現(xiàn)一個(gè)選擇器，就將它的特殊性進(jìn)行疊加，這個(gè)疊加只限于對應(yīng)的等
級(jí)的疊加，不會(huì)產(chǎn)生進(jìn)位。選擇器特殊性值的比較是從左向右排序的，也就是說以1開頭的特殊性值比所有以0開頭的特殊性值要大。
比如說特殊性值為1000的的規(guī)則優(yōu)先級(jí)就要比特殊性值為0999的規(guī)則高。如果兩個(gè)規(guī)則的特殊性值相等的時(shí)候，那么就會(huì)根據(jù)它們引
入的順序，后出現(xiàn)的規(guī)則的優(yōu)先級(jí)最高。

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

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

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

當(dāng)鏈接未訪問過時(shí)：

（1）當(dāng)鼠標(biāo)滑過a鏈接時(shí)，滿足:link和:hover兩種狀態(tài)，要改變a標(biāo)簽的顏色，就必須將:hover偽類在:link偽
類后面聲明；
（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)鏈接訪問過時(shí)，情況基本同上，只不過需要將:link換成:visited。

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

8.CSS3 新增偽類有那些？

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

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

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

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

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

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

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

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

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

（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é)(偽類)》《淺談 CSS 偽類和偽元素及 CSS3 新增偽類》

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;
}

-讓絕對定位的 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;/*絕對定位*/
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布局實(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;
}

回答：

一般常見的幾種居中的方法有：

對于寬高固定的元素

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

回答：

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

absolute定位的元素，是相對于它的第一個(gè)position值不為static的祖先元素的paddingbox來進(jìn)行定位的。這句話
我們可以這樣來理解，我們首先需要找到絕對定位元素的一個(gè)position的值不為static的祖先元素，然后相對于這個(gè)祖先元
素的paddingbox來定位，也就是說在計(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)畫，多背景
例如：transform:\scale(0.85,0.90)\translate(0px,-30px)\skew(-9deg,0deg)\Animation:

13.請解釋一下 CSS3 的 Flexbox（彈性盒布局模型），以及適用場景？

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

Flex是FlexibleBox的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。

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

采用Flex布局的元素，稱為Flex容器（flexcontainer），簡稱"容器"。它的所有子元素自動(dòng)成為容器成員，稱為Flex
項(xiàng)目（flexitem），簡稱"項(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屬性的簡寫形式，默認(rèn)值為rownowrap。

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

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

align-content屬性定義了多根軸線的對齊方式。如果項(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)目的本來大小。

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

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

回答：

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

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

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

詳細(xì)資料可以參考：《Flex 布局教程：語法篇》《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ì)?

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

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

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

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

（3）利用flex布局中項(xiàng)目align-items屬性默認(rèn)為stretch，如果項(xiàng)目未設(shè)置高度或設(shè)為auto，將占滿整個(gè)容器的高度
的特性，來實(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;}來統(tǒng)一。

（3）IE6雙邊距bug：在IE6下，如果對元素設(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游覽器從所有情況中分離出來。
接著，再次使用"+"將IE8和IE7、IE6分離開來，這樣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ī)屬性的方法來獲取自定義屬性，也可以使用getAttribute()獲取自定義
屬性；Firefox下，只能使用getAttribute()獲取自定義屬性
解決方法：統(tǒng)一通過getAttribute()獲取自定義屬性。

（6）IE下，event對象有x、y屬性，但是沒有pageX、pageY屬性;Firefox下，event對象有
pageX、pageY屬性，但是沒有x、y屬性。
解決方法：（條件注釋）缺點(diǎn)是在IE瀏覽器下可能會(huì)增加額外的HTTP請求數(shù)。

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

1.可通過加入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）超鏈接訪問過后hover樣式就不出現(xiàn)了，被點(diǎn)擊訪問過的超鏈接樣式不再具有hover和active了
解決方法：改變CSS屬性的排列順序L-V-H-A

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

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

瀏覽器會(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>寫在同一行。不足：代碼不美觀。

（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 之間有看不見的空白間隔是什么原因引起的？》

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

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

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

最簡單的初始化方法：*{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.什么是包含塊，對于包含塊的理解?

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

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

（2）對于其他元素，如果該元素的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ī)范并沒有明確定義，瀏覽器自行發(fā)揮
否則，“包含塊”由該祖先的paddingbox邊界形成。

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

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

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

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

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

在谷歌瀏覽器里，使用collapse值和使用hidden值沒有什么區(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.絕對定位元素與非絕對定位元素的百分比計(jì)算的區(qū)別

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

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

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

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

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

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

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

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

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

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

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

詳細(xì)資料可以參考：《玩轉(zhuǎn)圖片 base64 編碼》《前端開發(fā)中，使用 base64 圖片的弊端是什么？》《小 tip:base64:URL 背景圖片與 web 頁面性能優(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相對
于浮動(dòng)后的最終位置定位。

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

總的來說，可以把它看作是一個(gè)類似優(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)元素，并且非絕對定位的元素，'display'特性值同設(shè)置值。

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

26.margin 重疊問題的理解。

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

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

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

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

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


margin合并的3種場景：

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

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

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

解決辦法：

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

對于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鍵空格是沒用的）；
?設(shè)置height或者min-height。

回答：

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

一般來說可以分為四種情形：

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

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

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

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

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

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

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

通俗來講

?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）絕對定位元素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ū)域互不影響。

一般來說根元素是一個(gè)BFC區(qū)域，浮動(dòng)和絕對定位的元素也會(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.請解釋一下為什么需要清除浮動(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ì)塌陷，而高度的塌陷使我們頁面后面的布局不能正常顯示。

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

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

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

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

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

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

clear:none|left|right|both

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

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

還需要注意的一點(diǎn)是clear屬性指的是元素盒子的邊不能和前面的浮動(dòng)元素相鄰，注意這里“前面的”3個(gè)字，也就是clear屬
性對“后面的”浮動(dòng)元素是不聞不問的。考慮到float屬性要么是left，要么是right，不可能同時(shí)存在，同時(shí)由于clear
屬性對“后面的”浮動(dòng)元素不聞不問，因此，當(dāng)clear:left有效的時(shí)候，clear:right必定無效，也就是此時(shí)clear:left
等同于設(shè)置clear:both；同樣地，clear:right如果有效也是等同于設(shè)置clear:both。由此可見，clear:left和cle
ar:right這兩個(gè)聲明就沒有任何使用的價(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瀏覽器的專有屬性，它可以設(shè)置或檢索對象的縮放比例。解決ie下比較奇葩的bug。譬如外邊距（margin）
的重疊，浮動(dòng)清除，觸發(fā)ie的haslayout屬性等。

來龍去脈大概如下：
當(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ò)大的問題。

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

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

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

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

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

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

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

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

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

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

加載性能：

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

選擇器性能：

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

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

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

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

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

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

渲染性能：

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

（2）盡量減少頁面重排、重繪。

（3）去除空規(guī)則：｛｝。空規(guī)則的產(chǎn)生原因一般來說是為了預(yù)留樣式。去除這些空規(guī)則無疑能減少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í)過深。

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

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

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

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

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

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

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

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

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

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

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

（1）偶數(shù)字號(hào)相對更容易和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)頁中使用奇數(shù)字體和偶數(shù)字體》《現(xiàn)在網(wǎng)頁設(shè)計(jì)中的為什么少有人用 11px、13px、15px 等奇數(shù)的字體？》

37.margin 和 padding 分別適合什么場景使用？

margin是用來隔開元素與元素的間距；padding是用來隔開元素與內(nèi)容的間隔。
margin用于布局分開元素使元素與元素互不相干。
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)測添加空白時(shí)。
?空白處需要背景（色）時(shí)。
?上下相連的兩個(gè)盒子之間的空白，希望等于兩者之和時(shí)。如15px+20px的padding，將得到35px的空白。

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

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

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

39.簡單說一下 css3 的 all 屬性。

all屬性實(shí)際上是所有CSS屬性的縮寫，表示，所有的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，則
使用繼承值；如果是沒有繼承特性的CSS屬性，如background-color，則使用初始值。

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

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

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

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

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

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

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

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

42.對于 hasLayout 的理解？

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

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

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

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

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

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

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

overflow：hidden；transition：all1000msease；

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

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

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

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

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

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

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

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

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

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

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

使用足夠大的純色內(nè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屬性來解決，只要加了-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.讓頁面里的字體變清晰，變細(xì)用 CSS 怎么做？

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

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

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

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

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

它們的區(qū)別在于，italic是使用當(dāng)前字體的斜體字體，而oblique只是單純地讓文字傾斜。如果當(dāng)前字體沒有對應(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è)相對單位，它是相
對于設(shè)備像素的，一個(gè)css像素的大小取決于頁面縮放程度和dpr的大小。

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

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

詳細(xì)資料可以參考：《什么是物理像素、虛擬像素、邏輯像素、設(shè)備像素，什么又是 PPI,DPI,DPR 和 DIP》《前端工程師需要明白的「像素」》《CSS 像素、物理像素、邏輯像素、設(shè)備像素比、PPI、Viewport》《前端開發(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來代表瀏覽器可視區(qū)域的大小，ppk把
這個(gè)viewport叫做visualviewport。

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

回答：

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

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

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

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

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

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

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

如果想實(shí)現(xiàn)fixed相對于屏幕的固定效果，我們需要改變的是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)寫動(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 種方法》

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

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

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

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í)候用。有沒有了解過 webp？

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

（1）BMP，是無損的、既支持索引色也支持直接色的、點(diǎn)陣圖。這種圖片格式幾乎沒有對數(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格式適用于對色彩要求不高同時(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并不支持。現(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用于一些對顏色要求不高且需要文件體積小的場景。

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

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

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

（6）第六種格式是svg格式，它是矢量圖，它記錄的圖片的繪制方式，因此對矢量圖進(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片體積的減少，意味著請求時(shí)間的減小，
這樣會(huì)提高用戶的體驗(yàn)。這是谷歌開發(fā)的一種新的圖片格式，目前在兼容性上還不是太好。

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

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

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

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

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

60.什么是 Cookie 隔離？（或者說：請求資源的時(shí)候不要讓它帶 cookie 怎么做）

網(wǎng)站向服務(wù)器請求的時(shí)候，會(huì)自動(dòng)帶上cookie這樣增加表頭信息量，使請求變慢。

如果靜態(tài)文件都放在主域名下，那靜態(tài)文件請求的時(shí)候都帶有的cookie的數(shù)據(jù)提交給server的，非常浪費(fèi)流量，所以不如隔離開
，靜態(tài)資源放CDN。

因?yàn)閏ookie有域的限制，因此不能跨域提交請求，故使用非主要域名的時(shí)候，請求頭中就不會(huì)帶有cookie數(shù)據(jù)，這樣可以降低請
求頭的大小，降低請求時(shí)間，從而達(dá)到降低整體請求延時(shí)的目的。

同時(shí)這種方式不會(huì)將cookie傳入WebServer，也減少了WebServer對cookie的處理分析環(huán)節(jié)，提高了webserver的
http請求的解析速度。

詳細(xì)資料可以參考：《CDN 是什么？使用 CDN 有什么優(yōu)勢？》

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

頁面加載自上而下當(dāng)然是先加載樣式。寫在body標(biāo)簽后由于瀏覽器以逐行方式對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或lesscsssprite，增強(qiáng)了css代碼的復(fù)用性，還有層級(jí)、mixin、
變量、循環(huán)、函數(shù)等，具有很方便的UI組件模塊化開發(fā)能力，極大的提高工作效率。

CSS后處理器是對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ù)處理器和后處理器》

63.闡述一下 CSSSprites

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

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

減少HTTP請求數(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 到底好在哪？》《VW:是時(shí)候放棄 REM 布局了》《為什么設(shè)計(jì)稿是 750px》《使用 Flexible 實(shí)現(xiàn)手淘 H5 頁面的終端適配》

65.畫一條 0.5px 的線

采用metaviewport的方式

采用border-image的方式

采用transform:scale()的方式

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

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

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

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

推薦閱讀

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

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

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

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

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

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

. 移動(dòng)端 1px

移動(dòng)端 1px 變粗的原因

<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>

<!-- 代碼解析 -->
<!--
  name="viewport" content="width=device-width" 本頁面的viewport寬度等于設(shè)備寬度。
  initial-scale=1.0, maximum-scale=1.0:初始縮放值和最大的縮放值都是1。
  user-scalable=no:禁止用戶進(jìn)行頁面縮放
-->

移動(dòng)端 window 對象有個(gè) devicePixelRatio 屬性，為設(shè)備像素比。

drp=window.devicePixelRatio，也就是設(shè)備的物理像素與邏輯像素的比值。

以 iphone6 為例 它的物理像素是 750，邏輯像素為 375 ，所以 iphone6 的 drp=2 。

所以 css 里面寫的 1px 寬度映射到物理像素上就有 2px。

解決方案

一、使用小數(shù)來寫 px 值

在 ios8+ 中當(dāng) drp=2 的時(shí)候使用 0.5px ，使用媒體查詢

.border {
  border: 1px solid #999;
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
  .border {
    border: 0.5px solid #999;
  }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
  .border {
    border: 0.333333px solid #999;
  }
}

二、:before, :after 與 transform

//所有邊框
.mx-1px {
  position: relative;
}
.mx-1px:before {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  border: 1px solid #ccc;
  border-radius: 0;
  top: 0;
  left: 0;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  box-sizing: border-box;
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
  .mx-1px:before {
    width: 200%;
    height: 200%;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
}
//上邊框
.mx-1px-top {
  position: relative;
}
.mx-1px-top:before {
  position: absolute;
  content: '';
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  width: 100%;
  height: 1px;
  border-top: 1px solid #ccc;
  top: 0;
  left: 0;
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
  .mx-1px-top:before {
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
  }
}
//下邊框
.mx-1px-bottom {
  position: relative;
}
.mx-1px-bottom:before {
  position: absolute;
  content: '';
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  width: 100%;
  height: 1px;
  bottom: -1px;
  border-bottom: 1px solid #ccc;
  left: 0;
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
  .mx-1px-bottom:before {
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
  }
}

2.單文本和多文本溢出處理

2.1 單文本溢出

p {
  margin: 0;
  padding: 0;
  width: 60px;
  height: 18px;
  font-size: 12px;
  overflow: hidden; /*超出盒子隱藏*/
  text-overflow: ellipsis; /*文本溢出包含元素時(shí)用省略號(hào)代替*/
  white-space: nowrap; /*文本不會(huì)換行，文本會(huì)在在同一行上繼續(xù)，直到遇到 <br> 標(biāo)簽為止。*/
}

2.2 多文本溢出

/*兼容器較差，webkit內(nèi)核的瀏覽器，或者移動(dòng)端可以使用。*/

p {
  margin: 0;
  padding: 0;
  width: 60px;
  font-size: 12px;
  display: -webkit-box; /*將對象作為彈性伸縮盒子模型顯示*/
  -webkit-box-orient: vertical; /*設(shè)置或檢索伸縮盒對象的子元素的排列方式 。設(shè)置子元素在-webkit-box里面按垂直排列*/
  -webkit-line-clamp: 2; /*限制在一個(gè)塊元素顯示的文本的行數(shù)。為了實(shí)現(xiàn)效果必須配合display: -webkit-box;-webkit-box-orient；overflow: hidden;*/
  overflow: hidden;
}
/* 根據(jù)高度 / 顯示的行數(shù)=行高*/

.box {
  /* 只顯示五行 */
  height: 100px;
  line-height: 20px;
  overflow: hidden;
}

想要學(xué)習(xí)更多前端技術(shù)，可以關(guān)注“廣州藍(lán)景”微信公眾號(hào) 進(jìn)行詳細(xì)的了解。想看什么內(nèi)容也可以在評論區(qū)留言喲