作者：CavsZhouyou

https://github.com/CavsZhouyou/Front-End-Interview-Notebook/blob/master/Css/Css.md

CSS 面試知識點總結

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

1.介紹一下標準的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？

相關知識點：

（1）有兩種盒子模型：IE盒模型（border-box）、W3C標準盒模型（content-box） （2）盒模型：分為內(nèi)容（content）、填充（padding）、邊界（margin）、邊框（border）四個部分IE盒模型和W3C標準盒模型的區(qū)別：（1）W3C標準盒模型：屬性width，height只包含內(nèi)容content，不包含border和padding （2）IE盒模型：屬性width，height包含content、border和padding，指的是content +padding+border。在ie8+瀏覽器中使用哪個盒模型可以由box-sizing（CSS新增的屬性）控制，默認值為content-box，即標準盒模型； 如果將box-sizing設為border-box則用的是IE盒模型。如果在ie6，7，8中DOCTYPE缺失會將盒子模型解釋為IE 盒子模型。若在頁面中聲明了DOCTYPE類型，所有的瀏覽器都會把盒模型解釋為W3C盒模型。

回答：

盒模型都是由四個部分組成的，分別是margin、border、padding和content。標準盒模型和IE盒模型的區(qū)別在于設置width和height時，所對應的范圍不同。標準盒模型的width和height屬性的 范圍只包含了content，而IE盒模型的width和height屬性的范圍包含了border、padding和content。一般來說，我們可以通過修改元素的box-sizing屬性來改變元素的盒模型。

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

2.CSS 選擇符有哪些？

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

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

相關知識點：

單冒號（:）用于CSS3偽類，雙冒號（::）用于CSS3偽元素。（偽元素由雙冒號和偽元素名稱組成） 雙冒號是在當前規(guī)范中引入的，用于區(qū)分偽類和偽元素。不過瀏覽器需要同時支持舊的已經(jīng)存在的偽元素寫法， 比如:first-line、:first-letter、:before、:after等， 而新的在CSS3中引入的偽元素則不允許再支持舊的單冒號的寫法。想讓插入的內(nèi)容出現(xiàn)在其它內(nèi)容前，使用::before，否者，使用::after； 在代碼順序上，::after生成的內(nèi)容也比::before生成的內(nèi)容靠后。 如果按堆棧視角，::after生成的內(nèi)容會在::before生成的內(nèi)容之上。

回答：

在css3中使用單冒號來表示偽類，用雙冒號來表示偽元素。但是為了兼容已有的偽元素的寫法，在一些瀏覽器中也可以使用單冒號 來表示偽元素。偽類一般匹配的是元素的一些特殊狀態(tài)，如hover、link等，而偽元素一般匹配的特殊的位置，比如after、before等。

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

css引入偽類和偽元素概念是為了格式化文檔樹以外的信息。也就是說，偽類和偽元素是用來修飾不在文檔樹中的部分，比如，一句 話中的第一個字母，或者是列表中的第一個元素。偽類用于當已有的元素處于某個狀態(tài)時，為其添加對應的樣式，這個狀態(tài)是根據(jù)用戶行為而動態(tài)變化的。比如說，當用戶懸停在指定的 元素時，我們可以通過:hover來描述這個元素的狀態(tài)。偽元素用于創(chuàng)建一些不在文檔樹中的元素，并為其添加樣式。它們允許我們?yōu)樵氐哪承┎糠衷O置樣式。比如說，我們可以通過::be fore來在一個元素前增加一些文本，并為這些文本添加樣式。雖然用戶可以看到這些文本，但是這些文本實際上不在文檔樹中。有時你會發(fā)現(xiàn)偽元素使用了兩個冒號（::）而不是一個冒號（:）。這是CSS3的一部分，并嘗試區(qū)分偽類和偽元素。大多數(shù)瀏覽 器都支持這兩個值。按照規(guī)則應該使用（::）而不是（:），從而區(qū)分偽類和偽元素。但是，由于在舊版本的W3C規(guī)范并未對此進行 特別區(qū)分，因此目前絕大多數(shù)的瀏覽器都支持使用這兩種方式表示偽元素。

詳細資料可以參考：
《總結偽類與偽元素》

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

相關資料：

每個CSS屬性定義的概述都指出了這個屬性是默認繼承的，還是默認不繼承的。這決定了當你沒有為元素的屬性指定值時該如何計算 值。當元素的一個繼承屬性沒有指定值時，則取父元素的同屬性的計算值。只有文檔根元素取該屬性的概述中給定的初始值（這里的意思應 該是在該屬性本身的定義中的默認值）。當元素的一個非繼承屬性（在Mozillacode里有時稱之為resetproperty）沒有指定值時，則取屬性的初始值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）光標屬性 cursor（6）元素可見性 visibility（7）還有一些不常用的；speak，page，設置嵌套引用的引號類型quotes等屬性注意：當一個屬性不是繼承屬性時，可以使用inherit關鍵字指定一個屬性應從父元素繼承它的值，inherit關鍵字用于顯式地 指定繼承性，可用于任何繼承性/非繼承性屬性。

回答：

每一個屬性在定義中都給出了這個屬性是否具有繼承性，一個具有繼承性的屬性會在沒有指定值的時候，會使用父元素的同屬性的值 來作為自己的值。一般具有繼承性的屬性有，字體相關的屬性，font-size和font-weight等。文本相關的屬性，color和text-align等。 表格的一些布局屬性、列表屬性如list-style等。還有光標屬性cursor、元素可見性visibility。當一個屬性不是繼承屬性的時候，我們也可以通過將它的值設置為inherit來使它從父元素那獲取同名的屬性值來繼承。

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

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

相關知識點：

CSS的優(yōu)先級是根據(jù)樣式聲明的特殊性值來判斷的。選擇器的特殊性值分為四個等級，如下：（1）標簽內(nèi)選擇符x,0,0,0 （2）ID選擇符0,x,0,0 （3）class選擇符/屬性選擇符/偽類選擇符 0,0,x,0 （4）元素和偽元素選擇符0,0,0,x計算方法：（1）每個等級的初始值為0 （2）每個等級的疊加為選擇器出現(xiàn)的次數(shù)相加 （3）不可進位，比如0,99,99,99 （4）依次表示為：0,0,0,0 （5）每個等級計數(shù)之間沒關聯(lián) （6）等級判斷從左向右，如果某一位數(shù)值相同，則判斷下一位數(shù)值 （7）如果兩個優(yōu)先級相同，則最后出現(xiàn)的優(yōu)先級高，!important也適用 （8）通配符選擇器的特殊性值為：0,0,0,0 （9）繼承樣式優(yōu)先級最低，通配符樣式優(yōu)先級高于繼承樣式 （10）!important（權重），它沒有特殊性值，但它的優(yōu)先級是最高的，為了方便記憶，可以認為它的特殊性值為1,0,0,0,0。計算實例：（1）#demoa{color:orange;}/*特殊性值：0,1,0,1*/ （2）div#demoa{color:red;}/*特殊性值：0,1,0,2*/注意： （1）樣式應用時，css會先查看規(guī)則的權重（!important），加了權重的優(yōu)先級最高，當權重相同的時候，會比較規(guī)則的特殊性。（2）特殊性值越大的聲明優(yōu)先級越高。（3）相同特殊性值的聲明，根據(jù)樣式引入的順序，后聲明的規(guī)則優(yōu)先級高（距離元素出現(xiàn)最近的）

回答：

判斷優(yōu)先級時，首先我們會判斷一條屬性聲明是否有權重，也就是是否在聲明后面加上了!important。一條聲明如果加上了權重， 那么它的優(yōu)先級就是最高的，前提是它之后不再出現(xiàn)相同權重的聲明。如果權重相同，我們則需要去比較匹配規(guī)則的特殊性。一條匹配規(guī)則一般由多個選擇器組成，一條規(guī)則的特殊性由組成它的選擇器的特殊性累加而成。選擇器的特殊性可以分為四個等級， 第一個等級是行內(nèi)樣式，為1000，第二個等級是id選擇器，為0100，第三個等級是類選擇器、偽類選擇器和屬性選擇器，為0010， 第四個等級是元素選擇器和偽元素選擇器，為0001。規(guī)則中每出現(xiàn)一個選擇器，就將它的特殊性進行疊加，這個疊加只限于對應的等 級的疊加，不會產(chǎn)生進位。選擇器特殊性值的比較是從左向右排序的，也就是說以1開頭的特殊性值比所有以0開頭的特殊性值要大。 比如說特殊性值為1000的的規(guī)則優(yōu)先級就要比特殊性值為0999的規(guī)則高。如果兩個規(guī)則的特殊性值相等的時候，那么就會根據(jù)它們引 入的順序，后出現(xiàn)的規(guī)則的優(yōu)先級最高。

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

7.關于偽類 LVHA 的解釋?

a標簽有四種狀態(tài)：鏈接訪問前、鏈接訪問后、鼠標滑過、激活，分別對應四種偽類:link、:visited、:hover、:active；當鏈接未訪問過時：（1）當鼠標滑過a鏈接時，滿足:link和:hover兩種狀態(tài)，要改變a標簽的顏色，就必須將:hover偽類在:link偽 類后面聲明； （2）當鼠標點擊激活a鏈接時，同時滿足:link、:hover、:active三種狀態(tài)，要顯示a標簽激活時的樣式（:active）， 必須將:active聲明放到:link和:hover之后。因此得出LVHA這個順序。當鏈接訪問過時，情況基本同上，只不過需要將:link換成:visited。這個順序能不能變？可以，但也只有:link和:visited可以交換位置，因為一個鏈接要么訪問過要么沒訪問過，不可能同時滿足， 也就不存在覆蓋的問題。

8.CSS3 新增偽類有那些？

（1）elem:nth-child(n)選中父元素下的第n個子元素，并且這個子元素的標簽名為elem，n可以接受具體的數(shù) 值，也可以接受函數(shù)。（2）elem:nth-last-child(n)作用同上，不過是從后開始查找。（3）elem:last-child選中最后一個子元素。（4）elem:only-child如果elem是父元素下唯一的子元素，則選中之。（5）elem:nth-of-type(n)選中父元素下第n個elem類型元素，n可以接受具體的數(shù)值，也可以接受函數(shù)。（6）elem:first-of-type選中父元素下第一個elem類型元素。（7）elem:last-of-type選中父元素下最后一個elem類型元素。（8）elem:only-of-type如果父元素下的子元素只有一個elem類型元素，則選中該元素。（9）elem:empty選中不包含子元素和內(nèi)容的elem類型元素。（10）elem:target選擇當前活動的elem元素。（11）:not(elem)選擇非elem元素的每個元素。（12）:enabled 控制表單控件的禁用狀態(tài)。（13）:disabled 控制表單控件的禁用狀態(tài)。(14):checked單選框或復選框被選中。

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

9.如何居中 div？

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

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

