104道 CSS 面試題，助你查漏補缺

CSS 面試知識點總結

最近在整理 CSS 的時候發現遇到了不少面試中常見的面試題，本部分主要原做者在 Github 等各大論壇收錄的 CSS 相關知識和一些相關面試題時所作的筆記，分享這份總結給你們，對你們對 CSS 的能夠來一次全方位的檢漏和排查，感謝原做者 CavsZhouyou 的付出，原文連接放在文章最下方，若是出現錯誤，但願你們共同指出！

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

相關知識點：

（1）有兩種盒子模型：IE盒模型（border-box）、W3C標準盒模型（content-box）
（2）盒模型：分爲內容（content）、填充（padding）、邊界（margin）、邊框（border）四個部分

IE盒模型和W3C標準盒模型的區別：

（1）W3C標準盒模型：屬性width，height只包含內容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盒模型的區別在於設置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 中雙冒號和單冒號有什麼區別？解釋一下這 2 個僞元素的做用。

相關知識點：

單冒號（:）用於CSS3僞類，雙冒號（::）用於CSS3僞元素。（僞元素由雙冒號和僞元素名稱組成）
雙冒號是在當前規範中引入的，用於區分僞類和僞元素。不過瀏覽器須要同時支持舊的已經存在的僞元素寫法，
好比:first-line、:first-letter、:before、:after等，
而新的在CSS3中引入的僞元素則不容許再支持舊的單冒號的寫法。

想讓插入的內容出如今其它內容前，使用::before，否者，使用::after；
在代碼順序上，::after生成的內容也比::before生成的內容靠後。
若是按堆棧視角，::after生成的內容會在::before生成的內容之上。

回答：

在css3中使用單冒號來表示僞類，用雙冒號來表示僞元素。可是爲了兼容已有的僞元素的寫法，在一些瀏覽器中也能夠使用單冒號
來表示僞元素。

僞類通常匹配的是元素的一些特殊狀態，如hover、link等，而僞元素通常匹配的特殊的位置，好比after、before等。

4.僞類與僞元素的區別

css引入僞類和僞元素概念是爲了格式化文檔樹之外的信息。也就是說，僞類和僞元素是用來修飾不在文檔樹中的部分，好比，一句
話中的第一個字母，或者是列表中的第一個元素。

僞類用於當已有的元素處於某個狀態時，爲其添加對應的樣式，這個狀態是根據用戶行爲而動態變化的。好比說，當用戶懸停在指定的
元素時，咱們能夠經過:hover來描述這個元素的狀態。

僞元素用於建立一些不在文檔樹中的元素，併爲其添加樣式。它們容許咱們爲元素的某些部分設置樣式。好比說，咱們能夠經過::be
fore來在一個元素前增長一些文本，併爲這些文本添加樣式。雖然用戶能夠看到這些文本，可是這些文本實際上不在文檔樹中。

有時你會發現僞元素使用了兩個冒號（::）而不是一個冒號（:）。這是CSS3的一部分，並嘗試區分僞類和僞元素。大多數瀏覽
器都支持這兩個值。按照規則應該使用（::）而不是（:），從而區分僞類和僞元素。可是，因爲在舊版本的W3C規範並未對此進行
特別區分，所以目前絕大多數的瀏覽器都支持使用這兩種方式表示僞元素。

詳細資料能夠參考：
《總結僞類與僞元素》

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 優先級算法如何計算？

相關知識點：

CSS的優先級是根據樣式聲明的特殊性值來判斷的。

選擇器的特殊性值分爲四個等級，以下：

（1）標籤內選擇符x,0,0,0
（2）ID選擇符0,x,0,0
（3）class選擇符/屬性選擇符/僞類選擇符    0,0,x,0
（4）元素和僞元素選擇符0,0,0,x

計算方法：

（1）每一個等級的初始值爲0
（2）每一個等級的疊加爲選擇器出現的次數相加
（3）不可進位，好比0,99,99,99
（4）依次表示爲：0,0,0,0
（5）每一個等級計數之間沒關聯
（6）等級判斷從左向右，若是某一位數值相同，則判斷下一位數值
（7）若是兩個優先級相同，則最後出現的優先級高，!important也適用
（8）通配符選擇器的特殊性值爲：0,0,0,0
（9）繼承樣式優先級最低，通配符樣式優先級高於繼承樣式
（10）!important（權重），它沒有特殊性值，但它的優先級是最高的，爲了方便記憶，能夠認爲它的特殊性值爲1,0,0,0,0。

計算實例：

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


注意：
（1）樣式應用時，css會先查看規則的權重（!important），加了權重的優先級最高，當權重相同的時候，會比較規則的特殊性。

（2）特殊性值越大的聲明優先級越高。

（3）相同特殊性值的聲明，根據樣式引入的順序，後聲明的規則優先級高（距離元素出現最近的）

回答：

判斷優先級時，首先咱們會判斷一條屬性聲明是否有權重，也就是是否在聲明後面加上了!important。一條聲明若是加上了權重，
那麼它的優先級就是最高的，前提是它以後再也不出現相同權重的聲明。若是權重相同，咱們則須要去比較匹配規則的特殊性。

一條匹配規則通常由多個選擇器組成，一條規則的特殊性由組成它的選擇器的特殊性累加而成。選擇器的特殊性能夠分爲四個等級，
第一個等級是行內樣式，爲1000，第二個等級是id選擇器，爲0100，第三個等級是類選擇器、僞類選擇器和屬性選擇器，爲0010，
第四個等級是元素選擇器和僞元素選擇器，爲0001。規則中每出現一個選擇器，就將它的特殊性進行疊加，這個疊加只限於對應的等
級的疊加，不會產生進位。選擇器特殊性值的比較是從左向右排序的，也就是說以1開頭的特殊性值比全部以0開頭的特殊性值要大。
好比說特殊性值爲1000的的規則優先級就要比特殊性值爲0999的規則高。若是兩個規則的特殊性值相等的時候，那麼就會根據它們引
入的順序，後出現的規則的優先級最高。

對於組合聲明的特殊性值計算能夠參考：
《CSS 優先級計算及應用》
《CSS 優先級計算規則》

7.關於僞類 LVHA 的解釋?

a標籤有四種狀態：連接訪問前、連接訪問後、鼠標滑過、激活，分別對應四種僞類:link、:visited、:hover、:active；

當連接未訪問過期：

（1）當鼠標滑過a連接時，知足:link和:hover兩種狀態，要改變a標籤的顏色，就必須將:hover僞類在:link僞
類後面聲明；
（2）當鼠標點擊激活a連接時，同時知足:link、:hover、:active三種狀態，要顯示a標籤激活時的樣式（:active），
必須將:active聲明放到:link和:hover以後。所以得出LVHA這個順序。

當連接訪問過期，狀況基本同上，只不過須要將:link換成:visited。

這個順序能不能變？能夠，但也只有:link和:visited能夠交換位置，由於一個連接要麼訪問過要麼沒訪問過，不可能同時知足，
也就不存在覆蓋的問題。

8.CSS3 新增僞類有那些？

（1）elem:nth-child(n)選中父元素下的第n個子元素，而且這個子元素的標籤名爲elem，n能夠接受具體的數
值，也能夠接受函數。

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

（3）elem:last-child選中最後一個子元素。

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

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

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

（7）elem:last-of-type選中父元素下最後一個elem類型元素。

（8）elem:only-of-type若是父元素下的子元素只有一個elem類型元素，則選中該元素。

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

（10）elem:target選擇當前活動的elem元素。

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

（12）:enabled    控制表單控件的禁用狀態。

（13）:disabled        控制表單控件的禁用狀態。

(14):checked單選框或複選框被選中。

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

9.如何居中 div？

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

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

-水平居中，利用 text-align:center 實現

.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來實現元素的水平居中。

（2）利用絕對定位，設置四個方向的值都爲0，並將margin設置爲auto，因爲寬高固定，所以對應方向實現平分，能夠實現水
平和垂直方向上的居中。

（3）利用絕對定位，先將元素的左上角經過top:50%和left:50%定位到頁面的中心，而後再經過margin負值來調整元素
的中心點到頁面的中心。

（4）利用絕對定位，先將元素的左上角經過top:50%和left:50%定位到頁面的中心，而後再經過translate來調整元素
的中心點到頁面的中心。

（5）使用flex佈局，經過align-items:center和justify-content:center設置容器的垂直和水平方向上爲居中對
齊，而後它的子元素也能夠實現垂直和水平的居中。

對於寬高不定的元素，上面的後面兩種方法，能夠實現元素的垂直和水平的居中。

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

