遇到 ie 的面試題, 直接說ie淘汰了, 自己不愿意再學那些舊知識了。
[https://github.com/yisainan/web-interview/blob/master/content/CSS.md](https://github.com/yisainan/web-interview/blob/master/content/CSS.md)
[https://developer.mozilla.org/zh-CN/docs/Learn/Getting\_started\_with\_the\_web](https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web)
### 實現不使用 border 畫出 1px 高的線，在不同瀏覽器的標準模式與怪異模式下都能保持一致的效果。\*\*\*
參考答案：
~~~html
<div style="height:1px;overflow:hidden;background:red"></div>
~~~
[
](https://github.com/yisainan/web-interview/issues/22)
### 介紹一下標準的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？\*\*\*\*\*
參考答案：
（1）有兩種， IE 盒子模型、W3C 盒子模型；
（2）盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border)；
（3）區 別： IE 的 content 部分把 border 和 padding 計算了進去;
相關知識點：
~~~plain
（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盒模型。
~~~
回答：
~~~plain
盒模型都是由四個部分組成的，分別是margin、border、padding和content。
標準盒模型和IE盒模型的區別在于設置width和height時，所對應的范圍不同。標準盒模型的width和height屬性的
范圍只包含了content，而IE盒模型的width和height屬性的范圍包含了border、padding和content。
一般來說，我們可以通過修改元素的box-sizing屬性來改變元素的盒模型。
~~~
詳細的資料可以參考：
[《CSS 盒模型詳解》](https://juejin.im/post/59ef72f5f265da4320026f76)
[
](https://github.com/yisainan/web-interview/issues/23)
### CSS 隱藏元素的幾種方法（至少說出三種）\*\*\*\*\*
參考答案：
Opacity: 元素本身依然占據它自己的位置并對網頁的布局起作用。它也將響應用戶交互;
Visibility: 與 opacity 唯一不同的是它不會響應任何用戶交互。此外，元素在讀屏軟件中也會被隱藏;
Display:display 設為 none 任何對該元素直接打用戶交互操作都不可能生效。此外，讀屏軟件也不會讀到元素的內容。這種方式產生的效果就像元素完全不存在;
Position: 不會影響布局，能讓元素保持可以操作;
Clip-path:clip-path 屬性還沒有在 IE 或者 Edge 下被完全支持。如果要在你的 clip-path 中使用外部的 SVG 文件，瀏覽器支持度還要低;
### CSS 清除浮動的幾種方法（至少兩種） \*\*\*\*\*
參考答案：
~~~plain
清除浮動： 核心：clear:both;
1.使用額外標簽法（不推薦使用）
在浮動的盒子下面再放一個標簽，使用 clear:both;來清除浮動
a 內部標簽：會將父盒子的高度重新撐開
b 外部標簽：只能將浮動盒子的影響清除，但是不會撐開盒子
2.使用 overflow 清除浮動（不推薦使用）
先找到浮動盒子的父元素，給父元素添加一個屬性：overflow:hidden;就會清除子元素對頁面的影響
3.使用偽元素清除浮動(用的最多)
偽元素：在頁面上不存在的元素，但是可以通過 css 添加上去
種類：
? ? ? :after(在。。。之后)
? ? ? :before(在。。。之前)
注意：每個元素都有自己的偽元素
.clearfix:after {
? ? content:"";
? ? height:0;
? ? line-height:0;
? ? display:block;
? ? clear:both;
? ? visibility:hidden; ?/_將元素隱藏起來_/?
? ? ? 在頁面的 clearfix 元素后面添加了一個空的塊級元素
? ? ?（這個元素的高為 0 行高也為 0 ? 并且這個元素清除了浮動）
}
.clearfix {
? zoom:1;/_為了兼容 IE6_/
}
~~~
[
](https://github.com/yisainan/web-interview/issues/26)
### 偽元素和偽類的區別？\*\*\*\*
參考答案：
1、偽元素使用 2 個冒號，常見的有：::before，::after，::first-line，::first-letter，::selection、::placeholder 等；
~~~plain
偽類使用1個冒號，常見的有：:hover，:link，:active，:target，:not()，:focus等。
~~~
2、偽元素添加了一個頁面中沒有的元素（只是從視覺效果上添加了，不是在文檔樹中添加）；
~~~plain
偽類是給頁面中已經存在的元素添加一個類。
~~~
解析：
CSS 偽元素是添加到選擇器的關鍵字，去選擇元素的特定部分。它們可以用于裝飾（ `:first-line` ， `:first-letter` ）或將元素添加到標記中（與 content:... 組合），而不必修改標記（ `:before` ， `:after` ）。
* `:first-line` 和 `:first-letter` 可以用來修飾文字。
* 上面提到的 `.clearfix` 方法中，使用 `clear: both` 來添加不占空間的元素。
* 使用 `:before` 和 `after` 展示提示中的三角箭頭。鼓勵關注點分離，因為三角被視為樣式的一部分，而不是真正的 DOM。如果不使用額外的 HTML 元素，只用 CSS 樣式繪制三角形是不太可能的。
[參考](https://css-tricks.com/almanac/selectors/a/after-and-before/)
### CSS 選擇符有哪些？哪些屬性可以繼承？優先級算法如何計算？ CSS3 新增偽類有那些？\*\*\*\*
參考答案：
~~~plain
（1）id選擇器（#myid）
（2）類選擇器（.myclassname）
（3）標簽選擇器（div,h1,p）
（4）后代選擇器（h1 p）
（5）相鄰后代選擇器（子）選擇器（ul>li）
（6）兄弟選擇器（li~a）
（7）相鄰兄弟選擇器（li+a）
（8）屬性選擇器（a[rel="external"]）
（9）偽類選擇器（a:hover,li:nth-child）
（10）偽元素選擇器（::before、::after）
（11）通配符選擇器（*）
* 繼承： font-size font-family color, UL LI DL DD DT;
* 不可繼承 ：border padding margin width height ;
* 優先級就近原則，樣式定義最近者為準;
* 載入樣式以最后載入的定位為準;
優先級為:
???????!important > ?id > class > tag ?
???????important 比 內聯優先級高
CSS3新增偽類舉例：
????p:first-of-type 選擇屬于其父元素的首個 <p> 元素的每個 <p> 元素。
????p:last-of-type ?選擇屬于其父元素的最后 <p> 元素的每個 <p> 元素。
????p:only-of-type ?選擇屬于其父元素唯一的 <p> 元素的每個 <p> 元素。
????p:only-child ???選擇屬于其父元素的唯一子元素的每個 <p> 元素。
????p:nth-child(2) ?選擇屬于其父元素的第二個子元素的每個 <p> 元素。
????:enabled、:disabled 控制表單控件的禁用狀態。
????:checked，單選框或復選框被選中。
~~~
[
](https://github.com/yisainan/web-interview/issues/28)
### 行內元素和塊級元素的具體區別是什么？行內元素的 padding 和 margin 可設置嗎？\*\*\*\*\*
參考答案：
* 塊級元素(block)特性：
* 總是獨占一行，表現為另起一行開始，而且其后的元素也必須另起一行顯示;
* 寬度(width)、高度(height)、內邊距(padding)和外邊距(margin)都可控制;
* 內聯元素(inline)特性：
* 和相鄰的內聯元素在同一行;
* 寬度(width)、高度(height)、內邊距的 top/bottom(padding-top/padding-bottom)和外邊距的 top/bottom(margin-top/margin-bottom)都不可改變（也就是 padding 和 margin 的 left 和 right 是可以設置的），就是里面文字或圖片的大小。
那么問題來了，瀏覽器還有默認的天生 inline-block 元素（擁有內在尺寸，可設置高寬，但不會自動換行），有哪些？
參考答案： `<input> 、<img> 、<button> 、<texterea> 、<label>。`
[
](https://github.com/yisainan/web-interview/issues/29)
### 什么是外邊距重疊？重疊的結果是什么？\*\*\*\*
參考答案：
外邊距重疊就是 margin-collapse。
在 CSS 當中，相鄰的兩個盒子（可能是兄弟關系也可能是祖先關系）的外邊距可以結合成一個單獨的外邊距。這種合并外邊距的方式被稱為折疊，并且因而所結合成的外邊距稱為折疊外邊距。
折疊結果遵循下列計算規則：
1\. 兩個相鄰的外邊距都是正數時，折疊結果是它們兩者之間較大的值。
2\. 兩個相鄰的外邊距都是負數時，折疊結果是兩者絕對值的較大值。
3\. 兩個外邊距一正一負時，折疊結果是兩者的相加的和。
[
](https://github.com/yisainan/web-interview/issues/30)
### rgba()和 opacity 的透明效果有什么不同？\*\*\*
參考答案：
rgba()和 opacity 都能實現透明效果，但最大的不同是 opacity 作用于元素，以及元素內的所有內容的透明度，
而 rgba()只作用于元素的顏色或其背景色。（設置 rgba 透明的元素的子元素不會繼承透明效果！）
### css 中可以讓文字在垂直和水平方向上重疊的兩個屬性是什么？\*\*\*\*
參考答案：
垂直方向：line-height
水平方向：letter-spacing
那么問題來了，關于 letter-spacing 的妙用知道有哪些么？
參考答案: 可以用于消除 inline-block 元素間的換行符空格間隙問題。
[
](https://github.com/yisainan/web-interview/issues/32)
### px 和 em 的區別。
參考答案：px 和 em 都是長度單位，區別是，px 的值是固定的，指定是多少就是多少，計算比較容易。em 得值不是固定的，并且 em 會繼承父級元素的字體大小。
瀏覽器的默認字體高都是 16px。所以未經調整的瀏覽器都符合: 1em=16px。那么 12px=0. 75em, 10px=0. 625em。
[
](https://github.com/yisainan/web-interview/issues/33)
### 如何垂直居中一個元素？\*\*\*\*\*
重點學習布局
[布局](https://sweet-kk.github.io/css-layout/#/?id=%e4%b8%80%e3%80%81%e6%b0%b4%e5%b9%b3%e5%b1%85%e4%b8%ad)
參考答案：
方法一：絕對定位居中（原始版之已知元素的高寬）
~~~css
.content {
width: 200px;
height: 200px;
background-color: #6699ff;
position: absolute;
/*父元素需要相對定位*/
top: 50%;
left: 50%;
margin-top: -100px;
/*設為高度的1/2*/
margin-left: -100px;
/*設為寬度的1/2*/
}
~~~
方法二：絕對定位居中（改進版之一未知元素的高寬）
~~~css
.content {
width: 200px;
height: 200px;
background-color: #6699ff;
position: absolute;
/*父元素需要相對定位*/
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/*在水平和垂直方向上各偏移-50%*/
}
~~~
方法三：絕對定位居中（改進版之二未知元素的高寬）
~~~css
.content {
width: 200px;
height: 200px;
background-color: #6699ff;
margin: auto;
/*很關鍵的一步*/
position: absolute;
/*父元素需要相對定位*/
left: 0;
top: 0;
right: 0;
bottom: 0;
/*讓四個定位屬性都為0*/
}
~~~
方法四：flex 布局居中
~~~css
body {
display: flex;
/*設置外層盒子display為flex*/
align-items: center;
/*設置內層盒子的垂直居中*/
justify-content: center;
/*設置內層盒子的水平居中*/
.content {
width: 200px;
height: 200px;
background-color: #6699ff;
}
}
~~~
那么問題來了，如何垂直居中一個 img（用更簡便的方法。）
~~~css
.content {
//img的容器設置如下
display: table-cell;
text-align: center;
vertical-align: middle;
}
~~~
### BFC \*\*\*\*
參考答案：
* 什么是 BFC
BFC（Block Formatting Context）格式化上下文，是 Web 頁面中盒模型布局的 CSS 渲染模式，指一個獨立的渲染區域或者說是一個隔離的獨立容器。
* 形成 BFC 的條件
* 浮動元素，float 除 none 以外的值
* 定位元素，position（absolute，fixed）
* display 為以下其中之一的值 inline-block，table-cell，table-caption
* overflow 除了 visible 以外的值（hidden，auto，scroll）
* BFC 的特性
* 內部的 Box 會在垂直方向上一個接一個的放置。
* 垂直方向上的距離由 margin 決定
* bfc 的區域不會與 float 的元素區域重疊。
* 計算 bfc 的高度時，浮動元素也參與計算
* bfc 就是頁面上的一個獨立容器，容器里面的子元素不會影響外面元素。
### 用純 CSS 創建一個三角形的原理是什么？
參考答案：
~~~css
span {
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;
}
~~~
### Sass、LESS 是什么？大家為什么要使用他們？\*\*\*
適當學學這倆, 現在很多公司用
參考答案：他們是 CSS 預處理器。他是 CSS 上的一種抽象層。他們是一種特殊的語法/語言編譯成 CSS。
例如 Less 是一種動態樣式語言. 將 CSS 賦予了動態語言的特性，如變量，繼承，運算， 函數. LESS 既可以在客戶端上運行 (支持 IE 6+, Webkit, Firefox)，也可一在服務端運行 (借助 Node. js)。
為什么要使用它們？
結構清晰，便于擴展。
可以方便地屏蔽瀏覽器私有語法差異。這個不用多說，封裝對瀏覽器語法差異的重復處理，減少無意義的機械勞動。
可以輕松實現多重繼承。
完全兼容 CSS 代碼，可以方便地應用到老項目中。LESS 只是在 CSS 語法上做了擴展，所以老的 CSS 代碼也可以與 LESS 代碼一同編譯。
[
](https://github.com/yisainan/web-interview/issues/37)
### display:none 與 visibility:hidden 的區別是什么
參考答案：
display?:? 隱藏對應的元素但不擠占該元素原來的空間。
visibility:? 隱藏對應的元素并且擠占該元素原來的空間。
即是，使用 CSS display:none 屬性后，HTML 元素（對象）的寬度、高度等各種屬性值都將“丟失”; 而使用 visibility:hidden 屬性后，HTML 元素（對象）僅僅是在視覺上看不見（完全透明），而它所占據的空間位置仍然存在。
[
](https://github.com/yisainan/web-interview/issues/38)
### 移動端 1px 問題的解決辦法 \*\*\*\*\*
參考答案：推薦解決方法：媒體查詢 + transfrom
~~~plain
/* 2倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
.border-bottom::after {
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
/* 3倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {
.border-bottom::after {
-webkit-transform: scaleY(0.33);
transform: scaleY(0.33);
}
}
~~~
[其他解決方案參考](https://www.jianshu.com/p/31f8907637a6)
### 哪些 css 屬性可以繼承？\*\*\*\*
參考答案：
可繼承： font-size font-family color, ul li dl dd dt;
不可繼承 ：border padding margin width height ;
[
](https://github.com/yisainan/web-interview/issues/40)
### 幾種常見的 CSS 布局
參考答案：
* 單列布局
* 兩列自適應布局
* 圣杯布局和雙飛翼布局
* 偽等高布局
* 粘連布局
[
](https://github.com/yisainan/web-interview/issues/41)
### 與 li 之間有看不見的空白間隔是什么原因引起的？有什么解決辦法？\*\*\*\*\*
參考答案：瀏覽器的默認行為是把 inline 元素間的空白字符（空格換行 tab）渲染成一個空格，也就是我們上面的代碼
* 換行后會產生換行字符，而它會變成一個空格，當然空格就占用一個字符的寬度。
解決方案：
方法一：既然是因為 `<li>` 換行導致的，那就可以將 `<li>` 代碼全部寫在一排，如下
~~~html
<div class="wrap">
<h3>li標簽空白測試</h3>
<ul>
<li class="part1"></li>
<li class="part2"></li>
<li class="part3"></li>
<li class="part4"></li>
</ul>
</div>
~~~
方法二：我們為了代碼美觀以及方便修改，很多時候我們不可能將 `<li>` 全部寫在一排，那怎么辦？既然是空格占一個字符的寬度，那我們索性就將 `<ul>` 內的字符尺寸直接設為 0，將下面樣式放入樣式表，問題解決。
~~~css
.wrap ul {
font-size: 0px;
}
~~~
但隨著而來的就是 `<ul>` 中的其他文字就不見了，因為其尺寸被設為 0px 了，我們只好將他們重新設定字符尺寸。方法三：本來以為方法二能夠完全解決問題，但經測試，將 li 父級標簽字符設置為 0 在 Safari 瀏覽器依然出現間隔空白；既然設置字符大小為 0 不行，那咱就將間隔消除了，將下面代碼替換方法二的代碼，目前測試完美解決。同樣隨來而來的問題是 li 內的字符間隔也被設置了，我們需要將 li 內的字符間隔設為默認。
~~~css
.wrap ul {
letter-spacing: -5px;
}
~~~
之后記得設置 li 內字符間隔
~~~css
.wrap ul li {
letter-spacing: normal;
}
~~~
[
](https://github.com/yisainan/web-interview/issues/90)
### 設置元素浮動后，該元素的 display 值是多少？
參考答案：
自動變成 display:block
[
](https://github.com/yisainan/web-interview/issues/91)
### 怎么讓 Chrome 支持小于 12px 的文字？\*\*\*
參考答案：
css3 的 transform 屬性，設置值為 scale(x, y) 定義 2D 縮放轉換
示例：
\-webkit-transform: scale(0. 50);
### [
](https://github.com/yisainan/web-interview/issues/92)display:inline-block 什么時候會顯示間隙？
參考答案：間隙產生的原因是因為，換行或空格會占據一定的位置
推薦解決方法：
父元素中設置
font-size:0; letter-spaceing:-4px;
[
](https://github.com/yisainan/web-interview/issues/93)
### .png、jpg、gif 這些圖片格式解釋一下，分別什么時候用？，webp 呢
參考答案：
gif 圖形交換格式，索引顏色格式，顏色少的情況下，產生的文件極小，支持背景透明，動畫，圖形漸進，無損壓縮（適合線條，圖標等），缺點只有 256 種顏色
jpg 支持上百萬種顏色，有損壓縮，壓縮比可達 180：1，而且質量受損不明顯，不支持圖形漸進與背景透明，不支持動畫
png 為替代 gif 產生的，位圖文件，支持透明，半透明，不透明。不支持動畫，無損圖像格式。Png8 簡單說是靜態 gif，也只有 256 色，png24 不透明，但不止 256 色。
webp 谷歌開發的旨在加快圖片加載速度的圖片格式，圖片壓縮體積是 jpeg 的 2/3，有損壓縮。高版本的 W3C 瀏覽器才支持，google39+，safari7+
[
](https://github.com/yisainan/web-interview/issues/94)
### style 標簽寫在 body 后與 body 前有什么區別？\*\*\*\*
參考答案：
從上向下加載，加載順序不同
[
](https://github.com/yisainan/web-interview/issues/95)
### 超鏈接訪問過后 hover 樣式就不出現的問題是什么？如何解決？
參考答案：被點擊訪問過的超鏈接樣式不在具有 hover 和 active 了, 解決方法是改變 CSS 屬性的排列順序: L-V-H-A（link, visited, hover, active）
### 什么是 Css Hack？ie6, 7, 8 的 hack 分別是什么？
參考答案：針對不同的瀏覽器寫不同的 CSS?code 的過程，就是 CSS?hack。
示例如下：
~~~css
#test {
width: 300px;
height: 300px;
background-color: blue;/_firefox_/ background-color: red\9;/_all ie_/ background-color: yellow;/_ie8_/+background-color: pink;/_ie7_/ \_background-color: orange;/_ie6_/
}
:root #test {
background-color: purple\9;
}
/*ie9*/
@media all and (min-width:0px) {
#test {
background-color: black;
}
}
/*opera*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
#test {
background-color: gray;
}
}
/*chrome and safari*/
~~~
[
](https://github.com/yisainan/web-interview/issues/97)
重置（resetting）CSS 和 標準化（normalizing）CSS 的區別是什么？你會選擇哪種方式，為什么？
參考答案：
* **重置（Resetting）**： 重置意味著除去所有的瀏覽器默認樣式。對于頁面所有的元素，像 `margin` 、 `padding` 、 `font-size` 這些樣式全部置成一樣。你將必須重新定義各種元素的樣式。
* **標準化（Normalizing）**： 標準化沒有去掉所有的默認樣式，而是保留了有用的一部分，同時還糾正了一些常見錯誤。
當需要實現非常個性化的網頁設計時，我會選擇重置的方式，因為我要寫很多自定義的樣式以滿足設計需求，這時候就不再需要標準化的默認樣式了。
解析：[參考](https://stackoverflow.com/questions/6887336/what-is-the-difference-between-normalize-css-and-reset-css)
[
](https://github.com/yisainan/web-interview/issues/98)
### css sprite 是什么, 有什么優缺點
參考答案：概念：將多個小圖片拼接到一個圖片中。通過 background-position 和元素尺寸調節需要顯示的背景圖案。如果圖片是icon（圖標）就直接用 字體圖標（[阿里圖標庫](https://www.iconfont.cn/)，[Font Awesome 中文網](http://www.fontawesome.com.cn/)）
優點：
* 減少 HTTP 請求數，極大地提高頁面加載速度。
* 增加圖片信息重復度，提高壓縮比，減少圖片大小。
* 更換風格方便，只需在一張或幾張圖片上修改顏色或樣式即可實現。
缺點：
* 圖片合并麻煩。
* 維護麻煩，修改一個圖片可能需要從新布局整個圖片，樣式。
[
](https://github.com/yisainan/web-interview/issues/99)
### 什么是 FOUC? 如何避免
參考答案：
1\. 什么是 Fouc(文檔樣式短暫失效)？
在引用 css 的過程中，如果方法不當或者位置引用不對，會導致某些頁面在 windows 下的 ie 出現一些奇怪的現象，以無樣式顯示頁面內容的瞬間閃爍，這種現象稱之為文檔樣式短暫失效，簡稱 FOCU。
2\. 原因大致為：
* 使用 import 方法導入樣式表
* 將樣式表放在頁面底部
* 有幾個樣式表，放在 html 結構的不同位置。
3\. 其實原理很清楚：當樣式表晚于結構性 html 加載，當加載到此樣式表時，頁面將停止之前的渲染。此樣式表被下載和解析后，將重新渲染頁面，也就出現了短暫的花屏現象。
4\. 解決方法：使用 link 標簽將樣式表放在文檔 head 中。
### css3 有哪些新特性 \*\*\*\*\*
參考答案：
1\. 選擇器
* E:last-child 匹配父元素的最后一個子元素 E。
* E:nth-child(n)匹配父元素的第 n 個子元素 E。
* E:nth-last-child(n) CSS3 匹配父元素的倒數第 n 個子元素 E。
2\. RGBA
回答此問題，面試官很可能繼續問：rgba()和 opacity 的透明效果有什么不同？
3\. 多欄布局
~~~html
<div class="mul-col">
<div>
<h3>新手上路</h3>
<p>新手專區 消費警示 交易安全 24小時在線幫助 免費開店</p>
</div>
<div>
<h3>付款方式</h3>
<p>快捷支付 信用卡 余額寶 螞蟻花唄 貨到付款</p>
</div>
<div>
<h3>淘寶特色</h3>
<p>手機淘寶 旺信 大眾評審 B格指南</p>
</div>
</div>
~~~
~~~css
.mul-col {
column-count: 3;
column-gap: 5px;
column-rule: 1px solid gray;
border-radius: 5px;
border: 1px solid gray;
padding: 10px;
}
~~~
4\. 多背景圖
~~~css
/* backgroundimage:url('1.jpg),url('2.jpg') */
~~~
5\. CSS3 word-wrap 屬性
~~~css
p.test {
word-wrap: break-word;
}
~~~
6\. 文字陰影
~~~css
text-shadow: 5px 2px 6px rgba(64, 64, 64, 0.5);
~~~
7\. [@font-face](/font-face ) 屬性
Font-face 可以用來加載字體樣式，而且它還能夠加載服務器端的字體文件，讓客戶端顯示客戶端所沒有安裝的字體。
~~~css
@font-face {
font-family: BorderWeb;
src: url(BORDERW0.eot);
}
@font-face {
font-family: Runic;
src: url(RUNICMT0.eot);
}
.border {
font-size: 35px;
color: black;
font-family: "BorderWeb";
}
.event {
font-size: 110px;
color: black;
font-family: "Runic";
}
/* 淘寶網字體使用 */
@font-face {
font-family: iconfont;
src: url(//at.alicdn.com/t/font_1465189805_4518812.eot);
}
~~~
8\. 圓角
~~~css
border-radius: 15px;
~~~
9\. 邊框圖片
CSS3 border-image 屬性
10. 盒陰影
~~~css
/* box-shadow: 水平方向的偏移量 垂直方向的偏移量 模糊程度 擴展程度 顏色 是否具有內陰影 */
~~~
11. 盒子大小
CSS3 box-sizing 屬性
12. 媒體查詢
CSS3 [@media](/media ) 查詢
13. CSS3 動畫
[@keyframes](/keyframes )
~~~css
@keyframes abc {
from {
transform: rotate(0);
}
50% {
transform: rotate(90deg);
}
to {
transform: rotate(360deg);
}
}
~~~
animation 屬性
~~~css
/* animation ： name duration timing-function delay interation-count direction play-state */
~~~
14. 漸變效果
~~~css
background-image: -webkit-gradient(linear,
0% 0%,
100% 0%,
from(#2a8bbe),
to(#fe280e));
~~~
15. CSS3 彈性盒子模型
* 彈性盒子是 CSS3 的一種新的布局模式。
* CSS3 彈性盒（ Flexible Box 或 flexbox），是一種當頁面需要適應不同的屏幕大小以及設備類型時確保元素擁有恰當的行為的布局方式。
* 引入彈性盒布局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間。
16. CSS3 過渡
~~~css
div {
transition: width 2s;
-moz-transition: width 2s;
/* Firefox 4 */
-webkit-transition: width 2s;
/* Safari 和 Chrome */
-o-transition: width 2s;
/* Opera */
}
~~~
17. CSS3 變換
* rotate()旋轉
* translate()平移
* scale( )縮放
* skew()扭曲/傾斜
* 變換基點
* 3d 轉換
[參考](https://www.w3school.com.cn/css3/index.asp)
[
](https://github.com/yisainan/web-interview/issues/101)
### display 有哪些值？說明他們的作用 \*\*\*
這種不需要非要記住， 寫的多了就熟悉了，記不住百度
參考答案：
display： **none | inline | block | list-item | inline-block |** table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group | run-in | box | inline-box | flexbox | inline-flexbox | **flex** | inline-flex
解析：
默認值：inline
~~~plain
none： 隱藏對象。與visibility屬性的hidden值不同，其不為被隱藏的對象保留其物理空間
inline： 指定對象為內聯元素。
block： 指定對象為塊元素。
list-item： 指定對象為列表項目。
inline-block： 指定對象為內聯塊元素。（CSS2）
table： 指定對象作為塊元素級的表格。類同于html標簽<table>（CSS2）
inline-table： 指定對象作為內聯元素級的表格。類同于html標簽<table>（CSS2）
table-caption： 指定對象作為表格標題。類同于html標簽<caption>（CSS2）
table-cell： 指定對象作為表格單元格。類同于html標簽<td>（CSS2）
table-row： 指定對象作為表格行。類同于html標簽<tr>（CSS2）
table-row-group： 指定對象作為表格行組。類同于html標簽<tbody>（CSS2）
table-column： 指定對象作為表格列。類同于html標簽<col>（CSS2）
table-column-group： 指定對象作為表格列組顯示。類同于html標簽<colgroup>（CSS2）
table-header-group： 指定對象作為表格標題組。類同于html標簽<thead>（CSS2）
table-footer-group： 指定對象作為表格腳注組。類同于html標簽<tfoot>（CSS2）
run-in： 根據上下文決定對象是內聯對象還是塊級對象。（CSS3）
box： 將對象作為彈性伸縮盒顯示。（伸縮盒最老版本）（CSS3）
inline-box： 將對象作為內聯塊級彈性伸縮盒顯示。（伸縮盒最老版本）（CSS3）
flexbox： 將對象作為彈性伸縮盒顯示。（伸縮盒過渡版本）（CSS3）
inline-flexbox： 將對象作為內聯塊級彈性伸縮盒顯示。（伸縮盒過渡版本）（CSS3）
flex： 將對象作為彈性伸縮盒顯示。（伸縮盒最新版本）（CSS3）
inline-flex： 將對象作為內聯塊級彈性伸縮盒顯示。（伸縮盒最新版本）（CSS3）
~~~
[參考](https://www.jianshu.com/p/77e1c36c0895)
[
](https://github.com/yisainan/web-interview/issues/102)
### display:inline-block 什么時候不會顯示間隙？(攜程)\*\*\*\*\*
參考答案：inline-block 布局的元素在編輯器里寫在同一行
[
](https://github.com/yisainan/web-interview/issues/103)
### PNG, GIF, JPG 的區別及如何選
參考答案：
GIF：
* 1：256 色
* 2： 無損，編輯 保存時候，不會損失。
* 3：支持簡單動畫。
* 4：支持 boolean 透明，也就是要么完全透明，要么不透明
JPEG：
* 1：millions of colors
* 2： 有損壓縮， 意味著每次編輯都會失去質量。
* 3：不支持透明。
* 4：適合照片，實際上很多相機使用的都是這個格式。
PNG：
* 1：無損，其實 PNG 有好幾種格式的，一般分為兩類：PNG8 和 truecolor PNGs；
* 與 GIF 相比：
* 它通常會產生較小的文件大小。
* 它支持阿爾法（變量）透明度。
* 無動畫支持
* 與 JPEG 相比：
* 文件更大
* 無損
* 因此可以作為 JPEG 圖片中間編輯的中轉格式。
* 結論：
* JPEG 適合照片
* GIF 適合動畫
* PNG 適合其他任何種類——圖表，buttons，背景，圖表等等。
[參考](https://www.cnblogs.com/yadiblogs/p/9546935.html)
[
](https://github.com/yisainan/web-interview/issues/104)
### 行內元素 float:left 后是否變為塊級元素？\*\*\*\*\*
參考答案：
* 行內元素設置成浮動之后變得更加像是 inline-block
* 行內塊級元素，設置成這個屬性的元素會同時擁有行內和塊級的特性，最明顯的不同是它的默認寬度不是 100%，行內元素默認 100%寬度占據一行
* 這時候給行內元素設置 padding-top 和 padding-bottom 或者 width、height 都是有效果的
[
](https://github.com/yisainan/web-interview/issues/105)
### 在網頁中的應該使用奇數還是偶數的字體？為什么呢？
參考答案：應該使用偶數字體
1\. 比例關系
相對來說偶數字號比較容易和頁面中其他部分的字號構成一個比例關系。如我使用 14px 的字體作為正文字號，那么其他部分的字體（如標題）就可以使用 14×1. 5 =21px 的字體，或者在一些地方使用到了 14×0. 5=7px 的 padding 或者 margin，如果你是在用 sass 或者 less 編寫 css，這時候用處就凸顯出來了。
2\. UI 設計師的緣故
大多數設計師用的軟件如 ps 提供的字號是偶數，自然到了 ? 前端那邊也是用的是偶數。
3\. 瀏覽器緣故
其一是低版本的瀏覽器 ie6 會把奇數字體強制轉化為偶數，即 13px 渲染為 14px。
其二是為了平分字體。偶數寬的漢字，如 12px 的漢子，去掉 1 像素的字體間距，填充了的字體像素寬度其實就是 11px，這樣的漢字中豎線左右是平分的，如“中”子，左右就是 5px 了。
4\. 系統差別
Windows 自帶的點陣宋體（中易宋體）從 Vista 開始只提供 12、14、16 px 這三個大小的點陣，而 13、15、17 px 時用的是小一號的點陣（即每個字占的空間大了 1 px，但點陣沒變），于是略顯稀疏。
而在 Linux 和其他手持設備上，奇數偶數的渲染效果其實相差不大。
解析：[參考](https://blog.csdn.net/jian_xi/article/details/79346477)
[
](https://github.com/yisainan/web-interview/issues/106)
### CSS 合并方法
參考答案：[@import](/import ) url(css 文件地址)
[
](https://github.com/yisainan/web-interview/issues/107)
### 列出你所知道可以改變頁面布局的屬性 \*\*\*\*\*
參考答案：width、height、float、position、等
[
](https://github.com/yisainan/web-interview/issues/108)
### CSS 在性能優化方面的實踐 \*\*\*\*
參考答案：
1\. 內聯首屏關鍵 CSS（Critical CSS）
內聯 CSS 能夠使瀏覽器開始頁面渲染的時間提前，只將渲染首屏內容所需的關鍵 CSS 內聯到 HTML 中
2\. 異步加載 CSS
3\. 文件壓縮
4\. 去除無用 CSS
解析：[參考](https://www.cnblogs.com/heroljy/p/9412704.html)
[
](https://github.com/yisainan/web-interview/issues/109)
**CSS3 動畫（簡單動畫的實現，如旋轉等）\*\*\***
參考答案：
讓一個 div 元素旋轉 360 度示例
1\. div 的樣式結構:
~~~css
div {
margin: 50px auto;
width: 200px;
height: 200px;
background-color: pink;
}
~~~
2\. 設置旋轉屬性的類名:
~~~css
div.rotate {
/* 旋轉360度 */
transform: rotate(360deg);
/* all表示所有屬性,1s表示在一秒的時間完成動畫 */
transition: all 1s;
}
~~~
~~~plain
transition 有四個屬性:
property: 規定應用過渡的 CSS 屬性的名稱。
duration: 定義過渡效果花費的時間。默認是 0,單位是 s。
timing-function: 規定過渡效果的時間曲線。默認是 "ease"。勻速'linear',加速'ease-in',減速'ease-out',先快后慢'ease-in-out'。
delay: 規定過渡效果何時開始。默認是 0。單位 s。
可以連寫: transition: property duration timing-function delay;
~~~
3\. 給 div 元素設置鼠標移入時旋轉, 也就是給它加上. rotate 類名. 鼠標移出時移除類名
~~~javascript
$(function() {
$("div")
.mouseenter(function() {
$(this).addClass("rotate");
})
.mouseleave(function() {
$(this).removeClass("rotate");
});
});
~~~
解析：[參考](https://blog.csdn.net/qq_42209630/article/details/80338578)
[
](https://github.com/yisainan/web-interview/issues/110)
### base64 的原理及優缺點 \*\*\*
參考答案：
1\. 什么是 Base64
Base64 是一種基于 64 個可打印字符來表示二進制數據的編碼方式，是從二進制數據到字符的過程。
原則上，計算機中所有內容都是二進制形式存儲的，所以所有內容（包括文本、影音、圖片等）都可以用 base64 來表示。
2\. 適用場景
~~~plain
1.Base64一般用于在HTTP協議下傳輸二進制數據，由于HTTP協議是文本協議，所以在HTTP寫一下傳輸二進制數據需要將二進制數據轉化為字符數據，
網絡傳輸只能傳輸可打印字符，
在ASCII碼中規定，0-31、128這33個字符屬于控制字符，
32~127這95個字符屬于可打印字符
那么其它字符怎么傳輸呢，Base64就是其中一種方式，
2.將圖片等資源文件以Base64編碼形式直接放于代碼中，使用的時候反Base64后轉換成Image對象使用。
3.偶爾需要用這條純文本通道傳一張圖片之類的情況發生的時候，就會用到Base64，比如多功能Internet 郵件擴充服務（MIME）就是用Base64對郵件的附件進行編碼的。
~~~
3\. Base64 編碼原理
Base64 編碼之所以稱為 Base64，是因為其使用 64 個字符來對任意數據進行編碼，同理有 Base32、Base16 編碼。標準 Base64 編碼使用的 64 個字符為：
有點特殊的是最后兩個字符，因對最后兩個字符的選擇不同，Base64 編碼又有很多變種，比如用于編碼 URL 的 Base64 URL 編碼。
Base64 編碼本質上是一種將二進制數據轉成文本數據的方案。對于非二進制數據，是先將其轉換成二進制形式，然后每連續 6 比特（2 的 6 次方=64）計算其十進制值，根據該值在上面的索引表中找到對應的字符，最終得到一個文本字符串。
假設我們要對 Hello! 進行 Base64 編碼，按照 ASCII 表，其轉換過程如下圖所示：
可知 Hello! 的 Base64 編碼結果為 SGVsbG8h，每 3 個原始字符經 Base64 編碼成 4 個字符。那么，當原始字符串長度不能被 3 整除時，怎么辦呢？
以 Hello!! 為例，其轉換過程為：
Hello!! Base64 編碼的結果為 SGVsbG8hIQAA。可見，不能被 3 整除時會采用來來補 0 的方式來完成編碼。
需要注意的是：標準 Base64 編碼通常用 = 字符來替換最后的 A，即編碼結果為 SGVsbG8hIQ==。因為 = 字符并不在 Base64 編碼索引表中，其意義在于結束符號，在 Base64 解碼時遇到 = 時即可知道一個 Base64 編碼字符串結束。
4\. 優缺點
優點: 可以將二進制數據轉化為可打印字符，方便傳輸數據，對數據進行簡單的加密，肉眼安全。
缺點：內容編碼后體積變大，編碼和解碼需要額外工作量。
解析：[參考 1](https://segmentfault.com/a/1190000012654771)、[參考 2](https://blog.csdn.net/fightingitpanda/article/details/83305100)
[
](https://github.com/yisainan/web-interview/issues/111)
### stylus/sass/less 區別
參考答案：
1\. 后綴
默認 Sass 使用 . sass 擴展名，而 Less 使用 . less 擴展名，Stylus 默認使用 . styl 的文件擴展名
2\. 語法
3\. 變量
* sass 變量必須是以$開頭的，然后變量和值之間使用冒號（：）隔開，和 css 屬性是一樣的
* Less css 中變量都是用@開頭的，其余與 sass 都是一樣的
* stylus 對變量是沒有任何設定的，可以是以$開頭，或者任何的字符，而且與變量之間可以用冒號，空格隔開，但是在 stylus 中不能用@開頭
解析：[參考](https://blog.csdn.net/pedrojuliet/article/details/72887490)
[
](https://github.com/yisainan/web-interview/issues/112)
**position 的值， relative 和 absolute 分別是相對于誰進行定位的？\*\*\*\*\*\*\***
參考答案：
* absolute : 生成絕對定位的元素， 相對于最近一級的 定位不是 static 的父元素來進行定位。
* fixed （老 IE 不支持）生成絕對定位的元素，通常相對于瀏覽器窗口或 frame 進行定位。
* relative 生成相對定位的元素，相對于其在普通流中的位置進行定位。
* static 默認值。沒有定位，元素出現在正常的流中
* sticky 生成粘性定位的元素，容器的位置根據正常文檔流計算得出
[
](https://github.com/yisainan/web-interview/issues/113)
### 對偏移、卷曲、可視的理解
參考答案：
~~~plain
偏移
offsetWidth width + padding + border
offsetHeight height + padding + border
offsetLeft
offsetTop
offsetParent
注意：沒有offsetRight和offsetBottom
************************************************************************************************
卷曲
scrollWidth width + padding
scrollHeight 當內部的內容溢出盒子的時候， 頂邊框的底部，計算到內容的底部；如果內容沒有溢出盒子，計算方式為盒子內部的真實高度（邊框到邊框）
scrollLeft 這個scroll系列屬性不是只讀的
scrollTop
scroll()
此函數可以獲取卷曲的高度和卷曲的寬度
function myScroll() {
return {
top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0
};
}
滾動滾動條的時候觸發事件
box（window）.onscroll = function () {}
************************************************************************************************
可視
clientWidth 獲取的是元素內部的真實寬度 width + padding
clientHeight 邊框之間的高度
clientLeft 相當于左邊框的寬度 如果元素包含了滾動條，并且滾動條顯示在元素的左側。這時，clientLeft屬性會包含滾動條的寬度17px
clientTop 相當于頂邊框的寬度
client()
此函數可以獲取瀏覽器可視區域的寬高
function myClient() {
return {
wid: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0,
heit: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0
};
}
----------------------------------------------------------------------------------------------
@offsetHeight和style.height的區別
demo.style.height只能獲取行內樣式，如果樣式寫到了其他地方，甚至根本就沒寫，便無法獲取
style.height是字符串（而且帶單位），offsetHeight是數值
demo.style.height可以設置行內樣式，offsetHeight是只讀屬性
因此，一般用demo.offsetHeight來獲取某元素的真實寬度/高度，用style.height來設置寬度/高度
----------------------------------------------------------------------------------------------
@offsetLeft和style.left的區別
一、style.left只能獲取行內樣式
二、offsetLeft只讀，style.left可讀可寫
三、offsetLeft是數值，style.left是字符串并且有單位px
四、如果沒有加定位，style.left獲取的數值可能是無效的
五、最大區別在于offsetLeft以border左上角為基準，style.left以margin左上角為基準
----------------------------------------------------------------------------------------------
@scrollHeight和scrollWidth
標簽內部實際內容的高度/寬度
不計算邊框，如果內容不超出盒子，值為盒子的寬高（不帶邊框）
如果內容超出了盒子，就是從頂部或左部邊框內側一直到內容a的最外部分
----------------------------------------------------------------------------------------------
@scrollTop和scrollLeft
被卷去部分的 頂部/左側 到可視區域 頂部/左側 的距離
~~~
解析：
[
](https://github.com/yisainan/web-interview/issues/114)
### 精靈圖和 base64 如何選擇？
參考答案：
#### Css Sprites：
介紹：
Css Sprites（雪碧圖或 css 精靈），是網頁圖片處理的一種方式，它允許你將一個頁面涉及到的所有零星圖片都包含到一張大圖中去，這樣一來，當訪問該頁面時，載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了。
原理：
將許多的小圖片整合到一張大圖片中，利用 css 中的 background-image 屬性，background-position 屬性定位某個圖片位置，來達到在大圖片中引用某個部位的小圖片的效果。
優點：
減少網頁的 http 請求，提升網頁加載速度。
合并多張小圖片成大圖，能減少字節總數（大圖大小<=多張小圖大小）.
缺點：
前期需要處理圖片將小圖合并，多些許工程量。
對于需要經常改變的圖片維護起來麻煩。
#### base64：
介紹：
base64 是網絡上最常見的用于傳輸 8Bit 字節代碼的編碼方式之一，要求把每三個 8Bit 的字節轉換為四個 6Bit 的字節，Base64 是網絡上最常見的用于傳輸 8Bit 字節代碼的編碼方式之一。
通俗點講：將資源原本二進制形式轉成以 64 個字符基本單位，所組成的一串字符串。
比如一張圖片轉成 base64 編碼后就像這樣，圖片直接以 base64 形式嵌入文件中（很長沒截完）：
生成 base64 編碼：
圖片生成 base64 可以用一些工具，如在線工具，但在項目中這樣一個圖片這樣生成是挺繁瑣。
特別說下，webpack 中的 url-loader 可以完成這個工作，可以對限制大小的圖片進行 base64 的轉換，非常方便。
優點：
base64 的圖片會隨著 html 或者 css 一起下載到瀏覽器, 減少了請求.
可避免跨域問題
缺點：
老東西（低版本）的 IE 瀏覽器不兼容。
體積會比原來的圖片大一點。
css 中過多使用 base64 圖片會使得 css 過大，不利于 css 的加載。
適用場景：
應用于小的圖片幾 k 的，太大的圖片會轉換后的大小太大，得不償失。
用于一些 css sprites 不利處理的小圖片，如一些可以通過 background-repeat 平鋪來做成背景的圖片
解析：[參考](https://www.cnblogs.com/wangqi2019/p/10498627.html)
[
](https://github.com/yisainan/web-interview/issues/115)
### 如果設計中使用了非標準的字體，你該如何去實現？
參考答案：使用 `@font-face` 并為不同的 `font-weight` 定義 `font-family` 。
[
](https://github.com/yisainan/web-interview/issues/116)
### 知道 css 有個 content 屬性嗎？有什么作用？有什么應用
參考答案：知道。css 的 content 屬性專門應用在 before/after 偽元素上，用來插入生成內容。最常見的應用是利用偽類清除浮動。
~~~css
//一種常見利用偽類清除浮動的代碼
.clearfix:after {
content: "."; //這里利用到了content屬性
display: block;
height: 0;
visibility: hidden;
clear: both;
}
.clearfix {
zoom: 1;
}
~~~
after 偽元素通過 content 在元素的后面生成了內容為一個點的塊級素，再利用 clear:both 清除浮動。
那么問題繼續還有，知道 css 計數器（序列數字字符自動遞增）嗎？如何通過 css content 屬性實現 css 計數器？
參考答案：css 計數器是通過設置 counter-reset 、counter-increment 兩個屬性 、及 counter()/counters()一個方法配合 after / before 偽類實現。
[
](https://github.com/yisainan/web-interview/issues/117)
### CSS 選擇器的優先級是如何計算的？\*\*\*\*\*
參考答案：瀏覽器通過優先級規則，判斷元素展示哪些樣式。優先級通過 4 個維度指標確定，我們假定以 `a、b、c、d` 命名，分別代表以下含義：
1\. `a` 表示是否使用內聯樣式（inline style）。如果使用， `a` 為 1，否則為 0。2\. `b` 表示 ID 選擇器的數量。3\. `c` 表示類選擇器、屬性選擇器和偽類選擇器數量之和。4\. `d` 表示標簽（類型）選擇器和偽元素選擇器之和。
優先級的結果并非通過以上四個值生成一個得分，而是每個值分開比較。 `a、b、c、d` 權重從左到右，依次減小。判斷優先級時，從左到右，一一比較，直到比較出最大值，即可停止。所以，如果 `b` 的值不同，那么 `c` 和 `d` 不管多大，都不會對結果產生影響。比如 `0，1，0，0` 的優先級高于 `0，0，10，10` 。
當出現優先級相等的情況時，最晚出現的樣式規則會被采納。如果你在樣式表里寫了相同的規則（無論是在該文件內部還是其它樣式文件中），那么最后出現的（在文件底部的）樣式優先級更高，因此會被采納。
在寫樣式時，我會使用較低的優先級，這樣這些樣式可以輕易地覆蓋掉。尤其對寫 UI 組件的時候更為重要，這樣使用者就不需要通過非常復雜的優先級規則或使用 `!important` 的方式，去覆蓋組件的樣式了。
解析：[參考](https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/)、[參考](https://www.sitepoint.com/web-foundations/specificity/)
[
](https://github.com/yisainan/web-interview/issues/118)
### 請闡述 Float 定位的工作原理。\*\*\*\*\*
`**Float**`
參考答案：
浮動（float）是 CSS 定位屬性。浮動元素從網頁的正常流動中移出，但是保持了部分的流動性，會影響其他元素的定位（比如文字會圍繞著浮動元素）。這一點與絕對定位不同，絕對定位的元素完全從文檔流中脫離。
CSS 的 `clear` 屬性通過使用 `left` 、 `right` 、 `both` ，讓該元素向下移動（清除浮動）到浮動元素下面。
如果父元素只包含浮動元素，那么該父元素的高度將塌縮為 0。我們可以通過清除（clear）從浮動元素后到父元素關閉前之間的浮動來修復這個問題。
有一種 hack 的方法，是自定義一個 `.clearfix` 類，利用偽元素選擇器 `::after` 清除浮動。[另外還有一些方法](https://css-tricks.com/all-about-floats/#article-header-id-4)，比如添加空的 `<div></div>` 和設置浮動元素父元素的 `overflow` 屬性。與這些方法不同的是， `clearfix` 方法，只需要給父元素添加一個類，定義如下：
~~~css
.clearfix::after {
content: "";
display: block;
clear: both;
}
~~~
值得一提的是，把父元素屬性設置為 `overflow: auto` 或 `overflow: hidden` ，會使其內部的子元素形成塊格式化上下文（Block Formatting Context），并且父元素會擴張自己，使其能夠包圍它的子元素。
解析：[參考](https://css-tricks.com/all-about-floats/)
### 請闡述 z-index 屬性，并說明如何形成層疊上下文（stacking context）\*\*\*\*\*
`**z-index**`
參考答案：
CSS 中的 `z-index` 屬性控制重疊元素的垂直疊加順序。 `z-index` 只能影響 `position` 值不是 `static` 的元素。
沒有定義 `z-index` 的值時，元素按照它們出現在 DOM 中的順序堆疊（層級越低，出現位置越靠上）。非靜態定位的元素（及其子元素）將始終覆蓋靜態定位（static）的元素，而不管 HTML 層次結構如何。
層疊上下文是包含一組圖層的元素。 在一組層疊上下文中，其子元素的 `z-index` 值是相對于該父元素而不是 document root 設置的。每個層疊上下文完全獨立于它的兄弟元素。如果元素 B 位于元素 A 之上，則即使元素 A 的子元素 C 具有比元素 B 更高的 `z-index` 值，元素 C 也永遠不會在元素 B 之上.
每個層疊上下文是自包含的：當元素的內容發生層疊后，整個該元素將會在父層疊上下文中按順序進行層疊。少數 CSS 屬性會觸發一個新的層疊上下文，例如 `opacity` 小于 1， `filter` 不是 `none` ， `transform` 不是 `none` 。
解析：[參考 1](https://css-tricks.com/almanac/properties/z/z-index/)、[參考 2](https://philipwalton.com/articles/what-no-one-told-you-about-z-index/)、[參考 3](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context)
[
](https://github.com/yisainan/web-interview/issues/120)
### 如何解決不同瀏覽器的樣式兼容性問題？
參考答案：
* 在確定問題原因和有問題的瀏覽器后，使用單獨的樣式表，僅供出現問題的瀏覽器加載。這種方法需要使用服務器端渲染。
* 使用已經處理好此類問題的庫，比如 Bootstrap。
* 使用 `autoprefixer` 自動生成 CSS 屬性前綴。
* 使用 Reset CSS 或 Normalize. css。
[
](https://github.com/yisainan/web-interview/issues/121)
### 如何為功能受限的瀏覽器提供頁面？ 使用什么樣的技術和流程？
參考答案：
* 優雅的降級：為現代瀏覽器構建應用，同時確保它在舊版瀏覽器中正常運行。
* Progressivepx enhancement - The practice of building an application for a base level of user experience, but adding functional enhancements when a browser supports it.
* 漸進式增強：構建基于用戶體驗的應用，但在瀏覽器支持時添加新增功能。
* 利用 [caniuse. com](https://caniuse.com/) 檢查特性支持。
* 使用 `autoprefixer` 自動生成 CSS 屬性前綴。
* 使用 [Modernizr](https://modernizr.com/)進行特性檢測。
### 有什么不同的方式可以隱藏內容（使其僅適用于屏幕閱讀器）？
參考答案：
這些方法與可訪問性（a11y）有關。
* `visibility: hidden` ：元素仍然在頁面流中，并占用空間。
* `width: 0; height: 0` ：使元素不占用屏幕上的任何空間，導致不顯示它。
* `position: absolute; left: -99999px` ： 將它置于屏幕之外。
* `text-indent: -9999px` ：這只適用于 `block` 元素中的文本。
* Metadata： 例如通過使用 Schema. org，RDF 和 JSON-LD。
* WAI-ARIA：如何增加網頁可訪問性的 W3C 技術規范。
即使 WAI-ARIA 是理想的解決方案，我也會采用絕對定位方法，因為它具有最少的注意事項，適用于大多數元素，而且使用起來非常簡單。
解析：[參考 1](https://www.w3.org/TR/wai-aria-1.1/)、[參考 2](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA)、[參考 3](http://a11yproject.com/)
### 除了 screen ，你還能說出一個 @media 屬性的例子嗎？
`**screen**`[**@media**](/media )
參考答案：
* all
適用于所有設備。
* print
為了加載合適的文檔到當前使用的可視窗口. 需要提前咨詢 paged media（媒體屏幕尺寸）, 以滿足個別設備網頁尺寸不匹配等問題。
* screen
主要適用于彩色的電腦屏幕
* speech
speech 這個合成器. 注意: CSS2 已經有一個相似的媒體類型叫 aural.
解析：[參考](https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media)
### 編寫高效的 CSS 應該注意什么？\*\*\*\*\*
參考答案：
首先，瀏覽器從最右邊的選擇器，即關鍵選擇器（key selector），向左依次匹配。根據關鍵選擇器，瀏覽器從 DOM 中篩選出元素，然后向上遍歷被選元素的父元素，判斷是否匹配。選擇器匹配語句鏈越短，瀏覽器的匹配速度越快。避免使用標簽和通用選擇器作為關鍵選擇器，因為它們會匹配大量的元素，瀏覽器必須要進行大量的工作，去判斷這些元素的父元素們是否匹配。
[BEM (Block Element Modifier)](https://bem.info/) methodology recommends that everything has a single class, and, where you need hierarchy, that gets baked into the name of the class as well, this naturally makes the selector efficient and easy to override.[BEM (Block Element Modifier)](https://bem.info/)原則上建議為獨立的 CSS 類命名，并且在需要層級關系時，將關系也體現在命名中，這自然會使選擇器高效且易于覆蓋。
搞清楚哪些 CSS 屬性會觸發重新布局（reflow）、重繪（repaint）和合成（compositing）。在寫樣式時，避免觸發重新布局的可能。
解析：[參考 1](https://developers.google.com/web/fundamentals/performance/rendering/)、[參考 2](https://csstriggers.com/)
[
](https://github.com/yisainan/web-interview/issues/125)
### 使用 CSS 預處理的優缺點分別是什么？
參考答案：
優點：
* 提高 CSS 可維護性。
* 易于編寫嵌套選擇器。
* 引入變量，增添主題功能。可以在不同的項目中共享主題文件。
* 通過混合（Mixins）生成重復的 CSS。
* Splitting your code into multiple files. CSS files can be split up too but doing so will require a HTTP request to download each CSS file.
* 將代碼分割成多個文件。不進行預處理的 CSS，雖然也可以分割成多個文件，但需要建立多個 HTTP 請求加載這些文件。
缺點：
* 需要預處理工具。
* 重新編譯的時間可能會很慢。
[
](https://github.com/yisainan/web-interview/issues/126)
### 對于你使用過的 CSS 預處理，說說喜歡和不喜歡的地方？
參考答案：
喜歡：
* 絕大部分優點上題以及提過。
* Less 用 JavaScript 實現，與 NodeJS 高度結合。
不喜歡：
* 我通過 `node-sass` 使用 Sass，它用 C ++ 編寫的 LibSass 綁定。在 Node 版本切換時，我必須經常重新編譯。
* Less 中，變量名稱以 `@` 作為前綴，容易與 CSS 關鍵字混淆，如 `@media` 、 `@import` 和 `@font-face` 。
[
](https://github.com/yisainan/web-interview/issues/127)
### 解釋瀏覽器如何確定哪些元素與 CSS 選擇器匹配。\*\*\*\*\*
參考答案：
瀏覽器從最右邊的選擇器（關鍵選擇器）根據關鍵選擇器，瀏覽器從 DOM 中篩選出元素，然后向上遍歷被選元素的父元素，判斷是否匹配。選擇器匹配語句鏈越短，瀏覽器的匹配速度越快。
例如，對于形如 `p span` 的選擇器，瀏覽器首先找到所有 `<span>` 元素，并遍歷它的父元素直到根元素以找到 `<p>` 元素。對于特定的 `<span>` ，只要找到一個 `<p>` ，就知道'`已經匹配并停止繼續匹配。
解析：[參考](https://stackoverflow.com/questions/5797014/why-do-browsers-match-css-selectors-from-right-to-left)
[
](https://github.com/yisainan/web-interview/issues/128)
### 說說你對盒模型的理解，以及如何告知瀏覽器使用不同的盒模型渲染布局。
參考答案：
CSS 盒模型描述了以文檔樹中的元素而生成的矩形框，并根據排版模式進行布局。每個盒子都有一個內容區域（例如文本，圖像等）以及周圍可選的 `padding` 、 `border` 和 `margin` 區域。
CSS 盒模型負責計算：
* 塊級元素占用多少空間。
* 邊框是否重疊，邊距是否合并。
* 盒子的尺寸。
盒模型有以下規則：
* 塊級元素的大小由 `width` 、 `height` 、 `padding` 、 `border` 和 `margin` 決定。
* 如果沒有指定 `height` ，則塊級元素的高度等于其包含子元素的內容高度加上 `padding` （除非有浮動元素，請參閱下文）。
* 如果沒有指定 `width` ，則非浮動塊級元素的寬度等于其父元素的寬度減去父元素的 `padding` 。
* 元素的 `height` 是由內容的 `height` 來計算的。
* 元素的 `width` 是由內容的 `width` 來計算的。
* 默認情況下， `padding` 和 `border` 不是元素 `width` 和 `height` 的組成部分。
解析：[參考](https://www.smashingmagazine.com/2010/06/the-principles-of-cross-browser-css-coding/#understand-the-css-box-model)
### \* { box-sizing: border-box; } 會產生怎樣的效果？ \*\*\*\*
`*** { box-sizing: border-box; }**`
參考答案：
* 元素默認應用了 `box-sizing: content-box` ，元素的寬高只會決定內容（content）的大小。
* `box-sizing: border-box` 改變計算元素 `width` 和 `height` 的方式， `border` 和 `padding` 的大小也將計算在內。
* 元素的 `height` = 內容（content）的高度 + 垂直方向的 `padding` + 垂直方向 `border` 的寬度
* 元素的 `width` = 內容（content）的寬度 + 水平方向的 `padding` + 水平方向 `border` 的寬度
### relative 、 fixed 、 absolute 和 static 四種定位有什么區別？
`**relative**``**fixed**``**absolute**``**static**`
參考答案：
經過定位的元素，其 `position` 屬性值必然是 `relative` 、 `absolute` 、 `fixed` 或 `static` 。
* `static` ：默認定位屬性值。該關鍵字指定元素使用正常的布局行為，即元素在文檔常規流中當前的布局位置。此時 top, right, bottom, left 和 z-index 屬性無效。
* `relative` ：該關鍵字下，元素先放置在未添加定位時的位置，再在不改變頁面布局的前提下調整元素位置（因此會在此元素未添加定位時所在位置留下空白）。
* `absolute` ：不為元素預留空間，通過指定元素相對于最近的非 static 定位祖先元素的偏移，來確定元素位置。絕對定位的元素可以設置外邊距（margins），且不會與其他邊距合并。
* `fixed` ：不為元素預留空間，而是通過指定元素相對于屏幕視口（viewport）的位置來指定元素位置。元素的位置在屏幕滾動時不會改變。打印時，元素會出現在的每頁的固定位置。fixed 屬性會創建新的層疊上下文。當元素祖先的 transform 屬性非 none 時，容器由視口改為該祖先。
* `static` ：盒位置根據正常流計算(這稱為正常流動中的位置)，然后相對于該元素在流中的 flow root（BFC）和 containing block（最近的塊級祖先元素）定位。在所有情況下（即便被定位元素為 `table` 時），該元素定位均不對后續元素造成影響。當元素 B 被粘性定位時，后續元素的位置仍按照 B 未定位時的位置來確定。 `position: static` 對 `table` 元素的效果與 `position: relative` 相同。
解析：[參考](https://developer.mozilla.org/en/docs/Web/CSS/position)
[
](https://github.com/yisainan/web-interview/issues/131)
### 你使用過哪些現有的 CSS 框架？你是如何改進它們的？\*\*\*\*
參考答案：
* **Bootstrap**： 更新周期緩慢。Bootstrap 4 已經處于 alpha 版本將近兩年了。添加了在頁面中廣泛使用的微調按鈕組件。
* **Semantic UI**：源代碼結構使得自定義主題很難理解。非常規主題系統的使用體驗很差。外部庫的路徑需要硬編碼（hard code）配置。變量重新賦值沒有 Bootstrap 設計得好。
* **Bulma**： 需要很多非語義的類和標記，顯得很多余。不向后兼容，以至于升級版本后，會破壞應用的正常運行。
[
](https://github.com/yisainan/web-interview/issues/132)
### 你了解 CSS Flex 和 Grid 嗎？
參考答案：Flex 主要用于一維布局，而 Grid 則用于二維布局。
解析：
#### Flex
flex 容器中存在兩條軸， 橫軸和縱軸， 容器中的每個單元稱為 flex item。
在容器上可以設置 6 個屬性：
* flex-direction
* flex-wrap
* flex-flow
* justify-content
* align-items
* align-content
注意：當設置 flex 布局之后，子元素的 float、clear、vertical-align 的屬性將會失效。
#### Flex 項目屬性
有六種屬性可運用在 item 項目上:
1\. order
2\. flex-basis
3\. flex-grow
4\. flex-shrink
5\. flex
6\. align-self
#### Grid
CSS 網格布局用于將頁面分割成數個主要區域，或者用來定義組件內部元素間大小、位置和圖層之間的關系。
像表格一樣，網格布局讓我們能夠按行或列來對齊元素。 但是，使用 CSS 網格可能還是比 CSS 表格更容易布局。 例如，網格容器的子元素可以自己定位，以便它們像 CSS 定位的元素一樣，真正的有重疊和層次。
[
](https://github.com/yisainan/web-interview/issues/133)
### 響應式設計與自適應設計有何不同？
參考答案：
響應式設計和自適應設計都以提高不同設備間的用戶體驗為目標，根據視窗大小、分辨率、使用環境和控制方式等參數進行優化調整。
響應式設計的適應性原則：網站應該憑借一份代碼，在各種設備上都有良好的顯示和使用效果。響應式網站通過使用媒體查詢，自適應柵格和響應式圖片，基于多種因素進行變化，創造出優良的用戶體驗。就像一個球通過膨脹和收縮，來適應不同大小的籃圈。
自適應設計更像是漸進式增強的現代解釋。與響應式設計單一地去適配不同，自適應設計通過檢測設備和其他特征，從早已定義好的一系列視窗大小和其他特性中，選出最恰當的功能和布局。與使用一個球去穿過各種的籃筐不同，自適應設計允許使用多個球，然后根據不同的籃筐大小，去選擇最合適的一個。
解析：[參考 1](https://developer.mozilla.org/en-US/docs/Archive/Apps/Design/UI_layout_basics/Responsive_design_versus_adaptive_design)、[參考 2](http://mediumwell.com/responsive-adaptive-mobile/)、[參考 3](https://css-tricks.com/the-difference-between-responsive-and-adaptive-design/)
[
](https://github.com/yisainan/web-interview/issues/134)
### 什么情況下，用 translate() 而不用絕對定位？什么時候，情況相反。
`**translate()**`
參考答案： `translate()` 是 `transform` 的一個值。改變 `transform` 或 `opacity` 不會觸發瀏覽器重新布局（reflow）或重繪（repaint），只會觸發復合（compositions）。而改變絕對定位會觸發重新布局，進而觸發重繪和復合。 `transform` 使瀏覽器為元素創建一個 GPU 圖層，但改變絕對定位會使用到 CPU。 因此 `translate()` 更高效，可以縮短平滑動畫的繪制時間。
當使用 `translate()` 時，元素仍然占據其原始空間（有點像 `position：relative` ），這與改變絕對定位不同。
解析：[參考 1](https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/)、[參考 2](https://neal.codes/blog/front-end-interview-css-questions)、[參考 3](https://quizlet.com/28293152/front-end-interview-questions-css-flash-cards/)、[參考 4](http://peterdoes.it/2015/12/03/a-personal-exercise-front-end-job-interview-questions-and-my-answers-all/)
[
](https://github.com/yisainan/web-interview/issues/136)
### 一邊固定寬度一邊寬度自適應
參考答案：可以使用 flex 布局 復制下面的 HTML 和 CSS 代碼 用瀏覽器打開可以看到效果
~~~html
<div class="wrap">
<div class="div1"></div>
<div class="div2"></div>
</div>
~~~
~~~css
.wrap {
display: flex;
justify-content: space-between;
}
.div1 {
min-width: 200px;
}
.div2 {
width: 100%;
background: #e6e6e6;
}
html,
body,
div {
height: 100%;
margin: 0;
}
~~~
[
](https://github.com/yisainan/web-interview/issues/137)
### display:none、visibile:hidden、opacity:0 的區別 \*\*\*\*\*
參考答案：
是否隱藏是否在文檔中占用空間是否會觸發事件display: none是否否visibile: hidden是是否opacity: 0是是是
[
](https://github.com/yisainan/web-interview/issues/138)
### 文本超出部分顯示省略號 \*\*\*\*\*
參考答案：
#### 單行
~~~css
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
~~~
#### 多行
~~~css
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; // 最多顯示幾行
overflow: hidden;
~~~
[
](https://github.com/yisainan/web-interview/issues/139)
### 利用偽元素畫三角
參考答案：
~~~css
.info-tab {
position: relative;
}
.info-tab::after {
content: "";
border: 4px solid transparent;
border-top-color: #2c8ac2;
position: absolute;
top: 0;
}
~~~
[
](https://github.com/yisainan/web-interview/issues/140)
### 過渡與動畫的區別是什么
參考答案：
* transition
可以在一定的時間內實現元素的狀態過渡為最終狀態，用于模擬以一種過渡動畫效果，但是功能有限，只能用于制作簡單的動畫效果而動畫屬性
* animation
可以制作類似 Flash 動畫，通過關鍵幀控制動畫的每一步，控制更為精確，從而可以制作更為復雜的動畫。
[
](https://github.com/yisainan/web-interview/issues/141)
### 去除 inline-block 元素間間距的方法 \*\*\*
參考答案：
* 移除空格
* 使用 margin 負值
* 使用 font-size:0
* letter-spacing
* word-spacing
解析：更詳細的介紹請看[去除 inline-block 元素間間距的 N 種方法](https://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-%E5%8E%BB%E9%99%A4%E9%97%B4%E8%B7%9D/)
[
](https://github.com/yisainan/web-interview/issues/142)
### 為什么要初始化 CSS 樣式
參考答案：
* 因為瀏覽器的兼容問題，不同瀏覽器對有些標簽的默認值是不同的，如果沒對 CSS 初始化往往會出現瀏覽器之間的頁面顯示差異。
* 去掉標簽的默認樣式如：margin, padding，其他瀏覽器默認解析字體大小，字體設置。
[
](https://github.com/yisainan/web-interview/issues/143)
### 行內元素和塊級元素有哪些 \*\*\*\*
參考答案：
#### 行內元素
一個行內元素只占據它對應標簽的邊框所包含的空間
一般情況下，行內元素只能包含數據和其他行內元素
~~~plain
b, big, i, small, tt
abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
a, bdo, br, img, map, object, q, script, span, sub, sup
button, input, label, select, textarea
~~~
#### 塊級元素
占據一整行，高度、行高、內邊距和外邊距都可以改變，可以容納塊級標簽和其他行內標簽
~~~plain
header,form,ul,ol,table,article,div,hr,aside,figure,canvas,video,audio,footer
~~~
### 偽類和偽元素的區別 \*\*\*\*
#### 一：偽類：
1:定義：css偽類用于向某些選擇器添加特殊效果。
偽類其實與普通的css類相類似，可以為已有的元素添加樣式，但是他只有處于dom無法描述的狀態下才能為文檔樹中的元素添加樣式，所以將其稱為偽類。(這種文檔樹無法描述的狀態是什么呢？當一個元素在用戶的不同行為下就變化成不同的狀態這個行為的變化dom就無法描述，就要產生偽類，來為一些選擇器添加特殊的效果)。
2:偽類選擇器有哪些:
1）:link向未被訪問的鏈接添加樣式（鏈接，看來是只用于）
2）:visited向已被訪問過的鏈接添加樣式（鏈接，看來還是只用于）
3）:hover當鼠標懸浮在元素上方時，向元素添加樣式（沒有特意指定必須是鏈接，所以這個標簽被大量用于定義任何一個塊/行元素在鼠標經過時的樣式）
4）:active向被激活的元素添加樣式（當鼠標點擊時的樣式，要注意是點擊時的樣式的變化，這個也不是只有超鏈接才能用的偽類選擇器）
5）:focus向擁有鍵盤輸入焦點的元素添加樣式（如input輸入框鼠標點擊時產生背景顏色的變化，注意是鍵盤輸入焦點。注意有些瀏覽器不支持此功能樣式）
6）:first-child 用于匹配父元素中的第一個元素。例如E:first-child,找的是E元素，E元素必須是他的父元素的第一位元素（擴展【：nth-child(n)】用于匹配父元素的第n個子元素E，這個父元素必須是元素E的父元素。）。
7）:lang向帶有指定lang屬性的元素添加樣式（在標簽中設置lang的屬性，在樣式表中對這種確切lang屬性值的元素進行樣式的設定，即使你有能力為不同的語言定義特殊的規則）
3:注意：
偽類選擇器 ”：link”和“：visited“”只能用于定于鏈接的未被訪問的樣式和已被訪問過的樣式。
偽類選擇器 “：hover“和”:active”可以用于定義任何一個塊或行元素在鼠標經過時點擊時的樣式。
4:重點：上述四個偽類選擇器的順序必須是固定的，否則將不會產生期望中的變化。有一個好記的竅門：love hate（愛恨）。
#### 二：偽元素：
1:偽元素用于創建一些不在文檔樹中的元素，并且為他添加樣式，舉個例子：使用偽元素”：：before”可以在一個元素前邊增加一些文本，并且可以為這些文本添加一些樣式，雖然用戶可以看到這寫文本，但是這些文本是不存在于文檔樹中的。
2:幾種常見的偽元素：
1）:frist-letter用于向文本中的第一個字母添加樣式
2）:first-line向文本的首行添加樣式
3）:before在元素之前添加內容
4）:after在元素之后添加內容
3:偽元素和偽類的區別：
（1）偽類和偽元素的最大區別就在于有沒有創建一個文檔樹以外的元素。偽元素創建了一個文檔樹以外的元素（虛擬容器）并為他添加樣式，這個容器不包含任何DOM元素但是可以包含內容。換句話說偽類和偽元素的區別就是偽類的操作對象是文檔樹中已有的元素，而偽元素則創建了一個文檔樹以外的元素。
（2）偽類使用的是單冒號，但是在css3中規定偽元素使用的雙冒號，但是除了少部分的偽元素必須使用雙冒號以外，像after還有before都是支持單引號的。為了兼容性所以目前還是在使用一些常見的偽元素的時候采用單冒號較為穩妥。
### 有哪些手段可以優化 CSS, 提高性能
參考答案：
1, 首推的是合并css文件，如果頁面加載10個css文件，每個文件1k，那么也要比只加載一個100k的css文件慢。
2，減少css嵌套，最好不要套三層以上。
3，不要在ID選擇器前面進行嵌套，ID本來就是唯一的而且人家權值那么大，嵌套完全是浪費性能。
4，建立公共樣式類，把相同樣式提取出來作為公共類使用，比如我們常用的清除浮動等。
5，減少通配符\*或者類似\[hidden="true"\]這類選擇器的使用，挨個查找所有... 這性能能好嗎？當然重置樣式這些必須 的東西是不能少的。
6，巧妙運用css的繼承機制，如果父節點定義了，子節點就無需定義。
7，拆分出公共css文件，對于比較大的項目我們可以將大部分頁面的公共結構的樣式提取出來放到單獨css文件里， 這樣一次下載后就放到緩存里，當然這種做法會增加請求，具體做法應以實際情況而定。
8，不用css表達式，表達式只是讓你的代碼顯得更加炫酷，但是他對性能的浪費可能是超乎你的想象的。
9，少用css rest，可能你會覺得重置樣式是規范，但是其實其中有很多的操作是不必要不友好的，有需求有興趣的 朋友可以選擇normolize. css
10，cssSprite，合成所有icon圖片，用寬高加上bacgroud-position的背景圖方式顯現出我們要的icon圖，這是一種 十分實用的技巧，極大減少了http請求。
11，當然我們還需要一些善后工作，CSS壓縮(這里提供一個在線壓縮 YUI Compressor ，當然你會用其他工具來壓縮是十 分好的)，
12，GZIP壓縮，Gzip是一種流行的文件壓縮算法，詳細做法可以谷歌或者百度。