-水平居中，利用 text-align:center 實現(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的層設置層的外邊距div{*/ position:absolute;/*絕對定位*/ width:500px; height:300px; top:50%; left:50%; margin:-150px00-250px;/*外邊距為自身寬高的一半*/ background-color:pink;/*方便看效果*/ }

-水平垂直居中二

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

-水平垂直居中三

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

-水平垂直居中四

/*利用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來實現(xiàn)元素的水平居中。（2）利用絕對定位，設置四個方向的值都為0，并將margin設置為auto，由于寬高固定，因此對應方向實現(xiàn)平分，可以實現(xiàn)水 平和垂直方向上的居中。（3）利用絕對定位，先將元素的左上角通過top:50%和left:50%定位到頁面的中心，然后再通過margin負值來調(diào)整元素 的中心點到頁面的中心。（4）利用絕對定位，先將元素的左上角通過top:50%和left:50%定位到頁面的中心，然后再通過translate來調(diào)整元素 的中心點到頁面的中心。（5）使用flex布局，通過align-items:center和justify-content:center設置容器的垂直和水平方向上為居中對 齊，然后它的子元素也可以實現(xiàn)垂直和水平的居中。對于寬高不定的元素，上面的后面兩種方法，可以實現(xiàn)元素的垂直和水平的居中。

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

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

詳細資料可以參考：
《CSSdisplay 屬性》

11.position 的值 relative 和 absolute 定位原點是？

相關知識點：

absolute 生成絕對定位的元素，相對于值不為static的第一個父元素的paddingbox進行定位，也可以理解為離自己這一級元素最近的 一級position設置為absolute或者relative的父元素的paddingbox的左上角為原點的。fixed（老IE不支持） 生成絕對定位的元素，相對于瀏覽器窗口進行定位。relative 生成相對定位的元素，相對于其元素本身所在正常位置進行定位。static 默認值。沒有定位，元素出現(xiàn)在正常的流中（忽略top,bottom,left,right,z-index聲明）。inherit 規(guī)定從父元素繼承position屬性的值。

回答：

relative定位的元素，是相對于元素本身的正常位置來進行定位的。absolute定位的元素，是相對于它的第一個position值不為static的祖先元素的paddingbox來進行定位的。這句話 我們可以這樣來理解，我們首先需要找到絕對定位元素的一個position的值不為static的祖先元素，然后相對于這個祖先元 素的paddingbox來定位，也就是說在計算定位距離的時候，padding的值也要算進去。

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

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

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

相關知識點：

Flex是FlexibleBox的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。任何一個容器都可以指定為Flex布局。行內(nèi)元素也可以使用Flex布局。注意，設為Flex布局以后，子元素的float、cl ear和vertical-align屬性將失效。采用Flex布局的元素，稱為Flex容器（flexcontainer），簡稱"容器"。它的所有子元素自動成為容器成員，稱為Flex 項目（flexitem），簡稱"項目"。容器默認存在兩根軸：水平的主軸（mainaxis）和垂直的交叉軸（crossaxis），項目默認沿主軸排列。以下6個屬性設置在容器上。flex-direction屬性決定主軸的方向（即項目的排列方向）。flex-wrap屬性定義，如果一條軸線排不下，如何換行。flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為rownowrap。justify-content屬性定義了項目在主軸上的對齊方式。align-items屬性定義項目在交叉軸上如何對齊。align-content屬性定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。以下6個屬性設置在項目上。order屬性定義項目的排列順序。數(shù)值越小，排列越靠前，默認為0。flex-grow屬性定義項目的放大比例，默認為0，即如果存在剩余空間，也不放大。flex-shrink屬性定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小。flex-basis屬性定義了在分配多余空間之前，項目占據(jù)的主軸空間。瀏覽器根據(jù)這個屬性，計算主軸是否有多余空間。它的默認 值為auto，即項目的本來大小。flex屬性是flex-grow，flex-shrink和flex-basis的簡寫，默認值為01auto。align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值為auto，表示繼承父 元素的align-items屬性，如果沒有父元素，則等同于stretch。

回答：

flex布局是CSS3新增的一種布局方式，我們可以通過將一個元素的display屬性值設置為flex從而使它成為一個flex 容器，它的所有子元素都會成為它的項目。一個容器默認有兩條軸，一個是水平的主軸，一個是與主軸垂直的交叉軸。我們可以使用flex-direction來指定主軸的方向。 我們可以使用justify-content來指定元素在主軸上的排列方式，使用align-items來指定元素在交叉軸上的排列方式。還 可以使用flex-wrap來規(guī)定當一行排列不下時的換行方式。對于容器中的項目，我們可以使用order屬性來指定項目的排列順序，還可以使用flex-grow來指定當排列空間有剩余的時候， 項目的放大比例。還可以使用flex-shrink來指定當排列空間不足時，項目的縮小比例。

詳細資料可以參考：
《Flex 布局教程：語法篇》
《Flex 布局教程：實例篇》

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

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

15.一個滿屏品字布局如何設計?

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

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

（1）利用padding-bottom|margin-bottom正負值相抵，不會影響頁面布局的特點。設置父容器設置超出隱藏（overflow: hidden），這樣父容器的高度就還是它里面的列沒有設定padding-bottom時的高度，當它里面的任一列高度增加了，則 父容器的高度被撐到里面最高那列的高度，其他比這列矮的列會用它們的padding-bottom補償這部分高度差。（2）利用table-cell所有單元格高度都相等的特性，來實現(xiàn)多列等高。（3）利用flex布局中項目align-items屬性默認為stretch，如果項目未設置高度或設為auto，將占滿整個容器的高度 的特性，來實現(xiàn)多列等高。

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

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

（1）png24位的圖片在iE6瀏覽器上出現(xiàn)背景 解決方案：做成PNG8，也可以引用一段腳本處理。（2）瀏覽器默認的margin和padding不同 解決方案：加一個全局的*{margin:0;padding:0;}來統(tǒng)一。（3）IE6雙邊距bug：在IE6下，如果對元素設置了浮動，同時又設置了margin-left或 margin-right，margin值會加倍。#box{float:left;width:10px;margin:00010px;}這種情況之下IE會產(chǎn)生20px的距離 解決方案：在float的標簽樣式控制中加入_display:inline;將其轉化為行內(nèi)屬性。(_這個符號只有ie6會識別)（4）漸進識別的方式，從總體中逐漸排除局部。 首先，巧妙的使用"\9"這一標記，將IE游覽器從所有情況中分離出來。 接著，再次使用"+"將IE8和IE7、IE6分離開來，這樣IE8已經(jīng)獨立識別。 .bb{ background-color:#f1ee18;/*所有識別*/ .background-color:#00deff\9;/*IE6、7、8識別*/ +background-color:#a200ff;/*IE6、7識別*/ _background-color:#1e0bd1;/*IE6識別*/ }（5）IE下，可以使用獲取常規(guī)屬性的方法來獲取自定義屬性，也可以使用getAttribute()獲取自定義 屬性；Firefox下，只能使用getAttribute()獲取自定義屬性 解決方法：統(tǒng)一通過getAttribute()獲取自定義屬性。（6）IE下，event對象有x、y屬性，但是沒有pageX、pageY屬性;Firefox下，event對象有 pageX、pageY屬性，但是沒有x、y屬性。 解決方法：（條件注釋）缺點是在IE瀏覽器下可能會增加額外的HTTP請求數(shù)。（7）Chrome中文界面下默認會將小于12px的文本強制按照12px顯示 解決方法：1.可通過加入CSS屬性-webkit-text-size-adjust:none;解決。但是，在chrome 更新到27版本之后就不可以用了。2.還可以使用-webkit-transform:scale(0.5);注意-webkit-transform:scale(0.75); 收縮的是整個span的大小，這時候，必須要將span轉換成塊元素，可以使用display：block/inline-block/...；（8）超鏈接訪問過后hover樣式就不出現(xiàn)了，被點擊訪問過的超鏈接樣式不再具有hover和active了 解決方法：改變CSS屬性的排列順序L-V-H-A（9）怪異模式問題：漏寫DTD聲明，Firefox仍然會按照標準模式來解析網(wǎng)頁，但在IE中會觸發(fā)怪異模 式。為避免怪異模式給我們帶來不必要的麻煩，最好養(yǎng)成書寫DTD聲明的好習慣。

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

瀏覽器會把inline元素間的空白字符（空格、換行、Tab等）渲染成一個空格。而為了美觀。我們通常是一個<li>放在一行， 這導致<li>換行后產(chǎn)生換行字符，它變成一個空格，占用了一個字符的寬度。解決辦法：（1）為<li>設置float:left。不足：有些容器是不能設置浮動，如左右切換的焦點圖等。（2）將所有<li>寫在同一行。不足：代碼不美觀。（3）將<ul>內(nèi)的字符尺寸直接設為0，即font-size:0。不足：<ul>中的其他字符尺寸也被設為0，需要額外重新設定其他 字符尺寸，且在Safari瀏覽器依然會出現(xiàn)空白間隔。（4）消除<ul>的字符間隔letter-spacing:-8px，不足：這也設置了<li>內(nèi)的字符間隔，因此需要將<li>內(nèi)的字符 間隔設為默認letter-spacing:normal。

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

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

-因為瀏覽器的兼容問題，不同瀏覽器對有些標簽的默認值是不同的，如果沒對CSS初始化往往會出現(xiàn)瀏覽器之間的頁面顯示差異。-當然，初始化樣式會對SEO有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化。最簡單的初始化方法：*{padding:0;margin:0;}（強烈不建議）淘寶的樣式初始化代碼： 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）就是元素用來計算和定位的一個框。（1）根元素（很多場景下可以看成是<html>）被稱為“初始包含塊”，其尺寸等同于瀏覽器可視窗口的大小。（2）對于其他元素，如果該元素的position是relative或者static，則“包含塊”由其最近的塊容器祖先盒的contentbox 邊界形成。（3）如果元素position:fixed，則“包含塊”是“初始包含塊”。（4）如果元素position:absolute，則“包含塊”由最近的position不為static的祖先元素建立，具體方式如下：如果該祖先元素是純inline元素，則規(guī)則略復雜： ?假設給內(nèi)聯(lián)元素的前后各生成一個寬度為0的內(nèi)聯(lián)盒子（inlinebox），則這兩個內(nèi)聯(lián)盒子的paddingbox外面的包 圍盒就是內(nèi)聯(lián)元素的“包含塊”； ?如果該內(nèi)聯(lián)元素被跨行分割了，那么“包含塊”是未定義的，也就是CSS2.1規(guī)范并沒有明確定義，瀏覽器自行發(fā)揮 否則，“包含塊”由該祖先的paddingbox邊界形成。如果沒有符合條件的祖先元素，則“包含塊”是“初始包含塊”。

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

（1）對于一般的元素，它的表現(xiàn)跟visibility：hidden;是一樣的。元素是不可見的，但此時仍占用頁面空間。（2）但例外的是，如果這個元素是table相關的元素，例如table行，tablegroup，table列，tablecolumngroup，它的 表現(xiàn)卻跟display:none一樣，也就是說，它們占用的空間也會釋放。在不同瀏覽器下的區(qū)別：在谷歌瀏覽器里，使用collapse值和使用hidden值沒有什么區(qū)別。在火狐瀏覽器、Opera和IE11里，使用collapse值的效果就如它的字面意思：table的行會消失，它的下面一行會補充它的位 置。

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

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

一般而言width:100%會使元素box的寬度等于父元素的contentbox的寬度。width:auto會使元素撐滿整個父元素，margin、border、padding、content區(qū)域會自動分配水平空間。

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

絕對定位元素的寬高百分比是相對于臨近的position不為static的祖先元素的paddingbox來計算的。非絕對定位元素的寬高百分比則是相對于父元素的contentbox來計算的。

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

base64編碼是一種圖片處理格式，通過特定的算法將圖片編碼成一長串字符串，在頁面上顯示的時候，可以用該字符串來代替圖片的 url屬性。使用base64的優(yōu)點是：（1）減少一個圖片的HTTP請求使用base64的缺點是：（1）根據(jù)base64的編碼原理，編碼后的大小會比原文件大小大1/3，如果把大圖片編碼到html/css中，不僅會造成文件體 積的增加，影響文件的加載速度，還會增加瀏覽器對html或css文件解析渲染的時間。（2）使用base64無法直接緩存，要緩存只能緩存包含base64的文件，比如HTML或者CSS，這相比域直接緩存圖片的效果要 差很多。（3）兼容性的問題，ie8以前的瀏覽器不支持。一般一些網(wǎng)站的小圖標可以使用base64圖片來引入。

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

25.'display'、'position'和'float'的相互關系？

（1）首先我們判斷display屬性是否為none，如果為none，則position和float屬性的值不影響元素最后的表現(xiàn)。（2）然后判斷position的值是否為absolute或者fixed，如果是，則float屬性失效，并且display的值應該被 設置為table或者block，具體轉換需要看初始轉換值。（3）如果position的值不為absolute或者fixed，則判斷float屬性的值是否為none，如果不是，則display 的值則按上面的規(guī)則轉換。注意，如果position的值為relative并且float屬性的值存在，則relative相對 于浮動后的最終位置定位。（4）如果float的值為none，則判斷元素是否為根元素，如果是根元素則display屬性按照上面的規(guī)則轉換，如果不是， 則保持指定的display屬性值不變。總的來說，可以把它看作是一個類似優(yōu)先級的機制，"position:absolute"和"position:fixed"優(yōu)先級最高，有它存在 的時候，浮動不起作用，'display'的值也需要調(diào)整；其次，元素的'float'特性的值不是"none"的時候或者它是根元素 的時候，調(diào)整'display'的值；最后，非根元素，并且非浮動元素，并且非絕對定位的元素，'display'特性值同設置值。

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

26.margin 重疊問題的理解。

相關知識點：

塊級元素的上外邊距（margin-top）與下外邊距（margin-bottom）有時會合并為單個外邊距，這樣的現(xiàn)象稱為“margin合 并”。產(chǎn)生折疊的必備條件：margin必須是鄰接的!而根據(jù)w3c規(guī)范，兩個margin是鄰接的必須滿足以下條件：?必須是處于常規(guī)文檔流（非float和絕對定位）的塊級盒子，并且處于同一個BFC當中。 ?沒有線盒，沒有空隙，沒有padding和border將他們分隔開 ?都屬于垂直方向上相鄰的外邊距，可以是下面任意一種情況 ?元素的margin-top與其第一個常規(guī)文檔流的子元素的margin-top ?元素的margin-bottom與其下一個常規(guī)文檔流的兄弟元素的margin-top ?height為auto的元素的margin-bottom與其最后一個常規(guī)文檔流的子元素的margin-bottom ?高度為0并且最小高度也為0，不包含常規(guī)文檔流的子元素，并且自身沒有建立新的BFC的元素的margin-top 和margin-bottommargin合并的3種場景：（1）相鄰兄弟元素margin合并。解決辦法： ?設置塊狀格式化上下文元素（BFC）（2）父級和第一個/最后一個子元素的margin合并。解決辦法：對于margin-top合并，可以進行如下操作（滿足一個條件即可）： ?父元素設置為塊狀格式化上下文元素； ?父元素設置border-top值； ?父元素設置padding-top值； ?父元素和第一個子元素之間添加內(nèi)聯(lián)元素進行分隔。對于margin-bottom合并，可以進行如下操作（滿足一個條件即可）： ?父元素設置為塊狀格式化上下文元素； ?父元素設置border-bottom值； ?父元素設置padding-bottom值； ?父元素和最后一個子元素之間添加內(nèi)聯(lián)元素進行分隔； ?父元素設置height、min-height或max-height。（3）空塊級元素的margin合并。解決辦法： ?設置垂直方向的border； ?設置垂直方向的padding； ?里面添加內(nèi)聯(lián)元素（直接Space鍵空格是沒用的）； ?設置height或者min-height。

回答：

margin重疊指的是在垂直方向上，兩個相鄰元素的margin發(fā)生重疊的情況。一般來說可以分為四種情形：第一種是相鄰兄弟元素的marin-bottom和margin-top的值發(fā)生重疊。這種情況下我們可以通過設置其中一個元素為BFC 來解決。第二種是父元素的margin-top和子元素的margin-top發(fā)生重疊。它們發(fā)生重疊是因為它們是相鄰的，所以我們可以通過這 一點來解決這個問題。我們可以為父元素設置border-top、padding-top值來分隔它們，當然我們也可以將父元素設置為BFC 來解決。第三種是高度為auto的父元素的margin-bottom和子元素的margin-bottom發(fā)生重疊。它們發(fā)生重疊一個是因為它們相 鄰，一個是因為父元素的高度不固定。因此我們可以為父元素設置border-bottom、padding-bottom來分隔它們，也可以為 父元素設置一個高度，max-height和min-height也能解決這個問題。當然將父元素設置為BFC是最簡單的方法。第四種情況，是沒有內(nèi)容的元素，自身的margin-top和margin-bottom發(fā)生的重疊。我們可以通過為其設置border、pa dding或者高度來解決這個問題。

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

相關知識點：

塊格式化上下文（BlockFormattingContext，BFC）是Web頁面的可視化CSS渲染的一部分，是布局過程中生成塊級盒 子的區(qū)域，也是浮動元素與其他元素的交互限定區(qū)域。通俗來講?BFC是一個獨立的布局環(huán)境，可以理解為一個容器，在這個容器中按照一定規(guī)則進行物品擺放，并且不會影響其它環(huán)境中的物品。 ?如果一個元素符合觸發(fā)BFC的條件，則BFC中的元素布局不受外部影響。創(chuàng)建BFC（1）根元素或包含根元素的元素 （2）浮動元素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指的是塊級格式化上下文，一個元素形成了BFC之后，那么它內(nèi)部元素產(chǎn)生的布局不會影響到外部元素，外部元素的布局也 不會影響到BFC中的內(nèi)部元素。一個BFC就像是一個隔離區(qū)域，和其他區(qū)域互不影響。一般來說根元素是一個BFC區(qū)域，浮動和絕對定位的元素也會形成BFC，display屬性的值為inline-block、flex這些 屬性時也會創(chuàng)建BFC。還有就是元素的overflow的值不為visible時都會創(chuàng)建BFC。

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

28.IFC 是什么？

IFC指的是行級格式化上下文，它有這樣的一些布局規(guī)則：（1）行級上下文內(nèi)部的盒子會在水平方向，一個接一個地放置。 （2）當一行不夠的時候會自動切換到下一行。 （3）行級上下文的高度由內(nèi)部最高的內(nèi)聯(lián)盒子的高度決定。

詳細資料可以參考：

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

29.請解釋一下為什么需要清除浮動？清除浮動的方式

浮動元素可以左右移動，直到遇到另一個浮動元素或者遇到它外邊緣的包含框。浮動框不屬于文檔流中的普通流，當元素浮動之后， 不會影響塊級元素的布局，只會影響內(nèi)聯(lián)元素布局。此時文檔流中的普通流就會表現(xiàn)得該浮動框不存在一樣的布局模式。當包含框 的高度小于浮動框的時候，此時就會出現(xiàn)“高度塌陷”。清除浮動是為了清除使用浮動元素產(chǎn)生的影響。浮動的元素，高度會塌陷，而高度的塌陷使我們頁面后面的布局不能正常顯示。清除浮動的方式（1）使用clear屬性清除浮動。參考28。（2）使用BFC塊級格式化上下文來清除浮動。參考26。因為BFC元素不會影響外部元素的特點，所以BFC元素也可以用來清除浮動的影響，因為如果不清除，子元素浮動則父元 素高度塌陷，必然會影響后面元素布局和定位，這顯然有違BFC元素的子元素不會影響外部元素的設定。

30.使用 clear 屬性清除浮動的原理？

使用clear屬性清除浮動，其語法如下：clear:none|left|right|both如果單看字面意思，clear:left應該是“清除左浮動”，clear:right應該是“清除右浮動”的意思，實際上，這種解釋是有問 題的，因為浮動一直還在，并沒有清除。官方對clear屬性的解釋是：“元素盒子的邊不能和前面的浮動元素相鄰。”，我們對元素設置clear屬性是為了避免浮動元素 對該元素的影響，而不是清除掉浮動。還需要注意的一點是clear屬性指的是元素盒子的邊不能和前面的浮動元素相鄰，注意這里“前面的”3個字，也就是clear屬 性對“后面的”浮動元素是不聞不問的。考慮到float屬性要么是left，要么是right，不可能同時存在，同時由于clear 屬性對“后面的”浮動元素不聞不問，因此，當clear:left有效的時候，clear:right必定無效，也就是此時clear:left 等同于設置clear:both；同樣地，clear:right如果有效也是等同于設置clear:both。由此可見，clear:left和cle ar:right這兩個聲明就沒有任何使用的價值，至少在CSS世界中是如此，直接使用clear:both吧。一般使用偽元素的方式清除浮動.clear::after{ content:''; display:table;//也可以是'block'，或者是'list-item' clear:both; }clear屬性只有塊級元素才有效的，而::after等偽元素默認都是內(nèi)聯(lián)水平，這就是借助偽元素清除浮動影響時需要設置disp lay屬性值的原因。

31.zoom:1 的清除浮動原理?

清除浮動，觸發(fā)hasLayout； zoom屬性是IE瀏覽器的專有屬性，它可以設置或檢索對象的縮放比例。解決ie下比較奇葩的bug。譬如外邊距（margin） 的重疊，浮動清除，觸發(fā)ie的haslayout屬性等。來龍去脈大概如下： 當設置了zoom的值之后，所設置的元素就會就會擴大或者縮小，高度寬度就會重新計算了，這里一旦改變zoom值時其實也會發(fā) 生重新渲染，運用這個原理，也就解決了ie下子元素浮動時候父元素不隨著自動擴大的問題。zoom屬性是IE瀏覽器的專有屬性，火狐和老版本的webkit核心的瀏覽器都不支持這個屬性。然而，zoom現(xiàn)在已經(jīng)被逐步標 準化，出現(xiàn)在CSS3.0規(guī)范草案中。目前非ie由于不支持這個屬性，它們又是通過什么屬性來實現(xiàn)元素的縮放呢？可以通過css3里面的動畫屬性scale進行縮放。

32.移動端的布局用過媒體查詢嗎？

假設你現(xiàn)在正用一臺顯示設備來閱讀這篇文章，同時你也想把它投影到屏幕上，或者打印出來，而顯示設備、屏幕投影和打印等這些 媒介都有自己的特點，CSS就是為文檔提供在不同媒介上展示的適配方法當媒體查詢?yōu)檎鏁r，相關的樣式表或樣式規(guī)則會按照正常的級聯(lián)規(guī)被應用。當媒體查詢返回假，標簽上帶有媒體查詢的樣式表仍將被 下載（只不過不會被應用）。包含了一個媒體類型和至少一個使用寬度、高度和顏色等媒體屬性來限制樣式表范圍的表達式。CSS3加入的媒體查詢使得無需修改 內(nèi)容便可以使樣式應用于某些特定的設備范圍。

詳細資料可以參考：
《CSS3@media 查詢》
《響應式布局和自適應布局詳解》

33.使用 CSS 預處理器嗎？喜歡哪個？

SASS（SASS、LESS沒有本質區(qū)別，只因為團隊前端都是用的SASS）

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

加載性能：（1）css壓縮：將寫好的css進行打包壓縮，可以減少很多的體積。 （2）css單一樣式：當需要下邊距和左邊距的時候，很多時候選擇:margin:top0bottom0;但margin-bottom:bot tom;margin-left:left;執(zhí)行的效率更高。 （3）減少使用@import,而建議使用link，因為后者在頁面加載時一起加載，前者是等待頁面加載完成之后再進行加載。選擇器性能：（1）關鍵選擇器（keyselector）。選擇器的最后面的部分為關鍵選擇器（即用來匹配目標元素的部分）。CSS選擇符是從右到 左進行匹配的。當使用后代選擇器的時候，瀏覽器會遍歷所有子元素來確定是否是指定的元素等等；（2）如果規(guī)則擁有ID選擇器作為其關鍵選擇器，則不要為規(guī)則增加標簽。過濾掉無關的規(guī)則（這樣樣式系統(tǒng)就不會浪費時間去匹 配它們了）。（3）避免使用通配規(guī)則，如*{}計算次數(shù)驚人！只對需要用到的元素進行選擇。（4）盡量少的去對標簽進行選擇，而是用class。（5）盡量少的去使用后代選擇器，降低選擇器的權重值。后代選擇器的開銷是最高的，盡量將選擇器的深度降到最低，最高不要超過 三層，更多的使用類來關聯(lián)每一個標簽元素。（6）了解哪些屬性是可以通過繼承而來的，然后避免對這些屬性重復指定規(guī)則。渲染性能：（1）慎重使用高性能屬性：浮動、定位。（2）盡量減少頁面重排、重繪。（3）去除空規(guī)則：｛｝。空規(guī)則的產(chǎn)生原因一般來說是為了預留樣式。去除這些空規(guī)則無疑能減少css文檔體積。（4）屬性值為0時，不加單位。（5）屬性值為浮動小數(shù)0.**，可以省略小數(shù)點之前的0。（6）標準化各種瀏覽器前綴：帶瀏覽器前綴的在前。標準屬性在后。（7）不使用@import前綴，它會影響css的加載速度。（8）選擇器優(yōu)化嵌套，盡量避免層級過深。（9）css雪碧圖，同一頁面相近部分的小圖標，方便使用，減少頁面的請求次數(shù)，但是同時圖片本身會變大，使用時，優(yōu)劣考慮清 楚，再使用。（10）正確使用display的屬性，由于display的作用，某些樣式組合會無效，徒增樣式體積的同時也影響解析性能。（11）不濫用web字體。對于中文網(wǎng)站來說WebFonts可能很陌生，國外卻很流行。webfonts通常體積龐大，而且一些瀏 覽器在下載webfonts時會阻塞頁面渲染損傷性能。可維護性、健壯性：（1）將具有相同屬性的樣式抽離出來，整合并通過class在頁面中進行使用，提高css的可維護性。 （2）樣式與內(nèi)容分離：將css代碼定義到外部css中。

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

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

樣式系統(tǒng)從關鍵選擇器開始匹配，然后左移查找規(guī)則選擇器的祖先元素。只要選擇器的子樹一直在工作，樣式系統(tǒng)就會持續(xù)左移，直 到和規(guī)則匹配，或者是因為不匹配而放棄該規(guī)則。試想一下，如果采用從左至右的方式讀取CSS規(guī)則，那么大多數(shù)規(guī)則讀到最后（最右）才會發(fā)現(xiàn)是不匹配的，這樣做會費時耗能， 最后有很多都是無用的；而如果采取從右向左的方式，那么只要發(fā)現(xiàn)最右邊選擇器不匹配，就可以直接舍棄了，避免了許多無效匹配。

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

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

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

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

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

margin是用來隔開元素與元素的間距；padding是用來隔開元素與內(nèi)容的間隔。 margin用于布局分開元素使元素與元素互不相干。 padding用于元素與內(nèi)容之間的間隔，讓內(nèi)容（文字）與（包裹）元素之間有一段距離。何時應當使用margin： ?需要在border外側添加空白時。 ?空白處不需要背景（色）時。 ?上下相連的兩個盒子之間的空白，需要相互抵消時。如15px+20px的margin，將得到20px的空白。何時應當時用padding： ?需要在border內(nèi)測添加空白時。 ?空白處需要背景（色）時。 ?上下相連的兩個盒子之間的空白，希望等于兩者之和時。如15px+20px的padding，將得到35px的空白。

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

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

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

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

all屬性實際上是所有CSS屬性的縮寫，表示，所有的CSS屬性都怎樣怎樣，但是，不包括unicode-bidi和direction 這兩個CSS屬性。支持三個CSS通用屬性值，initial,inherit,unset。initial是初始值的意思，也就是該元素元素都除了unicode-bidi和direction以外的CSS屬性都使用屬性的默認初始 值。inherit是繼承的意思，也就是該元素除了unicode-bidi和direction以外的CSS屬性都繼承父元素的屬性值。unset是取消設置的意思，也就是當前元素瀏覽器或用戶設置的CSS忽略，然后如果是具有繼承特性的CSS，如color，則 使用繼承值；如果是沒有繼承特性的CSS屬性，如background-color，則使用初始值。

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

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

采用*{pading:0;margin:0;}這樣的寫法好處是寫起來很簡單，但是是通配符，需要把所有的標簽都遍歷一遍，當網(wǎng)站較大時， 樣式比較多，這樣寫就大大的加強了網(wǎng)站運行的負載，會使網(wǎng)站加載的時候需要很長一段時間，因此一般大型的網(wǎng)站都有分層次的一 套初始化樣式。出于性能的考慮，并不是所有標簽都會有padding和margin，因此對常見的具有默認padding和margin的元素初始化即 可，并不需使用通配符*來初始化。

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

（1）內(nèi)聯(lián)元素也可以作為“包含塊”所在的元素；（2）“包含塊”所在的元素不是父塊級元素，而是最近的position不為static的祖先元素或根元素；（3）邊界是paddingbox而不是contentbox。

42.對于 hasLayout 的理解？

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

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

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

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

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

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

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

45.什么是響應式設計？響應式設計的基本原理是什么？如何兼容低版本的 IE？（待深入了解）

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

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

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

視差滾動是指多層背景以不同的速度移動，形成立體的運動效果，帶來非常出色的視覺體驗。

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

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

chrome表單自動填充后，input文本框的背景會變成黃色的，通過審查元素可以看到這是由于chrome會默認給自動填充的in put表單加上input:-webkit-autofill私有屬性，然后對其賦予以下樣式：{ background-color:rgb(250,255,189)!important; background-image:none!important; color:rgb(0,0,0)!important; }對chrome默認定義的background-color，background-image，color使用important是不能提高其優(yōu)先級的，但是 其他屬性可使用。使用足夠大的純色內(nèi)陰影來覆蓋input輸入框的黃色背景，處理如下input:-webkit-autofill,textarea:-webkit-autofill,select:-webkit-autofill{ -webkit-box-shadow:000px1000pxwhiteinset; border:1pxsolid#CCC!important; }

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

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

在谷歌下css設置字體大小為12px及以下時，顯示都是一樣大小，都是默認12px。解決辦法：（1）可以使用Webkit的內(nèi)核的-webkit-text-size-adjust的私有CSS屬性來解決，只要加了-webkit-text-size -adjust:none;字體大小就不受限制了。但是chrome更新到27版本之后就不可以用了。所以高版本chrome谷歌瀏覽器 已經(jīng)不再支持-webkit-text-size-adjust樣式，所以要使用時候慎用。（2）還可以使用css3的transform縮放屬性-webkit-transform:scale(0.5);注意-webkit-transform:scale(0. 75);收縮的是整個元素的大小，這時候，如果是內(nèi)聯(lián)元素，必須要將內(nèi)聯(lián)元素轉換成塊元素，可以使用display：block/ inline-block/...；（3）使用圖片：如果是內(nèi)容固定不變情況下，使用將小于12px文字內(nèi)容切出做圖片，這樣不影響兼容也不影響美觀。

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

49.讓頁面里的字體變清晰，變細用 CSS 怎么做？

webkit內(nèi)核的私有屬性：-webkit-font-smoothing，用于字體抗鋸齒，使用后字體看起來會更清晰舒服。在MacOS測試環(huán)境下面設置-webkit-font-smoothing:antialiased;但是這個屬性僅僅是面向MacOS，其他操作系統(tǒng)設 置后無效。

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

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

italic和oblique這兩個關鍵字都表示“斜體”的意思。它們的區(qū)別在于，italic是使用當前字體的斜體字體，而oblique只是單純地讓文字傾斜。如果當前字體沒有對應的斜體字體， 則退而求其次，解析為oblique，也就是單純形狀傾斜。

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

設備像素指的是物理像素，一般手機的分辨率指的就是設備像素，一個設備的設備像素是不可變的。css像素和設備獨立像素是等價的，不管在何種分辨率的設備上，css像素的大小應該是一致的，css像素是一個相對單位，它是相 對于設備像素的，一個css像素的大小取決于頁面縮放程度和dpr的大小。dpr指的是設備像素和設備獨立像素的比值，一般的pc屏幕，dpr=1。在iphone4時，蘋果推出了retina屏幕，它的dpr 為2。屏幕的縮放會改變dpr的值。ppi指的是每英寸的物理像素的密度，ppi越大，屏幕的分辨率越大。

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

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

相關知識點：

如果把移動設備上瀏覽器的可視區(qū)域設為viewport的話，某些網(wǎng)站就會因為viewport太窄而顯示錯亂，所以這些瀏覽器就決定 默認情況下把viewport設為一個較寬的值，比如980px，這樣的話即使是那些為桌面設計的網(wǎng)站也能在移動瀏覽器上正常顯示了。 ppk把這個瀏覽器默認的viewport叫做layoutviewport。layoutviewport的寬度是大于瀏覽器可視區(qū)域的寬度的，所以我們還需要一個viewport來代表瀏覽器可視區(qū)域的大小，ppk把 這個viewport叫做visualviewport。idealviewport是最適合移動設備的viewport，idealviewport的寬度等于移動設備的屏幕寬度，只要在css中把某一元 素的寬度設為idealviewport的寬度（單位用px），那么這個元素的寬度就是設備屏幕的寬度了，也就是寬度為100%的效果。i dealviewport的意義在于，無論在何種分辨率的屏幕下，那些針對idealviewport而設計的網(wǎng)站，不需要用戶手動縮放，也 不需要出現(xiàn)橫向滾動條，都可以完美的呈現(xiàn)給用戶。

回答：

移動端一共需要理解三個viewport的概念的理解。第一個視口是布局視口，在移動端顯示網(wǎng)頁時，由于移動端的屏幕尺寸比較小，如果網(wǎng)頁使用移動端的屏幕尺寸進行布局的話，那么整 個頁面的布局都會顯示錯亂。所以移動端瀏覽器提供了一個layoutviewport布局視口的概念，使用這個視口來對頁面進行布局展 示，一般layoutviewport的大小為980px，因此頁面布局不會有太大的變化，我們可以通過拖動和縮放來查看到這個頁面。第二個視口指的是視覺視口，visualviewport指的是移動設備上我們可見的區(qū)域的視口大小，一般為屏幕的分辨率的大小。visu alviewport和layoutviewport的關系，就像是我們通過窗戶看外面的風景，視覺視口就是窗戶，而外面的風景就是布局視口 中的網(wǎng)頁內(nèi)容。第三個視口是理想視口，由于layoutviewport一般比visualviewport要大，所以想要看到整個頁面必須通過拖動和縮放才 能實現(xiàn)。所以又提出了idealviewport的概念，idealviewport下用戶不用縮放和滾動條就能夠查看到整個頁面，并且頁面在 不同分辨率下顯示的內(nèi)容大小相同。idealviewport其實就是通過修改layoutviewport的大小，讓它等于設備的寬度，這個 寬度可以理解為是設備獨立像素，因此根據(jù)idealviewport設計的頁面，在不同分辨率的屏幕下，顯示應該相同。

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

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

因為移動端瀏覽器默認的viewport叫做layoutviewport。在移動端顯示時，因為layoutviewport的寬度大于移動端屏幕 的寬度，所以頁面會出現(xiàn)滾動條左右移動，fixed的元素是相對layoutviewport來固定位置的，而不是移動端屏幕來固定位置的 ，所以會出現(xiàn)感覺fixed無效的情況。如果想實現(xiàn)fixed相對于屏幕的固定效果，我們需要改變的是viewport的大小為idealviewport，可以如下設置：<metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-sca le=1.0,user-scalable=no"/>

54.如果需要手動寫動畫，你認為最小時間間隔是多久，為什么？（阿里）

多數(shù)顯示器默認頻率是60Hz，即1秒刷新60次，所以理論上最小間隔為1/60*1000ms＝16.7ms

55.如何讓去除 inline-block 元素間間距？

移除空格、使用margin負值、使用font-size:0、letter-spacing、word-spacing

詳細資料可以參考：
《去除 inline-block 元素間間距的 N 種方法》

56.overflow:scroll 時不能平滑滾動的問題怎么處理？

以下代碼可解決這種卡頓的問題：-webkit-overflow-scrolling:touch;是因為這行代碼啟用了硬件加速特性，所以滑動很流 暢。

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

57.有一個高度自適應的 div，里面有兩個 div，一個高度 100px，希望另一個填滿剩下的高度。

（1）外層div使用position：relative；高度要求自適應的div使用position:absolute;top:100px;bottom:0; left:0;right:0;（2）使用flex布局，設置主軸為豎軸，第二個div的flex-grow為1。

詳細資料可以參考：
《有一個高度自適應的 div，里面有兩個 div，一個高度 100px，希望另一個填滿剩下的高度(三種方案)》

58.png、jpg、gif 這些圖片格式解釋一下，分別什么時候用。有沒有了解過 webp？

相關知識點：

（1）BMP，是無損的、既支持索引色也支持直接色的、點陣圖。這種圖片格式幾乎沒有對數(shù)據(jù)進行壓縮，所以BMP格式的圖片通常 具有較大的文件大小。（2）GIF是無損的、采用索引色的、點陣圖。采用LZW壓縮算法進行編碼。文件小，是GIF格式的優(yōu)點，同時，GIF格式還具 有支持動畫以及透明的優(yōu)點。但，GIF格式僅支持8bit的索引色，所以GIF格式適用于對色彩要求不高同時需要文件體積 較小的場景。（3）JPEG是有損的、采用直接色的、點陣圖。JPEG的圖片的優(yōu)點，是采用了直接色，得益于更豐富的色彩，JPEG非常適合用來 存儲照片，與GIF相比，JPEG不適合用來存儲企業(yè)Logo、線框類的圖。因為有損壓縮會導致圖片模糊，而直接色的選用， 又會導致圖片文件較GIF更大。（4）PNG-8是無損的、使用索引色的、點陣圖。PNG是一種比較新的圖片格式，PNG-8是非常好的GIF格式替代者，在可能的 情況下，應該盡可能的使用PNG-8而不是GIF，因為在相同的圖片效果下，PNG-8具有更小的文件體積。除此之外，PNG-8 還支持透明度的調(diào)節(jié)，而GIF并不支持。現(xiàn)在，除非需要動畫的支持，否則我們沒有理由使用GIF而不是PNG-8。（5）PNG-24是無損的、使用直接色的、點陣圖。PNG-24的優(yōu)點在于，它壓縮了圖片的數(shù)據(jù)，使得同樣效果的圖片，PNG-24格 式的文件大小要比BMP小得多。當然，PNG24的圖片還是要比JPEG、GIF、PNG-8大得多。（6）SVG是無損的、矢量圖。SVG是矢量圖。這意味著SVG圖片由直線和曲線以及繪制它們的方法組成。當你放大一個SVG圖 片的時候，你看到的還是線和曲線，而不會出現(xiàn)像素點。這意味著SVG圖片在放大時，不會失真，所以它非常適合用來繪制企 業(yè)Logo、Icon等。（7）WebP是谷歌開發(fā)的一種新圖片格式，WebP是同時支持有損和無損壓縮的、使用直接色的、點陣圖。從名字就可以看出來它是 為Web而生的，什么叫為Web而生呢？就是說相同質量的圖片，WebP具有更小的文件體積。現(xiàn)在網(wǎng)站上充滿了大量的圖片， 如果能夠降低每一個圖片的文件大小，那么將大大減少瀏覽器和服務器之間的數(shù)據(jù)傳輸量，進而降低訪問延遲，提升訪問體驗。?在無損壓縮的情況下，相同質量的WebP圖片，文件大小要比PNG小26%； ?在有損壓縮的情況下，具有相同圖片精度的WebP圖片，文件大小要比JPEG小25%~34%； ?WebP圖片格式支持圖片透明度，一個無損壓縮的WebP圖片，如果要支持透明度只需要22%的格外文件大小。但是目前只有Chrome瀏覽器和Opera瀏覽器支持WebP格式，兼容性不太好。

回答：

我了解到的一共有七種常見的圖片的格式。（1）第一種是BMP格式，它是無損壓縮的，支持索引色和直接色的點陣圖。由于它基本上沒有進行壓縮，因此它的文件體積一般比 較大。（2）第二種是GIF格式，它是無損壓縮的使用索引色的點陣圖。由于使用了LZW壓縮方法，因此文件的體積很小。并且GIF還 支持動畫和透明度。但因為它使用的是索引色，所以它適用于一些對顏色要求不高且需要文件體積小的場景。（3）第三種是JPEG格式，它是有損壓縮的使用直接色的點陣圖。由于使用了直接色，色彩較為豐富，一般適用于來存儲照片。但 由于使用的是直接色，可能文件的體積相對于GIF格式來說更大。（4）第四種是PNG-8格式，它是無損壓縮的使用索引色的點陣圖。它是GIF的一種很好的替代格式，它也支持透明度的調(diào)整，并 且文件的體積相對于GIF格式更小。一般來說如果不是需要動畫的情況，我們都可以使用PNG-8格式代替GIF格式。（5）第五種是PNG-24格式，它是無損壓縮的使用直接色的點陣圖。PNG-24的優(yōu)點是它使用了壓縮算法，所以它的體積比BMP 格式的文件要小得多，但是相對于其他的幾種格式，還是要大一些。（6）第六種格式是svg格式，它是矢量圖，它記錄的圖片的繪制方式，因此對矢量圖進行放大和縮小不會產(chǎn)生鋸齒和失真。它一般 適合于用來制作一些網(wǎng)站logo或者圖標之類的圖片。（7）第七種格式是webp格式，它是支持有損和無損兩種壓縮方式的使用直接色的點陣圖。使用webp格式的最大的優(yōu)點是，在相 同質量的文件下，它擁有更小的文件體積。因此它非常適合于網(wǎng)絡圖片的傳輸，因為圖片體積的減少，意味著請求時間的減小， 這樣會提高用戶的體驗。這是谷歌開發(fā)的一種新的圖片格式，目前在兼容性上還不是太好。

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

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

（1）寬高判斷法。通過創(chuàng)建image對象，將其src屬性設置為webp格式的圖片，然后在onload事件中獲取圖片的寬高，如 果能夠獲取，則說明瀏覽器支持webp格式圖片。如果不能獲取或者觸發(fā)了onerror函數(shù)，那么就說明瀏覽器不支持webp格 式的圖片。（2）canvas判斷方法。我們可以動態(tài)的創(chuàng)建一個canvas對象，通過canvas的toDataURL將設置為webp格式，然后判斷 返回值中是否含有image/webp字段，如果包含則說明支持WebP，反之則不支持。

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

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

網(wǎng)站向服務器請求的時候，會自動帶上cookie這樣增加表頭信息量，使請求變慢。如果靜態(tài)文件都放在主域名下，那靜態(tài)文件請求的時候都帶有的cookie的數(shù)據(jù)提交給server的，非常浪費流量，所以不如隔離開 ，靜態(tài)資源放CDN。因為cookie有域的限制，因此不能跨域提交請求，故使用非主要域名的時候，請求頭中就不會帶有cookie數(shù)據(jù)，這樣可以降低請 求頭的大小，降低請求時間，從而達到降低整體請求延時的目的。同時這種方式不會將cookie傳入WebServer，也減少了WebServer對cookie的處理分析環(huán)節(jié)，提高了webserver的 http請求的解析速度。

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

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

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

62.什么是 CSS 預處理器/后處理器？

CSS預處理器定義了一種新的語言，其基本思想是，用一種專門的編程語言，為CSS增加了一些編程的特性，將CSS作為目標生成 文件，然后開發(fā)者就只要使用這種語言進行編碼工作。通俗的說，CSS預處理器用一種專門的編程語言，進行Web頁面樣式設計，然 后再編譯成正常的CSS文件。預處理器例如：LESS、Sass、Stylus，用來預編譯Sass或lesscsssprite，增強了css代碼的復用性，還有層級、mixin、 變量、循環(huán)、函數(shù)等，具有很方便的UI組件模塊化開發(fā)能力，極大的提高工作效率。CSS后處理器是對CSS進行處理，并最終生成CSS的預處理器，它屬于廣義上的CSS預處理器。我們很久以前就在用CSS后 處理器了，最典型的例子是CSS壓縮工具（如clean-css），只不過以前沒單獨拿出來說過。還有最近比較火的Autoprefixer， 以CanIUse上的瀏覽器支持數(shù)據(jù)為基礎，自動處理兼容性問題。后處理器例如：PostCSS，通常被視為在完成的樣式表中根據(jù)CSS規(guī)范處理CSS，讓其更有效；目前最常做的是給CSS屬性添加瀏 覽器私有前綴，實現(xiàn)跨瀏覽器兼容性的問題。

詳細資料可以參考：
《CSS 預處理器和后處理器》

63.闡述一下 CSSSprites

將一個頁面涉及到的所有圖片都包含到一張大圖中去，然后利用CSS的background-image，background-repeat，background -position的組合進行背景定位。利用CSSSprites能很好地減少網(wǎng)頁的http請求，從而很好的提高頁面的性能；CSSSprites 能減少圖片的字節(jié)。優(yōu)點：減少HTTP請求數(shù)，極大地提高頁面加載速度 增加圖片信息重復度，提高壓縮比，減少圖片大小 更換風格方便，只需在一張或幾張圖片上修改顏色或樣式即可實現(xiàn)缺點：圖片合并麻煩 維護麻煩，修改一個圖片可能需要重新布局整個圖片，樣式

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

優(yōu)點： 在屏幕分辨率千差萬別的時代，只要將rem與屏幕分辨率關聯(lián)起來就可以實現(xiàn)頁面的整體縮放，使得在設備上的展現(xiàn)都統(tǒng)一起來了。 而且現(xiàn)在瀏覽器基本都已經(jīng)支持rem了，兼容性也非常的好。缺點： （1）在奇葩的dpr設備上表現(xiàn)效果不太好，比如一些華為的高端機型用rem布局會出現(xiàn)錯亂。 （2）使用iframe引用也會出現(xiàn)問題。 （3）rem在多屏幕尺寸適配上與當前兩大平臺的設計哲學不一致。即大屏的出現(xiàn)到底是為了看得又大又清楚，還是為了看的更多的問 題。

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

65.幾種常見的 CSS 布局

詳細的資料可以參考：
《幾種常見的 CSS 布局》

66.畫一條 0.5px 的線

采用metaviewport的方式采用border-image的方式采用transform:scale()的方式

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

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

transition關注的是CSSproperty的變化，property值和時間的關系是一個三次貝塞爾曲線。animation作用于元素本身而不是樣式屬性，可以使用關鍵幀的概念，應該說可以實現(xiàn)更自由的動畫效果。

詳細資料可以參考：
《CSSanimation 與 CSStransition 有何區(qū)別？》
《CSS3Transition 和 Animation 區(qū)別及比較》
《CSS 動畫簡介》
《CSS 動畫：animation、transition、transform、translate》

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

“首選最小寬度”，指的是元素最適合的最小寬度。東亞文字（如中文）最小寬度為每個漢字的寬度。西方文字最小寬度由特定的連續(xù)的英文字符單元決定。并不是所有的英文字符都會組成連續(xù)單元，一般會終止于空格（普通空格）、短 橫線、問號以及其他非英文字符等。如果想讓英文字符和中文一樣，每一個字符都用最小寬度單元，可以試試使用CSS中的word-break:break-all。

69.為什么 height:100%會無效？

對于普通文檔流中的元素，百分比高度值要想起作用，其父級必須有一個可以生效的高度值。原因是如果包含塊的高度沒有顯式指定（即高度由內(nèi)容決定），并且該元素不是絕對定位，則計算值為auto，因為解釋成了auto， 所以無法參與計算。使用絕對定位的元素會有計算值，即使祖先元素的height計算為auto也是如此。

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

（1）max-width會覆蓋width，即使width是行類樣式或者設置了!important。（2）min-width會覆蓋max-width，此規(guī)則發(fā)生在min-width和max-width沖突的時候。

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

（1）內(nèi)容區(qū)域（contentarea）。內(nèi)容區(qū)域指一種圍繞文字看不見的盒子，其大小僅受字符本身特性控制，本質上是一個字符盒子 （characterbox）；但是有些元素，如圖片這樣的替換元素，其內(nèi)容顯然不是文字，不存在字符盒子之類的，因此，對于這些 元素，內(nèi)容區(qū)域可以看成元素自身。（2）內(nèi)聯(lián)盒子（inlinebox）。“內(nèi)聯(lián)盒子”不會讓內(nèi)容成塊顯示，而是排成一行，這里的“內(nèi)聯(lián)盒子”實際指的就是元素的“外在盒 子”，用來決定元素是內(nèi)聯(lián)還是塊級。該盒子又可以細分為“內(nèi)聯(lián)盒子”和“匿名內(nèi)聯(lián)盒子”兩類。（3）行框盒子（linebox），每一行就是一個“行框盒子”（實線框標注），每個“行框盒子”又是由一個一個“內(nèi)聯(lián)盒子”組成的。（4）包含塊（containingbox），由一行一行的“行框盒子”組成。

72.什么是幽靈空白節(jié)點？

“幽靈空白節(jié)點”是內(nèi)聯(lián)盒模型中非常重要的一個概念，具體指的是：在HTML5文檔聲明中，內(nèi)聯(lián)元素的所有解析和渲染表現(xiàn)就如同 每個行框盒子的前面有一個“空白節(jié)點”一樣。這個“空白節(jié)點”永遠透明，不占據(jù)任何寬度，看不見也無法通過腳本獲取，就好像幽靈 一樣，但又確確實實地存在，表現(xiàn)如同文本節(jié)點一樣，因此，我稱之為“幽靈空白節(jié)點”。

73.什么是替換元素？

通過修改某個屬性值呈現(xiàn)的內(nèi)容就可以被替換的元素就稱為“替換元素”。因此，<img>、<object>、<video>、<iframe>或者表 單元素<textarea>和<input>和<select>都是典型的替換元素。替換元素除了內(nèi)容可替換這一特性以外，還有以下一些特性。（1）內(nèi)容的外觀不受頁面上的CSS的影響。用專業(yè)的話講就是在樣式表現(xiàn)在CSS作用域之外。如何更改替換元素本身的外觀需要 類似appearance屬性，或者瀏覽器自身暴露的一些樣式接口，（2）有自己的尺寸。在Web中，很多替換元素在沒有明確尺寸設定的情況下，其默認的尺寸（不包括邊框）是300像素×150像 素，如<video>、<iframe>或者<canvas>等，也有少部分替換元素為0像素，如<img>圖片，而表單元素的替換元素 的尺寸則和瀏覽器有關，沒有明顯的規(guī)律。（3）在很多CSS屬性上有自己的一套表現(xiàn)規(guī)則。比較具有代表性的就是vertical-align屬性，對于替換元素和非替換元素，ve rtical-align屬性值的解釋是不一樣的。比方說vertical-align的默認值的baseline，很簡單的屬性值，基線之意， 被定義為字符x的下邊緣，而替換元素的基線卻被硬生生定義成了元素的下邊緣。（4）所有的替換元素都是內(nèi)聯(lián)水平元素，也就是替換元素和替換元素、替換元素和文字都是可以在一行顯示的。但是，替換元素默認 的display值卻是不一樣的，有的是inline，有的是inline-block。

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

替換元素的尺寸從內(nèi)而外分為3類：固有尺寸、HTML尺寸和CSS尺寸。（1）固有尺寸指的是替換內(nèi)容原本的尺寸。例如，圖片、視頻作為一個獨立文件存在的時候，都是有著自己的寬度和高度的。（2）HTML尺寸只能通過HTML原生屬性改變，這些HTML原生屬性包括<img>的width和height屬性、<input>的s ize屬性、<textarea>的cols和rows屬性等。（3）CSS尺寸特指可以通過CSS的width和height或者max-width/min-width和max-height/min-height設置的 尺寸，對應盒尺寸中的contentbox。這3層結構的計算規(guī)則具體如下（1）如果沒有CSS尺寸和HTML尺寸，則使用固有尺寸作為最終的寬高。（2）如果沒有CSS尺寸，則使用HTML尺寸作為最終的寬高。（3）如果有CSS尺寸，則最終尺寸由CSS屬性決定。（4）如果“固有尺寸”含有固有的寬高比例，同時僅設置了寬度或僅設置了高度，則元素依然按照固有的寬高比例顯示。（5）如果上面的條件都不符合，則最終寬度表現(xiàn)為300像素，高度為150像素。（6）內(nèi)聯(lián)替換元素和塊級替換元素使用上面同一套尺寸計算規(guī)則。

75.content 與替換元素的關系？

content屬性生成的對象稱為“匿名替換元素”。（1）我們使用content生成的文本是無法選中、無法復制的，好像設置了userselect:none聲明一般，但是普通元素的文本 卻可以被輕松選中。同時，content生成的文本無法被屏幕閱讀設備讀取，也無法被搜索引擎抓取，因此，千萬不要自以為是 地把重要的文本信息使用content屬性生成，因為這對可訪問性和SEO都很不友好。（2）content生成的內(nèi)容不能左右:empty偽類。（3）content動態(tài)生成值無法獲取。

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

margin的'auto'可不是擺設，是具有強烈的計算意味的關鍵字，用來計算元素對應方向應該獲得的剩余間距大小。但是觸發(fā)mar gin:auto計算有一個前提條件，就是width或height為auto時，元素是具有對應方向的自動填充特性的。（1）如果一側定值，一側auto，則auto為剩余空間大小。 （2）如果兩側均是auto，則平分剩余空間。

77.margin 無效的情形

（1）display計算值inline的非替換元素的垂直margin是無效的。對于內(nèi)聯(lián)替換元素，垂直margin有效，并且沒有ma rgin合并的問題。（2）表格中的<tr>和<td>元素或者設置display計算值是table-cell或table-row的元素的margin都是無效的。（3）絕對定位元素非定位方位的margin值“無效”。（4）定高容器的子元素的margin-bottom或者寬度定死的子元素的margin-right的定位“失效”。

78.border 的特殊性？

（1）border-width卻不支持百分比。（2）border-style的默認值是none，有一部分人可能會誤以為是solid。這也是單純設置border-width或border-col or沒有邊框顯示的原因。（3）border-style:double的表現(xiàn)規(guī)則：雙線寬度永遠相等，中間間隔±1。（4）border-color默認顏色就是color色值。（5）默認background背景圖片是相對于paddingbox定位的。

79.什么是基線和 x-height？

字母x的下邊緣（線）就是我們的基線。x-height指的就是小寫字母x的高度，術語描述就是基線和等分線（meanline）（也稱作中線，midline）之間的距離。在C SS世界中，middle指的是基線往上1/2x-height高度。我們可以近似理解為字母x交叉點那個位置。ex是CSS中的一個相對單位，指的是小寫字母x的高度，沒錯，就是指x-height。ex的價值就在其副業(yè)上不受字體和字號影 響的內(nèi)聯(lián)元素的垂直居中對齊效果。內(nèi)聯(lián)元素默認是基線對齊的，而基線就是x的底部，而1ex就是一個x的高度。

80.line-height 的特殊性？

（1）對于非替換元素的純內(nèi)聯(lián)元素，其可視高度完全由line-height決定。對于文本這樣的純內(nèi)聯(lián)元素，line-height就是高 度計算的基石，用專業(yè)說法就是指定了用來計算行框盒子高度的基礎高度。（2）內(nèi)聯(lián)元素的高度由固定高度和不固定高度組成，這個不固定的部分就是這里的“行距”。換句話說，line-height之所以起作 用，就是通過改變“行距”來實現(xiàn)的。在CSS中，“行距”分散在當前文字的上方和下方，也就是即使是第一行文字，其上方也是 有“行距”的，只不過這個“行距”的高度僅僅是完整“行距”高度的一半，因此，也被稱為“半行距”。（3）行距=line-height-font-size。（4）border以及l(fā)ine-height等傳統(tǒng)CSS屬性并沒有小數(shù)像素的概念。如果標注的是文字上邊距，則向下取整；如果是文字下 邊距，則向上取整。（5）對于純文本元素，line-height直接決定了最終的高度。但是，如果同時有替換元素，則line-height只能決定最小高度。（6）對于塊級元素，line-height對其本身是沒有任何作用的，我們平時改變line-height，塊級元素的高度跟著變化實際上是 通過改變塊級元素里面內(nèi)聯(lián)級別元素占據(jù)的高度實現(xiàn)的。（7）line-height的默認值是normal，還支持數(shù)值、百分比值以及長度值。為數(shù)值類型時，其最終的計算值是和當前font-si ze相乘后的值。為百分比值時，其最終的計算值是和當前font-size相乘后的值。為長度值時原意不變。（8）如果使用數(shù)值作為line-height的屬性值，那么所有的子元素繼承的都是這個值；但是，如果使用百分比值或者長度值作為 屬性值，那么所有的子元素繼承的是最終的計算值。（9）無論內(nèi)聯(lián)元素line-height如何設置，最終父級元素的高度都是由數(shù)值大的那個line-height決定的。（10）只要有“內(nèi)聯(lián)盒子”在，就一定會有“行框盒子”，就是每一行內(nèi)聯(lián)元素外面包裹的一層看不見的盒子。然后，重點來了，在每個 “行框盒子”前面有一個寬度為0的具有該元素的字體和行高屬性的看不見的“幽靈空白節(jié)點”。

81.vertical-align 的特殊性？

（1）vertical-align的默認值是baseline，即基線對齊，而基線的定義是字母x的下邊緣。因此，內(nèi)聯(lián)元素默認都是沿著字 母x的下邊緣對齊的。對于圖片等替換元素，往往使用元素本身的下邊緣作為基線。：一個inline-block元素，如果里面 沒有內(nèi)聯(lián)元素，或者overflow不是visible，則該元素的基線就是其margin底邊緣；否則其基線就是元素里面最后一行 內(nèi)聯(lián)元素的基線。（2）vertical-align:top就是垂直上邊緣對齊，如果是內(nèi)聯(lián)元素，則和這一行位置最高的內(nèi)聯(lián)元素的頂部對齊；如果display 計算值是table-cell的元素，我們不妨腦補成<td>元素，則和<tr>元素上邊緣對齊。（3）vertical-align:middle是中間對齊，對于內(nèi)聯(lián)元素，元素的垂直中心點和行框盒子基線往上1/2x-height處對齊。對 于table-cell元素，單元格填充盒子相對于外面的表格行居中對齊。（4）vertical-align支持數(shù)值屬性，根據(jù)數(shù)值的不同，相對于基線往上或往下偏移，如果是負值，往下偏移，如果是正值，往上 偏移。（5）vertical-align屬性的百分比值則是相對于line-height的計算值計算的。（6）vertical-align起作用是有前提條件的，這個前提條件就是：只能應用于內(nèi)聯(lián)元素以及display值為table-cell的元 素。（7）table-cell元素設置vertical-align垂直對齊的是子元素，但是其作用的并不是子元素，而是table-cell元素自身。

82.overflow 的特殊性？

（1）一個設置了overflow:hidden聲明的元素，假設同時存在border屬性和padding屬性，則當子元素內(nèi)容超出容器寬度 高度限制的時候，剪裁的邊界是borderbox的內(nèi)邊緣，而非paddingbox的內(nèi)邊緣。（2）HTML中有兩個標簽是默認可以產(chǎn)生滾動條的，一個是根元素<html>，另一個是文本域<textarea>。（3）滾動條會占用容器的可用寬度或高度。（4）元素設置了overflow:hidden聲明，里面內(nèi)容高度溢出的時候，滾動依然存在，僅僅滾動條不存在！

83.無依賴絕對定位是什么？

沒有設置left/top/right/bottom屬性值的絕對定位稱為“無依賴絕對定位”。無依賴絕對定位其定位的位置和沒有設置position:absolute時候的位置相關。

84.absolute 與 overflow 的關系？

（1）如果overflow不是定位元素，同時絕對定位元素和overflow容器之間也沒有定位元素，則overflow無法對absolute 元素進行剪裁。（2）如果overflow的屬性值不是hidden而是auto或者scroll，即使絕對定位元素高寬比overflow元素高寬還要大，也 都不會出現(xiàn)滾動條。（3）overflow元素自身transform的時候，Chrome和Opera瀏覽器下的overflow剪裁是無效的。

85.clip 裁剪是什么？

所謂“可訪問性隱藏”，指的是雖然內(nèi)容肉眼看不見，但是其他輔助設備卻能夠進行識別和訪問的隱藏。clip剪裁被我稱為“最佳可訪問性隱藏”的另外一個原因就是，它具有更強的普遍適應性，任何元素、任何場景都可以無障礙使用。

86.relative 的特殊性？

（1）相對定位元素的left/top/right/bottom的百分比值是相對于包含塊計算的，而不是自身。注意，雖然定位位移是相對自身，但是百分比值的計算值不是。（2）top和bottom這兩個垂直方向的百分比值計算跟height的百分比值是一樣的，都是相對高度計算的。同時，如果包含塊的高度是auto，那么計算值是0，偏移無效，也就是說，如果父元素沒有設定高度或者不是“格式化高度”，那么relative類似top:20%的代碼等同于top:0。（3）當相對定位元素同時應用對立方向定位值的時候，也就是top/bottom和left/right同時使用的時候，只有一個方向的定位屬性會起作用。而誰起作用則是與文檔流的順序有關的，默認的文檔流是自上而下、從左往右，因此top/bottom同時使用的時候，bottom失效；left/right同時使用的時候，right失效。

87.什么是層疊上下文？

層疊上下文，英文稱作stackingcontext，是HTML中的一個三維的概念。如果一個元素含有層疊上下文，我們可以理解為這個元 素在z軸上就“高人一等”。層疊上下文元素有如下特性：（1）層疊上下文的層疊水平要比普通元素高（原因后面會說明）。 （2）層疊上下文可以阻斷元素的混合模式。 （3）層疊上下文可以嵌套，內(nèi)部層疊上下文及其所有子元素均受制于外部的“層疊上下文”。 （4）每個層疊上下文和兄弟元素獨立，也就是說，當進行層疊變化或渲染的時候，只需要考慮后代元素。 （5）每個層疊上下文是自成體系的，當元素發(fā)生層疊的時候，整個元素被認為是在父層疊上下文的層疊順序中。層疊上下文的創(chuàng)建：（1）頁面根元素天生具有層疊上下文，稱為根層疊上下文。根層疊上下文指的是頁面根元素，可以看成是<html>元素。因此，頁面中所有的元素一定處于至少一個“層疊結界”中。（2）對于position值為relative/absolute以及Firefox/IE瀏覽器（不包括Chrome瀏覽器）下含有position:fixed聲明的定位元素，當其z-index值不是auto的時候，會創(chuàng)建層疊上下文。Chrome等WebKit內(nèi)核瀏覽器下，position:fixed元素天然層疊上下文元素，無須z-index為數(shù)值。根據(jù)我的測試，目前IE和Firefox仍是老套路。（3）其他一些CSS3屬性，比如元素的opacity值不是1。

88.什么是層疊水平？

層疊水平，英文稱作stackinglevel，決定了同一個層疊上下文中元素在z軸上的顯示順序。顯而易見，所有的元素都有層疊水平，包括層疊上下文元素，也包括普通元素。然而，對普通元素的層疊水平探討只局限在當前層疊上 下文元素中。

89.元素的層疊順序？

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

90.層疊準則？

（1）誰大誰上：當具有明顯的層疊水平標識的時候，如生效的z-index屬性值，在同一個層疊上下文領域，層疊水平值大的那一個覆蓋小的那一個。（2）后來居上：當元素的層疊水平一致、層疊順序相同的時候，在DOM流中處于后面的元素會覆蓋前面的元素。

91.font-weight 的特殊性？

如果使用數(shù)值作為font-weight屬性值，必須是100～900的整百數(shù)。因為這里的數(shù)值僅僅是外表長得像數(shù)值，實際上是一個具有特定含義的關鍵字，并且這里的數(shù)值關鍵字和字母關鍵字之間是有對應關系的。

92.text-indent 的特殊性？

（1）text-indent僅對第一行內(nèi)聯(lián)盒子內(nèi)容有效。（2）非替換元素以外的display計算值為inline的內(nèi)聯(lián)元素設置text-indent值無效，如果計算值inline-block/inli ne-table則會生效。（3）<input>標簽按鈕text-indent值無效。（4）<button>標簽按鈕text-indent值有效。（5）text-indent的百分比值是相對于當前元素的“包含塊”計算的，而不是當前元素。

93.letter-spacing 與字符間距？

letter-spacing可以用來控制字符之間的間距，這里說的“字符”包括英文字母、漢字以及空格等。letter-spacing具有以下一些特性。（1）繼承性。 （2）默認值是normal而不是0。雖然說正常情況下，normal的計算值就是0，但兩者還是有差別的，在有些場景下，letter-spacing會調(diào)整normal的計算值以實現(xiàn)更好的版面布局。 （3）支持負值，且值足夠大的時候，會讓字符形成重疊，甚至反向排列。 （4）和text-indent屬性一樣，無論值多大或多小，第一行一定會保留至少一個字符。 （5）支持小數(shù)值，即使0.1px也是支持的。 （6）暫不支持百分比值。

94.word-spacing 與單詞間距？

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

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

white-space屬性聲明了如何處理元素內(nèi)的空白字符，這類空白字符包括Space（空格）鍵、Enter（回車）鍵、Tab（制表符） 鍵產(chǎn)生的空白。因此，white-space可以決定圖文內(nèi)容是否在一行顯示（回車空格是否生效），是否顯示大段連續(xù)空白（空格是否 生效）等。其屬性值包括下面這些。 ?normal：合并空白字符和換行符。 ?pre：空白字符不合并，并且內(nèi)容只在有換行符的地方換行。 ?nowrap：該值和normal一樣會合并空白字符，但不允許文本環(huán)繞。 ?pre-wrap：空白字符不合并，并且內(nèi)容只在有換行符的地方換行，同時允許文本環(huán)繞。 ?pre-line：合并空白字符，但只在有換行符的地方換行，允許文本環(huán)繞。

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

相關知識點：

根據(jù)測試，一個元素如果display計算值為none，在IE瀏覽器下（IE8～IE11，更高版本不確定）依然會發(fā)送圖片請求，Fire fox瀏覽器不會，至于Chrome和Safari瀏覽器則似乎更加智能一點：如果隱藏元素同時又設置了background-image，則圖片 依然會去加載；如果是父元素的display計算值為none，則背景圖不會請求，此時瀏覽器或許放心地認為這個背景圖暫時是不會使 用的。如果不是background-image，而是<img>元素，則設置display:none在所有瀏覽器下依舊都會請求圖片資源。還需要注意的是如果設置的樣式?jīng)]有對應的元素，則background-image也不會加載。hover情況下的background-image，在觸 發(fā)時加載。