block    塊類型。默認寬度爲父元素寬度，可設置寬高，換行顯示。
none    元素不顯示，並從文檔流中移除。
inline    行內元素類型。默認寬度爲內容寬度，不可設置寬高，同行顯示。
inline-block默認寬度爲內容寬度，能夠設置寬高，同行顯示。
list-item    像塊類型元素同樣顯示，並添加樣式列表標記。
table    此元素會做爲塊級表格來顯示。
inherit    規定應該從父元素繼承display屬性的值。

詳細資料能夠參考：
《CSSdisplay 屬性》

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

相關知識點：

absolute
生成絕對定位的元素，相對於值不爲static的第一個父元素的paddingbox進行定位，也能夠理解爲離本身這一級元素最近的
一級position設置爲absolute或者relative的父元素的paddingbox的左上角爲原點的。

fixed（老IE不支持）
生成絕對定位的元素，相對於瀏覽器窗口進行定位。

relative
生成相對定位的元素，相對於其元素自己所在正常位置進行定位。

static
默認值。沒有定位，元素出如今正常的流中（忽略top,bottom,left,right,z-index聲明）。

inherit
規定從父元素繼承position屬性的值。

回答：

relative定位的元素，是相對於元素自己的正常位置來進行定位的。

absolute定位的元素，是相對於它的第一個position值不爲static的祖先元素的paddingbox來進行定位的。這句話
咱們能夠這樣來理解，咱們首先須要找到絕對定位元素的一個position的值不爲static的祖先元素，而後相對於這個祖先元
素的paddingbox來定位，也就是說在計算定位距離的時候，padding的值也要算進去。

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

新增各類CSS選擇器    （:not(.input)：全部class不是「input」的節點）
圓角        （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佈局。行內元素也能夠使用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屬性定義項目的排列順序。數值越小，排列越靠前，默認爲0。

flex-grow屬性定義項目的放大比例，默認爲0，即若是存在剩餘空間，也不放大。

flex-shrink屬性定義了項目的縮小比例，默認爲1，即若是空間不足，該項目將縮小。

flex-basis屬性定義了在分配多餘空間以前，項目佔據的主軸空間。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的默認
值爲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來規定當一行排列不下時的換行方式。

對於容器中的項目，咱們能夠使用order屬性來指定項目的排列順序，還能夠使用flex-grow來指定當排列空間有剩餘的時候，
項目的放大比例。還能夠使用flex-shrink來指定當排列空間不足時，項目的縮小比例。

詳細資料能夠參考：
《Flex 佈局教程：語法篇》
《Flex 佈局教程：實例篇》

14.用純 CSS 建立一個三角形的原理是什麼？

採用的是相鄰邊框鏈接處的均分原理。
  將元素的寬高設爲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 多列等高如何實現？

（1）利用padding-bottom|margin-bottom正負值相抵，不會影響頁面佈局的特色。設置父容器設置超出隱藏（overflow:
hidden），這樣父容器的高度就仍是它裏面的列沒有設定padding-bottom時的高度，當它裏面的任一列高度增長了，則
父容器的高度被撐到裏面最高那列的高度，其餘比這列矮的列會用它們的padding-bottom補償這部分高度差。

（2）利用table-cell全部單元格高度都相等的特性，來實現多列等高。

（3）利用flex佈局中項目align-items屬性默認爲stretch，若是項目未設置高度或設爲auto，將佔滿整個容器的高度
的特性，來實現多列等高。

詳細資料能夠參考：
《前端應該掌握的 CSS 實現多列等高佈局》
《CSS：多列等高佈局》

17.常常遇到的瀏覽器的兼容性有哪些？緣由，解決方法是什麼，經常使用 hack 的技巧？

（1）png24位的圖片在iE6瀏覽器上出現背景
解決方案：作成PNG8，也能夠引用一段腳本處理。

（2）瀏覽器默認的margin和padding不一樣
解決方案：加一個全局的*{margin:0;padding:0;}來統一。

（3）IE6雙邊距bug：在IE6下，若是對元素設置了浮動，同時又設置了margin-left或
margin-right，margin值會加倍。

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

這種狀況之下IE會產生20px的距離
解決方案：在float的標籤樣式控制中加入_display:inline;將其轉化爲行內屬性。(_這個符號只有ie6會識別)

（4）漸進識別的方式，從整體中逐漸排除局部。
首先，巧妙的使用"\9"這一標記，將IE遊覽器從全部狀況中分離出來。
接着，再次使用"+"將IE8和IE七、IE6分離開來，這樣IE8已經獨立識別。
.bb{
background-color:#f1ee18;/*全部識別*/
.background-color:#00deff\9;/*IE六、七、8識別*/
+background-color:#a200ff;/*IE六、7識別*/
_background-color:#1e0bd1;/*IE6識別*/
}

（5）IE下，能夠使用獲取常規屬性的方法來獲取自定義屬性，也能夠使用getAttribute()獲取自定義
屬性；Firefox下，只能使用getAttribute()獲取自定義屬性
解決方法：統一經過getAttribute()獲取自定義屬性。

（6）IE下，event對象有x、y屬性，可是沒有pageX、pageY屬性;Firefox下，event對象有
pageX、pageY屬性，可是沒有x、y屬性。
解決方法：（條件註釋）缺點是在IE瀏覽器下可能會增長額外的HTTP請求數。

（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樣式就不出現了，被點擊訪問過的超連接樣式再也不具備hover和active了
解決方法：改變CSS屬性的排列順序L-V-H-A

（9）怪異模式問題：漏寫DTD聲明，Firefox仍然會按照標準模式來解析網頁，但在IE中會觸發怪異模
式。爲避免怪異模式給咱們帶來沒必要要的麻煩，最好養成書寫DTD聲明的好習慣。

18.li 與 li 之間有看不見的空白間隔是什麼緣由引發的？有什麼解決辦法？

瀏覽器會把inline元素間的空白字符（空格、換行、Tab等）渲染成一個空格。而爲了美觀。咱們一般是一個<li>放在一行，
這致使<li>換行後產生換行字符，它變成一個空格，佔用了一個字符的寬度。

解決辦法：

（1）爲<li>設置float:left。不足：有些容器是不能設置浮動，如左右切換的焦點圖等。

（2）將全部<li>寫在同一行。不足：代碼不美觀。

（3）將<ul>內的字符尺寸直接設爲0，即font-size:0。不足：<ul>中的其餘字符尺寸也被設爲0，須要額外從新設定其餘
字符尺寸，且在Safari瀏覽器依然會出現空白間隔。

（4）消除<ul>的字符間隔letter-spacing:-8px，不足：這也設置了<li>內的字符間隔，所以須要將<li>內的字符
間隔設爲默認letter-spacing:normal。

詳細資料能夠參考：
《li 與 li 之間有看不見的空白間隔是什麼緣由引發的？》

19.爲何要初始化 CSS 樣式？

-由於瀏覽器的兼容問題，不一樣瀏覽器對有些標籤的默認值是不一樣的，若是沒對CSS初始化每每會出現瀏覽器之間的頁面顯示差別。

-固然，初始化樣式會對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元素，則規則略複雜：
•假設給內聯元素的先後各生成一個寬度爲0的內聯盒子（inlinebox），則這兩個內聯盒子的paddingbox外面的包
圍盒就是內聯元素的「包含塊」；
•若是該內聯元素被跨行分割了，那麼「包含塊」是未定義的，也就是CSS2.1規範並無明肯定義，瀏覽器自行發揮
不然，「包含塊」由該祖先的paddingbox邊界造成。

若是沒有符合條件的祖先元素，則「包含塊」是「初始包含塊」。

21.CSS 裏的 visibility 屬性有個 collapse 屬性值是幹嗎用的？在不一樣瀏覽器下之後什麼區別？

（1）對於通常的元素，它的表現跟visibility：hidden;是同樣的。元素是不可見的，但此時仍佔用頁面空間。

（2）但例外的是，若是這個元素是table相關的元素，例如table行，tablegroup，table列，tablecolumngroup，它的
表現卻跟display:none同樣，也就是說，它們佔用的空間也會釋放。

在不一樣瀏覽器下的區別：

在谷歌瀏覽器裏，使用collapse值和使用hidden值沒有什麼區別。

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

詳細資料能夠參考：
《CSS 裏的 visibility 屬性有個不爲人知的屬性值：collapse》

22.width:auto 和 width:100%的區別

通常而言

width:100%會使元素box的寬度等於父元素的contentbox的寬度。

width:auto會使元素撐滿整個父元素，margin、border、padding、content區域會自動分配水平空間。

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

絕對定位元素的寬高百分比是相對於臨近的position不爲static的祖先元素的paddingbox來計算的。

非絕對定位元素的寬高百分比則是相對於父元素的contentbox來計算的。

24.簡單介紹使用圖片 base64 編碼的優勢和缺點。

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

使用base64的優勢是：

（1）減小一個圖片的HTTP請求

使用base64的缺點是：

（1）根據base64的編碼原理，編碼後的大小會比原文件大小大1/3，若是把大圖片編碼到html/css中，不只會形成文件體
積的增長，影響文件的加載速度，還會增長瀏覽器對html或css文件解析渲染的時間。

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

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

通常一些網站的小圖標能夠使用base64圖片來引入。

詳細資料能夠參考：
《玩轉圖片 base64 編碼》
《前端開發中，使用 base64 圖片的弊端是什麼？》
《小 tip:base64:URL 背景圖片與 web 頁面性能優化》

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

（1）首先咱們判斷display屬性是否爲none，若是爲none，則position和float屬性的值不影響元素最後的表現。

（2）而後判斷position的值是否爲absolute或者fixed，若是是，則float屬性失效，而且display的值應該被
設置爲table或者block，具體轉換須要看初始轉換值。

（3）若是position的值不爲absolute或者fixed，則判斷float屬性的值是否爲none，若是不是，則display
的值則按上面的規則轉換。注意，若是position的值爲relative而且float屬性的值存在，則relative相對
於浮動後的最終位置定位。

（4）若是float的值爲none，則判斷元素是否爲根元素，若是是根元素則display屬性按照上面的規則轉換，若是不是，
則保持指定的display屬性值不變。

總的來講，能夠把它看做是一個相似優先級的機制，"position:absolute"和"position:fixed"優先級最高，有它存在
的時候，浮動不起做用，'display'的值也須要調整；其次，元素的'float'特性的值不是"none"的時候或者它是根元素
的時候，調整'display'的值；最後，非根元素，而且非浮動元素，而且非絕對定位的元素，'display'特性值同設置值。

詳細資料能夠參考：
《position 跟 display、margincollapse、overflow、float 這些特性相互疊加後會怎麼樣？》

26.margin 重疊問題的理解。

相關知識點：

塊級元素的上外邊距（margin-top）與下外邊距（margin-bottom）有時會合併爲單個外邊距，這樣的現象稱爲「margin合
並」。

產生摺疊的必備條件：margin必須是鄰接的!

而根據w3c規範，兩個margin是鄰接的必須知足如下條件：

•必須是處於常規文檔流（非float和絕對定位）的塊級盒子，而且處於同一個BFC當中。
•沒有線盒，沒有空隙，沒有padding和border將他們分隔開
•都屬於垂直方向上相鄰的外邊距，能夠是下面任意一種狀況
•元素的margin-top與其第一個常規文檔流的子元素的margin-top
•元素的margin-bottom與其下一個常規文檔流的兄弟元素的margin-top
•height爲auto的元素的margin-bottom與其最後一個常規文檔流的子元素的margin-bottom
•高度爲0而且最小高度也爲0，不包含常規文檔流的子元素，而且自身沒有創建新的BFC的元素的margin-top
和margin-bottom


margin合併的3種場景：

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

解決辦法：
•設置塊狀格式化上下文元素（BFC）

（2）父級和第一個/最後一個子元素的margin合併。

解決辦法：

對於margin-top合併，能夠進行以下操做（知足一個條件便可）：
•父元素設置爲塊狀格式化上下文元素；
•父元素設置border-top值；
•父元素設置padding-top值；
•父元素和第一個子元素之間添加內聯元素進行分隔。

對於margin-bottom合併，能夠進行以下操做（知足一個條件便可）：
•父元素設置爲塊狀格式化上下文元素；
•父元素設置border-bottom值；
•父元素設置padding-bottom值；
•父元素和最後一個子元素之間添加內聯元素進行分隔；
•父元素設置height、min-height或max-height。

（3）空塊級元素的margin合併。

解決辦法：
•設置垂直方向的border；
•設置垂直方向的padding；
•裏面添加內聯元素（直接Space鍵空格是沒用的）；
•設置height或者min-height。

回答：

margin重疊指的是在垂直方向上，兩個相鄰元素的margin發生重疊的狀況。

通常來講能夠分爲四種情形：

第一種是相鄰兄弟元素的marin-bottom和margin-top的值發生重疊。這種狀況下咱們能夠經過設置其中一個元素爲BFC
來解決。

第二種是父元素的margin-top和子元素的margin-top發生重疊。它們發生重疊是由於它們是相鄰的，因此咱們能夠經過這
一點來解決這個問題。咱們能夠爲父元素設置border-top、padding-top值來分隔它們，固然咱們也能夠將父元素設置爲BFC
來解決。

第三種是高度爲auto的父元素的margin-bottom和子元素的margin-bottom發生重疊。它們發生重疊一個是由於它們相
鄰，一個是由於父元素的高度不固定。所以咱們能夠爲父元素設置border-bottom、padding-bottom來分隔它們，也能夠爲
父元素設置一個高度，max-height和min-height也能解決這個問題。固然將父元素設置爲BFC是最簡單的方法。

第四種狀況，是沒有內容的元素，自身的margin-top和margin-bottom發生的重疊。咱們能夠經過爲其設置border、pa
dding或者高度來解決這個問題。

27.對 BFC 規範（塊級格式化上下文：blockformattingcontext）的理解？

相關知識點：

塊格式化上下文（BlockFormattingContext，BFC）是Web頁面的可視化CSS渲染的一部分，是佈局過程當中生成塊級盒
子的區域，也是浮動元素與其餘元素的交互限定區域。

通俗來說

•BFC是一個獨立的佈局環境，能夠理解爲一個容器，在這個容器中按照必定規則進行物品擺放，而且不會影響其它環境中的物品。
•若是一個元素符合觸發BFC的條件，則BFC中的元素佈局不受外部影響。

建立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以後，那麼它內部元素產生的佈局不會影響到外部元素，外部元素的佈局也
不會影響到BFC中的內部元素。一個BFC就像是一個隔離區域，和其餘區域互不影響。

通常來講根元素是一個BFC區域，浮動和絕對定位的元素也會造成BFC，display屬性的值爲inline-block、flex這些
屬性時也會建立BFC。還有就是元素的overflow的值不爲visible時都會建立BFC。

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

28.IFC 是什麼？

IFC指的是行級格式化上下文，它有這樣的一些佈局規則：

（1）行級上下文內部的盒子會在水平方向，一個接一個地放置。
（2）當一行不夠的時候會自動切換到下一行。
（3）行級上下文的高度由內部最高的內聯盒子的高度決定。

詳細資料能夠參考：

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

29.請解釋一下爲何須要清除浮動？清除浮動的方式

浮動元素能夠左右移動，直到遇到另外一個浮動元素或者遇到它外邊緣的包含框。浮動框不屬於文檔流中的普通流，當元素浮動以後，
不會影響塊級元素的佈局，只會影響內聯元素佈局。此時文檔流中的普通流就會表現得該浮動框不存在同樣的佈局模式。當包含框
的高度小於浮動框的時候，此時就會出現「高度塌陷」。

清除浮動是爲了清除使用浮動元素產生的影響。浮動的元素，高度會塌陷，而高度的塌陷使咱們頁面後面的佈局不能正常顯示。

清除浮動的方式

（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等僞元素默認都是內聯水平，這就是藉助僞元素清除浮動影響時須要設置disp
lay屬性值的緣由。

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

清除浮動，觸發hasLayout；
zoom屬性是IE瀏覽器的專有屬性，它能夠設置或檢索對象的縮放比例。解決ie下比較奇葩的bug。譬如外邊距（margin）
的重疊，浮動清除，觸發ie的haslayout屬性等。

前因後果大概以下：
當設置了zoom的值以後，所設置的元素就會就會擴大或者縮小，高度寬度就會從新計算了，這裏一旦改變zoom值時其實也會發
生從新渲染，運用這個原理，也就解決了ie下子元素浮動時候父元素不隨着自動擴大的問題。

zoom屬性是IE瀏覽器的專有屬性，火狐和老版本的webkit核心的瀏覽器都不支持這個屬性。然而，zoom如今已經被逐步標
準化，出如今CSS3.0規範草案中。

目前非ie因爲不支持這個屬性，它們又是經過什麼屬性來實現元素的縮放呢？能夠經過css3裏面的動畫屬性scale進行縮放。

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

假設你如今正用一臺顯示設備來閱讀這篇文章，同時你也想把它投影到屏幕上，或者打印出來，而顯示設備、屏幕投影和打印等這些
媒介都有本身的特色，CSS就是爲文檔提供在不一樣媒介上展現的適配方法

當媒體查詢爲真時，相關的樣式表或樣式規則會按照正常的級聯規被應用。當媒體查詢返回假，標籤上帶有媒體查詢的樣式表仍將被
下載（只不過不會被應用）。

包含了一個媒體類型和至少一個使用寬度、高度和顏色等媒體屬性來限制樣式表範圍的表達式。CSS3加入的媒體查詢使得無需修改
內容即可以使樣式應用於某些特定的設備範圍。