回答：

-（1）元素的背景圖片

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

-（2）img 標簽圖片任何情況下都會請求圖片

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

97.如何實現(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; }

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

98.常見的元素隱藏方式？

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

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

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

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

-（5）通過 z-index 負值，來使其他元素遮蓋住該元素，以此來實現(xiàn)隱藏。

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

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

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

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

利用絕對定位實現(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布局實現(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; }

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

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

相關資料：

/*兩欄布局一般指的是頁面中一共兩欄，左邊固定，右邊自適應的布局，一共有四種實現(xiàn)的方式。*/ /*以左邊寬度固定為200px為例*//*（1）利用浮動，將左邊元素寬度設置為200px，并且設置向左浮動。將右邊元素的margin-left設置為200px，寬度設置為auto（默認為auto，撐滿整個父元素）。*/ .outer {height: 100px; }.left {float: left;height: 100px;width: 200px;background: tomato; }.right {margin-left: 200px;width: auto;height: 100px;background: gold; }/*（2）第二種是利用flex布局，將左邊元素的放大和縮小比例設置為0，基礎大小設置為200px。將右邊的元素的放大比例設置為1，縮小比例設置為1，基礎大小設置為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）第三種是利用絕對定位布局的方式，將父級元素設置相對定位。左邊元素設置為absolute定位，并且寬度設置為 200px。將右邊元素的margin-left的值設置為200px。*/ .outer {position: relative;height: 100px; }.left {position: absolute;width: 200px;height: 100px;background: tomato; }.right {margin-left: 200px;height: 100px;background: gold; }/*（4）第四種還是利用絕對定位的方式，將父級元素設置為相對定位。左邊元素寬度設置為200px，右邊元素設置為絕對定位，左邊定位為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 展示》

回答：

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

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

-（1）利用浮動，將左邊元素寬度設置為 200px，并且設置向左浮動。將右邊元素的 margin-left 設置為 200px，寬度設置為 auto（默認為 auto，撐滿整個父元素）。

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

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

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

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

相關資料：

/*三欄布局一般指的是頁面中一共有三欄，左右兩欄寬度固定，中間自適應的布局，一共有五種實現(xiàn)方式。這里以左邊寬度固定為100px，右邊寬度固定為200px為例。*//*（1）利用絕對定位的方式，左右兩欄設置為絕對定位，中間設置對應方向大小的margin的值。*/ .outer {position: relative;height: 100px; }.left {position: absolute;width: 100px;height: 100px;background: tomato; }.right {position: absolute;top: 0;right: 0;width: 200px;height: 100px;background: gold; }.center {margin-left: 100px;margin-right: 200px;height: 100px;background: lightgreen; }/*（2）利用flex布局的方式，左右兩欄的放大和縮小比例都設置為0，基礎大小設置為固定的大小，中間一欄設置為auto*/ .outer {display: flex;height: 100px; }.left {flex: 00100px;background: tomato; }.right {flex: 00200px;background: gold; }.center {flex: auto;background: lightgreen; }/*（3）利用浮動的方式，左右兩欄設置固定大小，并設置對應方向的浮動。中間一欄設置左右兩個方向的margin值，注意這種方式，中間一欄必須放到最后。*/ .outer {height: 100px; }.left {float: left;width: 100px;height: 100px;background: tomato; }.right {float: right;width: 200px;height: 100px;background: gold; }.center {height: 100px;margin-left: 100px;margin-right: 200px;background: lightgreen; }/*（4）雙飛翼布局，利用浮動和負邊距來實現(xiàn)。父級元素設置左右的pedding，三列均設置向左浮動，中間一列放在最前面，寬度設置為父級元素的寬度，因此后面兩列都被擠到了下一行，通過設置margin負值將其移動到上一行，再利用相對定位，定位到兩邊。*/ .outer {height: 100px;padding-left: 100px;padding-right: 200px; }.left {position: relative;left: -100px;float: left;margin-left: -100%;width: 100px;height: 100px;background: tomato; }.right {position: relative;left: 200px;float: right;margin-left: -200px;width: 200px;height: 100px;background: gold; }.center {float: left;width: 100%;height: 100px;background: lightgreen; }/*（5）雙飛翼布局，雙飛翼布局相對于圣杯布局來說，左右位置的保留是通過中間列的margin值來實現(xiàn)的，而不是通過父元 素的pedding來實現(xiàn)的。本質上來說，也是通過浮動和外邊距負值來實現(xiàn)的。*/.outer {height: 100px; }.left {float: left;margin-left: -100%;width: 100px;height: 100px;background: tomato; }.right {float: left;margin-left: -200px;width: 200px;height: 100px;background: gold; }.wrapper {float: left;width: 100%;height: 100px;background: lightgreen; }.center {margin-left: 100px;margin-right: 200px;height: 100px; }

《三欄布局 demo 展示》

回答：

三欄布局一般指的是頁面中一共有三欄，左右兩欄寬度固定，中間自適應的布局，一共有五種實現(xiàn)方式。這里以左邊寬度固定為100px，右邊寬度固定為200px為例。（1）利用絕對定位的方式，左右兩欄設置為絕對定位，中間設置對應方向大小的margin的值。（2）利用flex布局的方式，左右兩欄的放大和縮小比例都設置為0，基礎大小設置為固定的大小，中間一欄設置為auto。（3）利用浮動的方式，左右兩欄設置固定大小，并設置對應方向的浮動。中間一欄設置左右兩個方向的margin值，注意這種方式，中間一欄必須放到最后。（4）圣杯布局，利用浮動和負邊距來實現(xiàn)。父級元素設置左右的pedding，三列均設置向左浮動，中間一列放在最前面，寬度設置為父級元素的寬度，因此后面兩列都被擠到了下一行，通過設置margin負值將其移動到上一行，再利用相對定位，定位到兩邊。雙飛翼布局中間列的寬度不能小于兩邊任意列的寬度，而雙飛翼布局則不存在這個問題。（5）雙飛翼布局，雙飛翼布局相對于圣杯布局來說，左右位置的保留是通過中間列的margin值來實現(xiàn)的，而不是通過父元素的pedding來實現(xiàn)的。本質上來說，也是通過浮動和外邊距負值來實現(xiàn)的。

102.實現(xiàn)一個寬高自適應的正方形

/*1.第一種方式是利用vw來實現(xiàn)*/ .square {width: 10%;height: 10vw;background: tomato; }/*2.第二種方式是利用元素的margin/padding百分比是相對父元素width的性質來實現(xiàn)*/ .square {width: 20%;height: 0;padding-top: 20%;background: orange; }/*3.第三種方式是利用子元素的margin-top的值來實現(xiàn)的*/ .square {width: 30%;overflow: hidden;background: yellow; }.square::after {content: "";display: block;margin-top: 100%; }

《自適應正方形 demo 展示》

103.實現(xiàn)一個三角形

/*三角形的實現(xiàn)原理是利用了元素邊框連接處的等分原理。*/ .triangle {width: 0;height: 0;border-width: 100px;border-style: solid;border-color: tomatotransparenttransparenttransparent; }

《三角形 demo 展示》

104.一個自適應矩形，水平垂直居中，且寬高比為 2:1

/*實現(xiàn)原理參考自適應正方形和水平居中方式*/ .box {position: absolute;top: 0;right: 0;left: 0;bottom: 0;margin: auto;width: 10%;height: 0;padding-top: 20%;background: tomato; }

推薦

筆者再次墻裂推薦收藏這篇原文，轉載于?CavsZhouyou - ???? 前端面試復習筆記，這個倉庫是原作者校招時的前端復習筆記，主要總結一些比較重要的知識點和前端面試問題，希望對大家有所幫助。

最后如果文章和筆記能帶您一絲幫助或者啟發(fā)，請不要吝嗇你的贊和收藏，你的肯定是我前進的最大動力????

最后

看完點個在看，分享一下吧，讓更多的朋友能夠看到。如果你喜歡前端開發(fā)博客的分享，就給公號標個星吧，這樣就不會錯過我的文章了。

好文和朋友一起看~

總結

以上是生活随笔為你收集整理的104道 CSS 面试题，助你查漏补缺的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。