詳細資料能夠參考：
《CSS3@media 查詢》
《響應式佈局和自適應佈局詳解》

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

SASS（SASS、LESS沒有本質區別，只由於團隊前端都是用的SASS）

34.CSS 優化、提升性能的方法有哪些？

加載性能：

（1）css壓縮：將寫好的css進行打包壓縮，能夠減小不少的體積。
（2）css單同樣式：當須要下邊距和左邊距的時候，不少時候選擇:margin:top0bottom0;但margin-bottom:bot
tom;margin-left:left;執行的效率更高。
（3）減小使用@import,而建議使用link，由於後者在頁面加載時一塊兒加載，前者是等待頁面加載完成以後再進行加載。

選擇器性能：

（1）關鍵選擇器（keyselector）。選擇器的最後面的部分爲關鍵選擇器（即用來匹配目標元素的部分）。CSS選擇符是從右到
左進行匹配的。當使用後代選擇器的時候，瀏覽器會遍歷全部子元素來肯定是不是指定的元素等等；

（2）若是規則擁有ID選擇器做爲其關鍵選擇器，則不要爲規則增長標籤。過濾掉無關的規則（這樣樣式系統就不會浪費時間去匹
配它們了）。

（3）避免使用通配規則，如*{}計算次數驚人！只對須要用到的元素進行選擇。

（4）儘可能少的去對標籤進行選擇，而是用class。

（5）儘可能少的去使用後代選擇器，下降選擇器的權重值。後代選擇器的開銷是最高的，儘可能將選擇器的深度降到最低，最高不要超過
三層，更多的使用類來關聯每個標籤元素。

（6）瞭解哪些屬性是能夠經過繼承而來的，而後避免對這些屬性重複指定規則。

渲染性能：

（1）慎重使用高性能屬性：浮動、定位。

（2）儘可能減小頁面重排、重繪。

（3）去除空規則：｛｝。空規則的產生緣由通常來講是爲了預留樣式。去除這些空規則無疑能減小css文檔體積。

（4）屬性值爲0時，不加單位。

（5）屬性值爲浮動小數0.**，能夠省略小數點以前的0。

（6）標準化各類瀏覽器前綴：帶瀏覽器前綴的在前。標準屬性在後。

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

（8）選擇器優化嵌套，儘可能避免層級過深。

（9）css雪碧圖，同一頁面相近部分的小圖標，方便使用，減小頁面的請求次數，可是同時圖片自己會變大，使用時，優劣考慮清
楚，再使用。

（10）正確使用display的屬性，因爲display的做用，某些樣式組合會無效，徒增樣式體積的同時也影響解析性能。

（11）不濫用web字體。對於中文網站來講WebFonts可能很陌生，國外卻很流行。webfonts一般體積龐大，並且一些瀏
覽器在下載webfonts時會阻塞頁面渲染損傷性能。

可維護性、健壯性：

（1）將具備相同屬性的樣式抽離出來，整合並經過class在頁面中進行使用，提升css的可維護性。
（2）樣式與內容分離：將css代碼定義到外部css中。

詳細資料能夠參考：
《CSS 優化、提升性能的方法有哪些？》
《CSS 優化，提升性能的方法》

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

樣式系統從關鍵選擇器開始匹配，而後左移查找規則選擇器的祖先元素。只要選擇器的子樹一直在工做，樣式系統就會持續左移，直
到和規則匹配，或者是由於不匹配而放棄該規則。

試想一下，若是採用從左至右的方式讀取CSS規則，那麼大多數規則讀到最後（最右）纔會發現是不匹配的，這樣作會費時耗能，
最後有不少都是無用的；而若是採起從右向左的方式，那麼只要發現最右邊選擇器不匹配，就能夠直接捨棄了，避免了許多無效匹配。

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

36.在網頁中應該使用奇數仍是偶數的字體？爲何呢？

（1）偶數字號相對更容易和web設計的其餘部分構成比例關係。好比：當我用了14px的正文字號，我可能會在一些地方用14
×0.5=7px的margin，在另外一些地方用14×1.5=21px的標題字號。
（2）瀏覽器緣故，低版本的瀏覽器ie6會把奇數字體強制轉化爲偶數，即13px渲染爲14px。
（3）系統差異，早期的Windows裏，中易宋體點陣只有12和1四、1五、16px，惟獨缺乏13px。

詳細資料能夠參考：
《談談網頁中使用奇數字體和偶數字體》
《如今網頁設計中的爲何少有人用 11px、13px、15px 等奇數的字體？》

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

margin是用來隔開元素與元素的間距；padding是用來隔開元素與內容的間隔。
margin用於佈局分開元素使元素與元素互不相干。
padding用於元素與內容之間的間隔，讓內容（文字）與（包裹）元素之間有一段距離。

什麼時候應當使用margin：
•須要在border外側添加空白時。
•空白處不須要背景（色）時。
•上下相連的兩個盒子之間的空白，須要相互抵消時。如15px+20px的margin，將獲得20px的空白。

什麼時候應當時用padding：
•須要在border內測添加空白時。
•空白處須要背景（色）時。
•上下相連的兩個盒子之間的空白，但願等於二者之和時。如15px+20px的padding，將獲得35px的空白。

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

個人理解是把經常使用的css樣式單獨作成css文件……通用的和業務相關的分離出來，通用的作成樣式模塊兒共享，業務相關的，放
進業務相關的庫裏面作成對應功能的模塊兒。

詳細資料能夠參考：
《CSS 規範-分類方法》

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.爲何不建議使用統配符初始化 css 樣式。

採用*{pading:0;margin:0;}這樣的寫法好處是寫起來很簡單，可是是通配符，須要把全部的標籤都遍歷一遍，當網站較大時，
樣式比較多，這樣寫就大大的增強了網站運行的負載，會使網站加載的時候須要很長一段時間，所以通常大型的網站都有分層次的一
套初始化樣式。

出於性能的考慮，並非全部標籤都會有padding和margin，所以對常見的具備默認padding和margin的元素初始化即
可，並不需使用通配符*來初始化。

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

（1）內聯元素也能夠做爲「包含塊」所在的元素；

（2）「包含塊」所在的元素不是父塊級元素，而是最近的position不爲static的祖先元素或根元素；

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

42.對於 hasLayout 的理解？

hasLayout是IE特有的一個屬性。不少的IE下的cssbug都與其息息相關。在IE中，一個元素要麼本身對自身的內容進
行計算大小和組織，要麼依賴於父元素來計算尺寸和組織內容。當一個元素的hasLayout屬性值爲true時，它負責對本身和可
能的子孫元素進行尺寸計算和定位。雖然這意味着這個元素須要花更多的代價來維護自身和裏面的內容，而不是依賴於祖先元素來完
成這些工做。

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

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

若是是height的話，是相對於包含塊的高度。

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

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

原理：有點相似於輪播，總體的元素一直排列下去，假設有5個須要展現的全屏頁面，那麼高度是500%，只是展現100%，容器及容
器內的頁面取當前可視區高度，同時容器的父級元素overflow屬性值設爲hidden，經過更改容器可視區的位置來實現全
屏滾動效果。主要是響應鼠標事件，頁面經過CSS的動畫效果，進行移動。

overflow：hidden；transition：all1000msease；

詳細資料能夠參考：
《js 實現網頁全屏切換（平滑過渡），鼠標滾動切換》
《用 ES6 寫全屏滾動插件》

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

響應式網站設計是一個網站可以兼容多個終端，而不是爲每個終端作一個特定的版本。基本原理是經過媒體查詢檢測不一樣的設備屏
幕尺寸作處理。頁面頭部必須有meta聲明的viewport。

詳細資料能夠參考：
《響應式佈局原理》
《響應式佈局的實現方法和原理》

46.視差滾動效果，如何給每頁作不一樣的動畫？（回到頂部，向下滑動要再次出現，和只出現一次分別怎麼作？）

視差滾動是指多層背景以不一樣的速度移動，造成立體的運動效果，帶來很是出色的視覺體驗。

詳細資料能夠參考：
《如何實現視差滾動效果的網頁？》

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是不能提升其優先級的，可是
其餘屬性可以使用。

使用足夠大的純色內陰影來覆蓋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的內核的-webkit-text-size-adjust的私有CSS屬性來解決，只要加了-webkit-text-size
-adjust:none;字體大小就不受限制了。可是chrome更新到27版本以後就不能夠用了。因此高版本chrome谷歌瀏覽器
已經再也不支持-webkit-text-size-adjust樣式，因此要使用時候慎用。

（2）還能夠使用css3的transform縮放屬性-webkit-transform:scale(0.5);注意-webkit-transform:scale(0.
75);收縮的是整個元素的大小，這時候，若是是內聯元素，必需要將內聯元素轉換成塊元素，能夠使用display：block/
inline-block/...；

（3）使用圖片：若是是內容固定不變狀況下，使用將小於12px文字內容切出作圖片，這樣不影響兼容也不影響美觀。

詳細資料能夠參考：
《谷歌瀏覽器不支持 CSS 設置小於 12px 的文字怎麼辦？》

49.讓頁面裏的字體變清晰，變細用 CSS 怎麼作？

webkit內核的私有屬性：-webkit-font-smoothing，用於字體抗鋸齒，使用後字體看起來會更清晰舒服。

在MacOS測試環境下面設置-webkit-font-smoothing:antialiased;可是這個屬性僅僅是面向MacOS，其餘操做系統設
置後無效。

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

50.font-style 屬性中 italic 和 oblique 的區別？

italic和oblique這兩個關鍵字都表示「斜體」的意思。

它們的區別在於，italic是使用當前字體的斜體字體，而oblique只是單純地讓文字傾斜。若是當前字體沒有對應的斜體字體，
則退而求其次，解析爲oblique，也就是單純形狀傾斜。

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

設備像素指的是物理像素，通常手機的分辨率指的就是設備像素，一個設備的設備像素是不可變的。

css像素和設備獨立像素是等價的，無論在何種分辨率的設備上，css像素的大小應該是一致的，css像素是一個相對單位，它是相
對於設備像素的，一個css像素的大小取決於頁面縮放程度和dpr的大小。

dpr指的是設備像素和設備獨立像素的比值，通常的pc屏幕，dpr=1。在iphone4時，蘋果推出了retina屏幕，它的dpr
爲2。屏幕的縮放會改變dpr的值。

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

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

52.layoutviewport、visualviewport 和 idealviewport 的區別？

相關知識點：

若是把移動設備上瀏覽器的可視區域設爲viewport的話，某些網站就會由於viewport太窄而顯示錯亂，因此這些瀏覽器就決定
默認狀況下把viewport設爲一個較寬的值，好比980px，這樣的話即便是那些爲桌面設計的網站也能在移動瀏覽器上正常顯示了。
ppk把這個瀏覽器默認的viewport叫作layoutviewport。

layoutviewport的寬度是大於瀏覽器可視區域的寬度的，因此咱們還須要一個viewport來表明瀏覽器可視區域的大小，ppk把
這個viewport叫作visualviewport。

idealviewport是最適合移動設備的viewport，idealviewport的寬度等於移動設備的屏幕寬度，只要在css中把某一元
素的寬度設爲idealviewport的寬度（單位用px），那麼這個元素的寬度就是設備屏幕的寬度了，也就是寬度爲100%的效果。i
dealviewport的意義在於，不管在何種分辨率的屏幕下，那些針對idealviewport而設計的網站，不須要用戶手動縮放，也
不須要出現橫向滾動條，均可以完美的呈現給用戶。

回答：

移動端一共須要理解三個viewport的概念的理解。

第一個視口是佈局視口，在移動端顯示網頁時，因爲移動端的屏幕尺寸比較小，若是網頁使用移動端的屏幕尺寸進行佈局的話，那麼整
個頁面的佈局都會顯示錯亂。因此移動端瀏覽器提供了一個layoutviewport佈局視口的概念，使用這個視口來對頁面進行佈局展
示，通常layoutviewport的大小爲980px，所以頁面佈局不會有太大的變化，咱們能夠經過拖動和縮放來查看到這個頁面。

第二個視口指的是視覺視口，visualviewport指的是移動設備上咱們可見的區域的視口大小，通常爲屏幕的分辨率的大小。visu
alviewport和layoutviewport的關係，就像是咱們經過窗戶看外面的風景，視覺視口就是窗戶，而外面的風景就是佈局視口
中的網頁內容。

第三個視口是理想視口，因爲layoutviewport通常比visualviewport要大，因此想要看到整個頁面必須經過拖動和縮放才
能實現。因此又提出了idealviewport的概念，idealviewport下用戶不用縮放和滾動條就可以查看到整個頁面，而且頁面在
不一樣分辨率下顯示的內容大小相同。idealviewport其實就是經過修改layoutviewport的大小，讓它等於設備的寬度，這個
寬度能夠理解爲是設備獨立像素，所以根據idealviewport設計的頁面，在不一樣分辨率的屏幕下，顯示應該相同。

詳細資料能夠參考：
《移動前端開發之 viewport 的深刻理解》
《說說移動前端中 viewport（視口）》
《移動端適配知識你到底知多少》

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

由於移動端瀏覽器默認的viewport叫作layoutviewport。在移動端顯示時，由於layoutviewport的寬度大於移動端屏幕
的寬度，因此頁面會出現滾動條左右移動，fixed的元素是相對layoutviewport來固定位置的，而不是移動端屏幕來固定位置的
，因此會出現感受fixed無效的狀況。

若是想實現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.若是須要手動寫動畫，你認爲最小時間間隔是多久，爲何？（阿里）

多數顯示器默認頻率是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，是無損的、既支持索引色也支持直接色的、點陣圖。這種圖片格式幾乎沒有對數據進行壓縮，因此BMP格式的圖片一般
具備較大的文件大小。

（2）GIF是無損的、採用索引色的、點陣圖。採用LZW壓縮算法進行編碼。文件小，是GIF格式的優勢，同時，GIF格式還具
有支持動畫以及透明的優勢。但，GIF格式僅支持8bit的索引色，因此GIF格式適用於對色彩要求不高同時須要文件體積
較小的場景。

（3）JPEG是有損的、採用直接色的、點陣圖。JPEG的圖片的優勢，是採用了直接色，得益於更豐富的色彩，JPEG很是適合用來
存儲照片，與GIF相比，JPEG不適合用來存儲企業Logo、線框類的圖。由於有損壓縮會致使圖片模糊，而直接色的選用，
又會致使圖片文件較GIF更大。

（4）PNG-8是無損的、使用索引色的、點陣圖。PNG是一種比較新的圖片格式，PNG-8是很是好的GIF格式替代者，在可能的
狀況下，應該儘量的使用PNG-8而不是GIF，由於在相同的圖片效果下，PNG-8具備更小的文件體積。除此以外，PNG-8
還支持透明度的調節，而GIF並不支持。如今，除非須要動畫的支持，不然咱們沒有理由使用GIF而不是PNG-8。

（5）PNG-24是無損的、使用直接色的、點陣圖。PNG-24的優勢在於，它壓縮了圖片的數據，使得一樣效果的圖片，PNG-24格
式的文件大小要比BMP小得多。固然，PNG24的圖片仍是要比JPEG、GIF、PNG-8大得多。

（6）SVG是無損的、矢量圖。SVG是矢量圖。這意味着SVG圖片由直線和曲線以及繪製它們的方法組成。當你放大一個SVG圖
片的時候，你看到的仍是線和曲線，而不會出現像素點。這意味着SVG圖片在放大時，不會失真，因此它很是適合用來繪製企
業Logo、Icon等。

（7）WebP是谷歌開發的一種新圖片格式，WebP是同時支持有損和無損壓縮的、使用直接色的、點陣圖。從名字就能夠看出來它是
爲Web而生的，什麼叫爲Web而生呢？就是說相同質量的圖片，WebP具備更小的文件體積。如今網站上充滿了大量的圖片，
若是可以下降每個圖片的文件大小，那麼將大大減小瀏覽器和服務器之間的數據傳輸量，進而下降訪問延遲，提高訪問體驗。

•在無損壓縮的狀況下，相同質量的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的一種很好的替代格式，它也支持透明度的調整，並
且文件的體積相對於GIF格式更小。通常來講若是不是須要動畫的狀況，咱們均可以使用PNG-8格式代替GIF格式。

（5）第五種是PNG-24格式，它是無損壓縮的使用直接色的點陣圖。PNG-24的優勢是它使用了壓縮算法，因此它的體積比BMP
格式的文件要小得多，可是相對於其餘的幾種格式，仍是要大一些。

（6）第六種格式是svg格式，它是矢量圖，它記錄的圖片的繪製方式，所以對矢量圖進行放大和縮小不會產生鋸齒和失真。它通常
適合於用來製做一些網站logo或者圖標之類的圖片。

（7）第七種格式是webp格式，它是支持有損和無損兩種壓縮方式的使用直接色的點陣圖。使用webp格式的最大的優勢是，在相
同質量的文件下，它擁有更小的文件體積。所以它很是適合於網絡圖片的傳輸，由於圖片體積的減小，意味着請求時間的減少，
這樣會提升用戶的體驗。這是谷歌開發的一種新的圖片格式，目前在兼容性上還不是太好。

詳細資料能夠參考：
《圖片格式那麼多，哪一種更適合你？》

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

（1）寬高判斷法。經過建立image對象，將其src屬性設置爲webp格式的圖片，而後在onload事件中獲取圖片的寬高，如
果可以獲取，則說明瀏覽器支持webp格式圖片。若是不能獲取或者觸發了onerror函數，那麼就說明瀏覽器不支持webp格
式的圖片。

（2）canvas判斷方法。咱們能夠動態的建立一個canvas對象，經過canvas的toDataURL將設置爲webp格式，而後判斷
返回值中是否含有image/webp字段，若是包含則說明支持WebP，反之則不支持。

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

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

網站向服務器請求的時候，會自動帶上cookie這樣增長表頭信息量，使請求變慢。

若是靜態文件都放在主域名下，那靜態文件請求的時候都帶有的cookie的數據提交給server的，很是浪費流量，因此不如隔離開
，靜態資源放CDN。

由於cookie有域的限制，所以不能跨域提交請求，故使用非主要域名的時候，請求頭中就不會帶有cookie數據，這樣能夠下降請
求頭的大小，下降請求時間，從而達到下降總體請求延時的目的。

同時這種方式不會將cookie傳入WebServer，也減小了WebServer對cookie的處理分析環節，提升了webserver的
http請求的解析速度。

詳細資料能夠參考：
《CDN 是什麼？使用 CDN 有什麼優點？》

61.style 標籤寫在 body 後與 body 前有什麼區別？

頁面加載自上而下固然是先加載樣式。寫在body標籤後因爲瀏覽器以逐行方式對HTML文檔進行解析，當解析到寫在尾部的樣式
表（外聯或寫在style標籤）會致使瀏覽器中止以前的渲染，等待加載且解析樣式表完成以後從新渲染，在windows的IE下可
能會出現FOUC現象（即樣式失效致使的頁面閃爍問題）

62.什麼是 CSS 預處理器/後處理器？

CSS預處理器定義了一種新的語言，其基本思想是，用一種專門的編程語言，爲CSS增長了一些編程的特性，將CSS做爲目標生成
文件，而後開發者就只要使用這種語言進行編碼工做。通俗的說，CSS預處理器用一種專門的編程語言，進行Web頁面樣式設計，然
後再編譯成正常的CSS文件。

預處理器例如：LESS、Sass、Stylus，用來預編譯Sass或lesscsssprite，加強了css代碼的複用性，還有層級、mixin、
變量、循環、函數等，具備很方便的UI組件模塊化開發能力，極大的提升工做效率。

CSS後處理器是對CSS進行處理，並最終生成CSS的預處理器，它屬於廣義上的CSS預處理器。咱們好久之前就在用CSS後
處理器了，最典型的例子是CSS壓縮工具（如clean-css），只不過之前沒單獨拿出來講過。還有最近比較火的Autoprefixer，
以CanIUse上的瀏覽器支持數據爲基礎，自動處理兼容性問題。

後處理器例如：PostCSS，一般被視爲在完成的樣式表中根據CSS規範處理CSS，讓其更有效；目前最常作的是給CSS屬性添加瀏
覽器私有前綴，實現跨瀏覽器兼容性的問題。

詳細資料能夠參考：
《CSS 預處理器和後處理器》

63.闡述一下 CSSSprites

將一個頁面涉及到的全部圖片都包含到一張大圖中去，而後利用CSS的background-image，background-repeat，background
-position的組合進行背景定位。利用CSSSprites能很好地減小網頁的http請求，從而很好的提升頁面的性能；CSSSprites
能減小圖片的字節。

優勢：

減小HTTP請求數，極大地提升頁面加載速度
增長圖片信息重複度，提升壓縮比，減小圖片大小
更換風格方便，只需在一張或幾張圖片上修改顏色或樣式便可實現

缺點：

圖片合併麻煩
維護麻煩，修改一個圖片可能須要從新佈局整個圖片，樣式

64.使用 rem 佈局的優缺點？

優勢：
在屏幕分辨率千差萬別的時代，只要將rem與屏幕分辨率關聯起來就能夠實現頁面的總體縮放，使得在設備上的展示都統一塊兒來了。
並且如今瀏覽器基本都已經支持rem了，兼容性也很是的好。

缺點：
（1）在奇葩的dpr設備上表現效果不太好，好比一些華爲的高端機型用rem佈局會出現錯亂。
（2）使用iframe引用也會出現問題。
（3）rem在多屏幕尺寸適配上與當前兩大平臺的設計哲學不一致。即大屏的出現究竟是爲了看得又大又清楚，仍是爲了看的更多的問
題。

詳細資料能夠參考：
《css3 的字體大小單位 rem 到底好在哪？》
《VW:是時候放棄 REM 佈局了》
《爲何設計稿是 750px》
《使用 Flexible 實現手淘 H5 頁面的終端適配》

65.幾種常見的 CSS 佈局

詳細的資料能夠參考：
《幾種常見的 CSS 佈局》

66.畫一條 0.5px 的線

採用metaviewport的方式

採用border-image的方式

採用transform:scale()的方式

詳細資料能夠參考：
《怎麼畫一條 0.5px 的邊（更新）》

67.transition 和 animation 的區別

transition關注的是CSSproperty的變化，property值和時間的關係是一個三次貝塞爾曲線。

animation做用於元素自己而不是樣式屬性，能夠使用關鍵幀的概念，應該說能夠實現更自由的動畫效果。

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

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

「首選最小寬度」，指的是元素最適合的最小寬度。

東亞文字（如中文）最小寬度爲每一個漢字的寬度。

西方文字最小寬度由特定的連續的英文字符單元決定。並非全部的英文字符都會組成連續單元，通常會終止於空格（普通空格）、短
橫線、問號以及其餘非英文字符等。

若是想讓英文字符和中文同樣，每個字符都用最小寬度單元，能夠試試使用CSS中的word-break:break-all。

69.爲何 height:100%會無效？

對於普通文檔流中的元素，百分比高度值要想起做用，其父級必須有一個能夠生效的高度值。

緣由是若是包含塊的高度沒有顯式指定（即高度由內容決定），而且該元素不是絕對定位，則計算值爲auto，由於解釋成了auto，
因此沒法參與計算。

使用絕對定位的元素會有計算值，即便祖先元素的height計算爲auto也是如此。

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

（1）max-width會覆蓋width，即便width是行類樣式或者設置了!important。

（2）min-width會覆蓋max-width，此規則發生在min-width和max-width衝突的時候。

71.內聯盒模型基本概念

（1）內容區域（contentarea）。內容區域指一種圍繞文字看不見的盒子，其大小僅受字符自己特性控制，本質上是一個字符盒子
（characterbox）；可是有些元素，如圖片這樣的替換元素，其內容顯然不是文字，不存在字符盒子之類的，所以，對於這些
元素，內容區域能夠當作元素自身。

（2）內聯盒子（inlinebox）。「內聯盒子」不會讓內容成塊顯示，而是排成一行，這裏的「內聯盒子」實際指的就是元素的「外在盒
子」，用來決定元素是內聯仍是塊級。該盒子又能夠細分爲「內聯盒子」和「匿名內聯盒子」兩類。

（3）行框盒子（linebox），每一行就是一個「行框盒子」（實線框標註），每一個「行框盒子」又是由一個一個「內聯盒子」組成的。

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

72.什麼是幽靈空白節點？

「幽靈空白節點」是內聯盒模型中很是重要的一個概念，具體指的是：在HTML5文檔聲明中，內聯元素的全部解析和渲染表現就如同
每一個行框盒子的前面有一個「空白節點」同樣。這個「空白節點」永遠透明，不佔據任何寬度，看不見也沒法經過腳本獲取，就好像幽靈
同樣，但又確確實實地存在，表現如同文本節點同樣，所以，我稱之爲「幽靈空白節點」。

73.什麼是替換元素？

經過修改某個屬性值呈現的內容就能夠被替換的元素就稱爲「替換元素」。所以，<img>、<object>、<video>、<iframe>或者表
單元素<textarea>和<input>和<select>都是典型的替換元素。

替換元素除了內容可替換這一特性之外，還有如下一些特性。

（1）內容的外觀不受頁面上的CSS的影響。用專業的話講就是在樣式表如今CSS做用域以外。如何更改替換元素自己的外觀須要
相似appearance屬性，或者瀏覽器自身暴露的一些樣式接口，

（2）有本身的尺寸。在Web中，不少替換元素在沒有明確尺寸設定的狀況下，其默認的尺寸（不包括邊框）是300像素×150像
素，如<video>、<iframe>或者<canvas>等，也有少部分替換元素爲0像素，如<img>圖片，而表單元素的替換元素
的尺寸則和瀏覽器有關，沒有明顯的規律。

（3）在不少CSS屬性上有本身的一套表現規則。比較具備表明性的就是vertical-align屬性，對於替換元素和非替換元素，ve
rtical-align屬性值的解釋是不同的。比方說vertical-align的默認值的baseline，很簡單的屬性值，基線之意，
被定義爲字符x的下邊緣，而替換元素的基線卻被硬生生定義成了元素的下邊緣。

（4）全部的替換元素都是內聯水平元素，也就是替換元素和替換元素、替換元素和文字都是能夠在一行顯示的。可是，替換元素默認
的display值倒是不同的，有的是inline，有的是inline-block。

74.替換元素的計算規則？

替換元素的尺寸從內而外分爲3類：固有尺寸、HTML尺寸和CSS尺寸。

（1）固有尺寸指的是替換內容本來的尺寸。例如，圖片、視頻做爲一個獨立文件存在的時候，都是有着本身的寬度和高度的。

（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層結構的計算規則具體以下

（1）若是沒有CSS尺寸和HTML尺寸，則使用固有尺寸做爲最終的寬高。

（2）若是沒有CSS尺寸，則使用HTML尺寸做爲最終的寬高。

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

（4）若是「固有尺寸」含有固有的寬高比例，同時僅設置了寬度或僅設置了高度，則元素依然按照固有的寬高比例顯示。

（5）若是上面的條件都不符合，則最終寬度表現爲300像素，高度爲150像素。

（6）內聯替換元素和塊級替換元素使用上面同一套尺寸計算規則。

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

content屬性生成的對象稱爲「匿名替換元素」。

（1）咱們使用content生成的文本是沒法選中、沒法複製的，好像設置了userselect:none聲明通常，可是普通元素的文本
卻能夠被輕鬆選中。同時，content生成的文本沒法被屏幕閱讀設備讀取，也沒法被搜索引擎抓取，所以，千萬不要自覺得是
地把重要的文本信息使用content屬性生成，由於這對可訪問性和SEO都很不友好。

（2）content生成的內容不能左右:empty僞類。

（3）content動態生成值沒法獲取。

76.margin:auto 的填充規則？

margin的'auto'可不是擺設，是具備強烈的計算意味的關鍵字，用來計算元素對應方向應該得到的剩餘間距大小。可是觸發mar
gin:auto計算有一個前提條件，就是width或height爲auto時，元素是具備對應方向的自動填充特性的。

（1）若是一側定值，一側auto，則auto爲剩餘空間大小。
（2）若是兩側均是auto，則平分剩餘空間。

77.margin 無效的情形

（1）display計算值inline的非替換元素的垂直margin是無效的。對於內聯替換元素，垂直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的表現規則：雙線寬度永遠相等，中間間隔±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的價值就在其副業上不受字體和字號影
響的內聯元素的垂直居中對齊效果。內聯元素默認是基線對齊的，而基線就是x的底部，而1ex就是一個x的高度。

80.line-height 的特殊性？

（1）對於非替換元素的純內聯元素，其可視高度徹底由line-height決定。對於文本這樣的純內聯元素，line-height就是高
度計算的基石，用專業說法就是指定了用來計算行框盒子高度的基礎高度。

（2）內聯元素的高度由固定高度和不固定高度組成，這個不固定的部分就是這裏的「行距」。換句話說，line-height之因此起做
用，就是經過改變「行距」來實現的。在CSS中，「行距」分散在當前文字的上方和下方，也就是即便是第一行文字，其上方也是
有「行距」的，只不過這個「行距」的高度僅僅是完整「行距」高度的一半，所以，也被稱爲「半行距」。

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

（4）border以及line-height等傳統CSS屬性並無小數像素的概念。若是標註的是文字上邊距，則向下取整；若是是文字下
邊距，則向上取整。

（5）對於純文本元素，line-height直接決定了最終的高度。可是，若是同時有替換元素，則line-height只能決定最小高度。

（6）對於塊級元素，line-height對其自己是沒有任何做用的，咱們平時改變line-height，塊級元素的高度跟着變化其實是
經過改變塊級元素裏面內聯級別元素佔據的高度實現的。

（7）line-height的默認值是normal，還支持數值、百分比值以及長度值。爲數值類型時，其最終的計算值是和當前font-si
ze相乘後的值。爲百分比值時，其最終的計算值是和當前font-size相乘後的值。爲長度值時原意不變。

（8）若是使用數值做爲line-height的屬性值，那麼全部的子元素繼承的都是這個值；可是，若是使用百分比值或者長度值做爲
屬性值，那麼全部的子元素繼承的是最終的計算值。

（9）不管內聯元素line-height如何設置，最終父級元素的高度都是由數值大的那個line-height決定的。

（10）只要有「內聯盒子」在，就必定會有「行框盒子」，就是每一行內聯元素外面包裹的一層看不見的盒子。而後，重點來了，在每一個
「行框盒子」前面有一個寬度爲0的具備該元素的字體和行高屬性的看不見的「幽靈空白節點」。

81.vertical-align 的特殊性？

（1）vertical-align的默認值是baseline，即基線對齊，而基線的定義是字母x的下邊緣。所以，內聯元素默認都是沿着字
母x的下邊緣對齊的。對於圖片等替換元素，每每使用元素自己的下邊緣做爲基線。：一個inline-block元素，若是裏面
沒有內聯元素，或者overflow不是visible，則該元素的基線就是其margin底邊緣；不然其基線就是元素裏面最後一行
內聯元素的基線。

（2）vertical-align:top就是垂直上邊緣對齊，若是是內聯元素，則和這一行位置最高的內聯元素的頂部對齊；若是display
計算值是table-cell的元素，咱們不妨腦補成<td>元素，則和<tr>元素上邊緣對齊。

（3）vertical-align:middle是中間對齊，對於內聯元素，元素的垂直中心點和行框盒子基線往上1/2x-height處對齊。對
於table-cell元素，單元格填充盒子相對於外面的表格行居中對齊。

（4）vertical-align支持數值屬性，根據數值的不一樣，相對於基線往上或往下偏移，若是是負值，往下偏移，若是是正值，往上
偏移。

（5）vertical-align屬性的百分比值則是相對於line-height的計算值計算的。

（6）vertical-align起做用是有前提條件的，這個前提條件就是：只能應用於內聯元素以及display值爲table-cell的元
素。

（7）table-cell元素設置vertical-align垂直對齊的是子元素，可是其做用的並非子元素，而是table-cell元素自身。

82.overflow 的特殊性？

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

（2）HTML中有兩個標籤是默承認以產生滾動條的，一個是根元素<html>，另外一個是文本域<textarea>。

（3）滾動條會佔用容器的可用寬度或高度。

（4）元素設置了overflow:hidden聲明，裏面內容高度溢出的時候，滾動依然存在，僅僅滾動條不存在！

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

沒有設置left/top/right/bottom屬性值的絕對定位稱爲「無依賴絕對定位」。

無依賴絕對定位其定位的位置和沒有設置position:absolute時候的位置相關。

84.absolute 與 overflow 的關係？

（1）若是overflow不是定位元素，同時絕對定位元素和overflow容器之間也沒有定位元素，則overflow沒法對absolute
元素進行剪裁。

（2）若是overflow的屬性值不是hidden而是auto或者scroll，即便絕對定位元素高寬比overflow元素高寬還要大，也
都不會出現滾動條。

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

85.clip 裁剪是什麼？

所謂「可訪問性隱藏」，指的是雖然內容肉眼看不見，可是其餘輔助設備卻可以進行識別和訪問的隱藏。

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）層疊上下文能夠嵌套，內部層疊上下文及其全部子元素均受制於外部的「層疊上下文」。
（4）每一個層疊上下文和兄弟元素獨立，也就是說，當進行層疊變化或渲染的時候，只須要考慮後代元素。
（5）每一個層疊上下文是自成體系的，當元素髮生層疊的時候，整個元素被認爲是在父層疊上下文的層疊順序中。


層疊上下文的建立：

（1）頁面根元素天生具備層疊上下文，稱爲根層疊上下文。根層疊上下文指的是頁面根元素，能夠當作是<html>元素。所以，頁面中全部的元素必定處於至少一個「層疊結界」中。

（2）對於position值爲relative/absolute以及Firefox/IE瀏覽器（不包括Chrome瀏覽器）下含有position:fixed聲明的定位元素，當其z-index值不是auto的時候，會建立層疊上下文。Chrome等WebKit內核瀏覽器下，position:fixed元素自然層疊上下文元素，無須z-index爲數值。根據個人測試，目前IE和Firefox還是老套路。

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

88.什麼是層疊水平？

層疊水平，英文稱做stackinglevel，決定了同一個層疊上下文中元素在z軸上的顯示順序。

顯而易見，全部的元素都有層疊水平，包括層疊上下文元素，也包括普通元素。然而，對普通元素的層疊水平探討只侷限在當前層疊上
下文元素中。

89.元素的層疊順序？

層疊順序，英文稱做 stackingorder，表示元素髮生層疊時有着特定的垂直顯示順序。

90.層疊準則？

（1）誰大誰上：當具備明顯的層疊水平標識的時候，如生效的z-index屬性值，在同一個層疊上下文領域，層疊水平值大的那一個覆蓋小的那一個。

（2）後來居上：當元素的層疊水平一致、層疊順序相同的時候，在DOM流中處於後面的元素會覆蓋前面的元素。

91.font-weight 的特殊性？

若是使用數值做爲font-weight屬性值，必須是100～900的整百數。由於這裏的數值僅僅是外表長得像數值，其實是一個具備特定含義的關鍵字，而且這裏的數值關鍵字和字母關鍵字之間是有對應關係的。

92.text-indent 的特殊性？

（1）text-indent僅對第一行內聯盒子內容有效。

（2）非替換元素之外的display計算值爲inline的內聯元素設置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會調整normal的計算值以實現更好的版面佈局。
（3）支持負值，且值足夠大的時候，會讓字符造成重疊，甚至反向排列。
（4）和text-indent屬性同樣，不管值多大或多小，第一行必定會保留至少一個字符。
（5）支持小數值，即便0.1px也是支持的。
（6）暫不支持百分比值。

94.word-spacing 與單詞間距？

letter-spacing做用於全部字符，但word-spacing僅做用於空格字符。換句話說，word-spacing的做用就是增長空格的間隙
寬度。

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

white-space屬性聲明瞭如何處理元素內的空白字符，這類空白字符包括Space（空格）鍵、Enter（回車）鍵、Tab（製表符）
鍵產生的空白。所以，white-space能夠決定圖文內容是否在一行顯示（回車空格是否生效），是否顯示大段連續空白（空格是否
生效）等。

其屬性值包括下面這些。
•normal：合併空白字符和換行符。
•pre：空白字符不合並，而且內容只在有換行符的地方換行。
•nowrap：該值和normal同樣會合併空白字符，但不容許文本環繞。
•pre-wrap：空白字符不合並，而且內容只在有換行符的地方換行，同時容許文本環繞。
•pre-line：合併空白字符，但只在有換行符的地方換行，容許文本環繞。

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

相關知識點：

根據測試，一個元素若是display計算值爲none，在IE瀏覽器下（IE8～IE11，更高版本不肯定）依然會發送圖片請求，Fire
fox瀏覽器不會，至於Chrome和Safari瀏覽器則彷佛更加智能一點：若是隱藏元素同時又設置了background-image，則圖片
依然會去加載；若是是父元素的display計算值爲none，則背景圖不會請求，此時瀏覽器或許放心地認爲這個背景圖暫時是不會使
用的。

若是不是background-image，而是<img>元素，則設置display:none在全部瀏覽器下依舊都會請求圖片資源。

還須要注意的是若是設置的樣式沒有對應的元素，則background-image也不會加載。hover狀況下的background-image，在觸
發時加載。

回答：

-（1）元素的背景圖片

-元素自己設置 display:none，會請求圖片 -父級元素設置 display:none，不會請求圖片 -樣式沒有元素使用，不會請求
-:hover 樣式下，觸發時請求

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

詳細資料能夠參考：
《CSS 控制前端圖片 HTTP 請求的各類狀況示例》

97.如何實現單行／多行文本溢出的省略（...）？

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

/*多行文本溢出*/
p {
  position: relative;
  line-height: 1.5em;
  /*高度爲須要顯示的行數*行高，好比這裏咱們顯示兩行，則爲3*/
  height: 3em;
  overflow: hidden;
}

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

詳細資料能夠參考：
《【CSS/JS】如何實現單行／多行文本溢出的省略》
《CSS 多行文本溢出省略顯示》

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

-（1）使用 display:none;隱藏元素，渲染樹不會包含該渲染對象，所以該元素不會在頁面中佔據位置，也不會響應綁定的監聽事件。

-（2）使用 visibility:hidden;隱藏元素。元素在頁面中仍佔據空間，可是不會響應綁定的監聽事件。

-（3）使用 opacity:0;將元素的透明度設置爲 0，以此來實現元素的隱藏。元素在頁面中仍然佔據空間，而且可以響應元素綁定的監聽事件。

-（4）經過使用絕對定位將元素移除可視區域內，以此來實現元素的隱藏。

-（5）經過 z-index 負值，來使其餘元素遮蓋住該元素，以此來實現隱藏。

-（6）經過 clip/clip-path 元素裁剪的方法來實現元素的隱藏，這種方法下，元素仍在頁面中佔據位置，可是不會響應綁定的監聽事件。

-（7）經過 transform:scale(0,0)來將元素縮放爲 0，以此來實現元素的隱藏。這種方法下，元素仍在頁面中佔據位置，可是不會響應綁定的監聽事件。

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

99.css 實現上下固定中間自適應佈局？

利用絕對定位實現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佈局實現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 實現上下固定中間自適應佈局》

100.css 兩欄佈局的實現？

相關資料：

/*兩欄佈局通常指的是頁面中一共兩欄，左邊固定，右邊自適應的佈局，一共有四種實現的方式。*/
/*以左邊寬度固定爲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 展現》

回答：

兩欄佈局通常指的是頁面中一共兩欄，左邊固定，右邊自適應的佈局，一共有四種實現的方式。

以左邊寬度固定爲 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 三欄佈局的實現？

相關資料：

/*三欄佈局通常指的是頁面中一共有三欄，左右兩欄寬度固定，中間自適應的佈局，一共有五種實現方式。

這裏以左邊寬度固定爲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）雙飛翼佈局，利用浮動和負邊距來實現。父級元素設置左右的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值來實現的，而不是經過父元
素的pedding來實現的。本質上來講，也是經過浮動和外邊距負值來實現的。*/

.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 展現》

回答：

三欄佈局通常指的是頁面中一共有三欄，左右兩欄寬度固定，中間自適應的佈局，一共有五種實現方式。

這裏以左邊寬度固定爲100px，右邊寬度固定爲200px爲例。

（1）利用絕對定位的方式，左右兩欄設置爲絕對定位，中間設置對應方向大小的margin的值。

（2）利用flex佈局的方式，左右兩欄的放大和縮小比例都設置爲0，基礎大小設置爲固定的大小，中間一欄設置爲auto。

（3）利用浮動的方式，左右兩欄設置固定大小，並設置對應方向的浮動。中間一欄設置左右兩個方向的margin值，注意這種方式，中間一欄必須放到最後。

（4）聖盃佈局，利用浮動和負邊距來實現。父級元素設置左右的pedding，三列均設置向左浮動，中間一列放在最前面，寬度設置爲父級元素的寬度，所以後面兩列都被擠到了下一行，經過設置margin負值將其移動到上一行，再利用相對定位，定位到兩邊。雙飛翼佈局中間列的寬度不能小於兩邊任意列的寬度，而雙飛翼佈局則不存在這個問題。

（5）雙飛翼佈局，雙飛翼佈局相對於聖盃佈局來講，左右位置的保留是經過中間列的margin值來實現的，而不是經過父元素的pedding來實現的。本質上來講，也是經過浮動和外邊距負值來實現的。

102.實現一個寬高自適應的正方形

/*1.第一種方式是利用vw來實現*/
.square {
  width: 10%;
  height: 10vw;
  background: tomato;
}

/*2.第二種方式是利用元素的margin/padding百分比是相對父元素width的性質來實現*/
.square {
  width: 20%;
  height: 0;
  padding-top: 20%;
  background: orange;
}

/*3.第三種方式是利用子元素的margin-top的值來實現的*/
.square {
  width: 30%;
  overflow: hidden;
  background: yellow;
}

.square::after {
  content: "";
  display: block;
  margin-top: 100%;
}

《自適應正方形 demo 展現》

103.實現一個三角形

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

《三角形 demo 展現》

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

/*實現原理參考自適應正方形和水平居中方式*/
.box {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;

  width: 10%;
  height: 0;
  padding-top: 20%;
  background: tomato;
}

推薦

筆者再次牆裂推薦收藏這篇原文，轉載於 CavsZhouyou - 🐜 前端面試複習筆記，這個倉庫是原做者校招時的前端複習筆記，主要總結一些比較重要的知識點和前端面試問題，但願對你們有所幫助。

最後若是文章和筆記能帶您一絲幫助或者啓發，請不要吝嗇你的贊和收藏，你的確定是我前進的最大動力😁

• 附筆記連接，閱讀往期更多優質文章可移步查看，喜歡的能夠給我點贊鼓勵哦：https://github.com/Wscats/articles