HTML部分
· Doctype作用？標準模式與兼容模式各有什麼區別?
· （1）、<!DOCTYPE>聲明位於位於HTML文檔中的第一行，處於<html>標籤之前。告知瀏覽器的解析器用什麼文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會導致文檔以兼容模式呈現。
·
（2）、標準模式的排版和JS運作模式都是以該瀏覽器支持的最高標準運行。在兼容模式中，頁面以寬鬆的向後兼容的方式顯示,模擬老式瀏覽器的行爲以防止站點無法工作。
· HTML5爲什麼只需要寫 <!DOCTYPE HTML>？
· HTML5 不基於 SGML，因此不需要對DTD進行引用，但是需要doctype來規範瀏覽器的行爲（讓瀏覽器按照它們應該的方式來運行）；
·
而HTML4.01基於SGML,所以需要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。
· 行內元素有哪些？塊級元素有哪些？空(void)元素有那些？
· 首先：CSS規範規定，每個元素都有display屬性，確定該元素的類型，每個元素都有默認的display值，如div的display默認值爲“block”，則爲“塊級”元素；span默認display屬性值爲“inline”，是“行內”元素。
·
· （1）行內元素有：a b span img inputselect strong（強調的語氣）
· （2）塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
·
· （3）常見的空元素：
· <br> <hr> <img> <input> <link> <meta>
· 鮮爲人知的是：
<area> <base><col><command><embed><keygen><param><source><track><wbr>
· 頁面導入樣式時，使用link和@import有什麼區別？
· （1）link屬於XHTML標籤，除了加載CSS外，還能用於定義RSS,定義rel連接屬性等作用；而@import是CSS提供的，只能用於加載CSS;
·
· （2）頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;
·
（3）import是CSS2.1提出的，只在IE5以上才能被識別，而link是XHTML標籤，無兼容問題;
· 介紹一下你對瀏覽器內核的理解？
· 主要分成兩部分：渲染引擎(layout engineer或RenderingEngine)和JS引擎。
· 渲染引擎：負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，然後會輸出至顯示器或打印機。瀏覽器的內核的不同對於網頁的語法解釋會有不同，所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網絡內容的應用程序都需要內核。
·
· JS引擎則：解析和執行javascript來實現網頁的動態效果。
·
最開始渲染引擎和JS引擎並沒有區分的很明確，後來JS引擎越來越獨立，內核就傾向於只指渲染引擎。
· 常見的瀏覽器內核有哪些？
· Trident內核：IE,MaxThon,TT,TheWorld,360,搜狗瀏覽器等。[又稱MSHTML]
· Gecko內核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
· Presto內核：Opera7及以上。 [Opera內核原爲：Presto，現爲：Blink;]
Webkit內核：Safari,Chrome等。 [Chrome的：Blink（WebKit的分支）]
· html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分 HTML 和 HTML5？
· * HTML5現在已經不是 SGML的子集，主要是關於圖像，位置，存儲，多任務等功能的增加。
· 繪畫canvas;
· 用於媒介回放的 video 和 audio 元素;
· 本地離線存儲localStorage 長期存儲數據，瀏覽器關閉後數據不丟失;
· sessionStorage 的數據在瀏覽器關閉後自動刪除;
· 語意化更好的內容元素，比如 article、footer、header、nav、section;
· 表單控件，calendar、date、time、email、url、search;
· 新的技術webworker, websocket,Geolocation;
·
· 移除的元素：
· 純表現的元素：basefont，big，center，font, s，strike，tt，u;
· 對可用性產生負面影響的元素：frame，frameset，noframes；
·
· * 支持HTML5新標籤：
· IE8/IE7/IE6支持通過document.createElement方法產生的標籤，
· 可以利用這一特性讓這些瀏覽器支持HTML5新標籤，
· 瀏覽器支持新標籤後，還需要添加標籤默認的樣式。
·
· 當然也可以直接使用成熟的框架、比如html5shim;
· <!--[if lt IE9]>
· <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
· <![endif]-->
·
* 如何區分HTML5：DOCTYPE聲明\新增的結構元素\功能元素
· 簡述一下你對HTML語義化的理解？
· 用正確的標籤做正確的事情。
· html語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器、搜索引擎解析;
· 即使在沒有樣式CSS情況下也以一種文檔格式顯示，並且是容易閱讀的;
· 搜索引擎的爬蟲也依賴於HTML標記來確定上下文和各個關鍵字的權重，利於SEO;
使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解。
· HTML5的離線儲存怎麼使用，工作原理能不能解釋一下？
· 在用戶沒有與因特網連接時，可以正常訪問站點或應用，在用戶與因特網連接時，更新用戶機器上的緩存文件。
· 原理：HTML5的離線存儲是基於一個新建的.appcache文件的緩存機制(不是存儲技術)，通過這個文件上的解析清單離線存儲資源，這些資源就會像cookie一樣被存儲了下來。之後當網絡在處於離線狀態下時，瀏覽器會通過被離線存儲的數據進行頁面展示。
·
·
· 如何使用：
· 1、頁面頭部像下面一樣加入一個manifest的屬性；
· 2、在cache.manifest文件的編寫離線存儲的資源；
· CACHE MANIFEST
· #v0.11
· CACHE:
· js/app.js
· css/style.css
· NETWORK:
· resourse/logo.png
· FALLBACK:
· / /offline.html
3、在離線狀態時，操作window.applicationCache進行需求實現。
· 瀏覽器是怎麼對HTML5的離線儲存資源進行管理和加載的呢？
· 在線的情況下，瀏覽器發現html頭部有manifest屬性，它會請求manifest文件，如果是第一次訪問app，那麼瀏覽器就會根據manifest文件的內容下載相應的資源並且進行離線存儲。如果已經訪問過app並且資源已經離線存儲了，那麼瀏覽器就會使用離線的資源加載頁面，然後瀏覽器會對比新的manifest文件與舊的manifest文件，如果文件沒有發生改變，就不做任何操作，如果文件改變了，那麼就會重新下載文件中的資源並進行離線存儲。
離線的情況下，瀏覽器就直接使用離線存儲的資源。
· 請描述一下cookies，sessionStorage和 localStorage 的區別？
· cookie是網站爲了標示用戶身份而儲存在用戶本地終端（ClientSide）上的數據（通常經過加密）。
· cookie數據始終在同源的http請求中攜帶（即使不需要），記會在瀏覽器和服務器間來回傳遞。
· sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。
·
· 存儲大小：
· cookie數據大小不能超過4k。
· sessionStorage和localStorage雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。
·
· 有期時間：
· localStorage 存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據；
· sessionStorage 數據在當前瀏覽器窗口關閉後自動刪除。
cookie 設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉
· iframe有那些缺點？
· *iframe會阻塞主頁面的Onload事件；
· *搜索引擎的檢索程序無法解讀這種頁面，不利於SEO;
·
· *iframe和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的並行加載。
·
· 使用iframe之前需要考慮這兩個缺點。如果需要使用iframe，最好是通過javascript
動態給iframe添加src屬性值，這樣可以繞開以上兩個問題。
· Label的作用是什麼？是怎麼用的？
· label標籤來定義表單控制間的關係,當用戶選擇該標籤時，瀏覽器會自動將焦點轉到和標籤相關的表單控件上。
·
· <label for="Name">Number:</label>
· <input type=“text“name="Name" id="Name"/>
·
<label>Date:<input type="text" name="B"/></label>
· HTML5的form如何關閉自動完成功能？
給不想要提示的 form 或某個 input設置爲autocomplete=off。
· 如何實現瀏覽器內多個標籤頁之間的通信? (阿里)
· WebSocket、SharedWorker；
· 也可以調用localstorge、cookies等本地存儲方式；
·
· localstorge另一個瀏覽上下文裏被添加、修改或刪除時，它都會觸發一個事件，
· 我們通過監聽事件，控制它的值來進行頁面信息通信；
注意quirks：Safari在無痕模式下設置localstorge值時會拋出QuotaExceededError的異常；
· webSocket如何兼容低瀏覽器？(阿里)
· Adobe Flash Socket 、
· ActiveX HTMLFile (IE)、
· 基於 multipart 編碼發送 XHR 、
基於長輪詢的 XHR
· 頁面可見性（PageVisibility API）可以有哪些用途？
· 通過 visibilityState 的值檢測頁面當前是否可見，以及打開網頁的時間等;
在頁面被切換到其他後臺進程的時候，自動暫停音樂或視頻的播放；
· 如何在頁面上實現一個圓形的可點擊區域？
· 1、map+area或者svg
· 2、border-radius
3、純js實現需要求一個點在不在圓上簡單算法、獲取鼠標座標等等
· 實現不使用border畫出1px高的線，在不同瀏覽器的標準模式與怪異模式下都能保持一致的效果。
<div style="height:1px;overflow:hidden;background:red"></div>
· 網頁驗證碼是幹嘛的，是爲了解決什麼安全問題。
· 區分用戶是計算機還是人的公共全自動程序。可以防止惡意破解密碼、刷票、論壇灌水；
有效防止黑客對某一個特定註冊用戶用特定程序暴力破解方式進行不斷的登陸嘗試。
· title與h1的區別、b與strong的區別、i與em的區別？
· title屬性沒有明確意義只表示是個標題，H1則表示層次明確的標題，對頁面信息的抓取也有很大的影響；
·
· strong是標明重點內容，有語氣加強的含義，使用閱讀設備閱讀網絡時：<strong>會重讀，而<B>是展示強調內容。
·
· i內容展示爲斜體，em表示強調的文本；
·
· Physical Style Elements -- 自然樣式標籤
· b, i, u, s, pre
· Semantic Style Elements -- 語義樣式標籤
· strong, em, ins,del, code
應該準確使用語義樣式標籤,但不能濫用,如果不能確定時首選使用自然樣式標籤。
CSS
· 介紹一下標準的CSS的盒子模型？低版本IE的盒子模型有什麼不同的？
· （1）有兩種， IE盒子模型、W3C盒子模型；
· （2）盒模型：內容(content)、填充(padding)、邊界(margin)、邊框(border)；
（3）區 別： IE的content部分把border和 padding計算了進去;
· CSS選擇符有哪些？哪些屬性可以繼承？
· * 1.id選擇器（# myid）
· 2.類選擇器（.myclassname）
· 3.標籤選擇器（div, h1, p）
· 4.相鄰選擇器（h1+ p）
· 5.子選擇器（ul> li）
· 6.後代選擇器（li a）
· 7.通配符選擇器（*）
· 8.屬性選擇器（a[rel="external"]）
· 9.僞類選擇器（a:hover, li:nth-child）
·
· * 可繼承的樣式： font-size font-family color, UL LI DL DD DT;
·
* 不可繼承的樣式：border padding margin width height;
· CSS優先級算法如何計算？
· * 優先級就近原則，同權重情況下樣式定義最近者爲準;
·
· * 載入樣式以最後載入的定位爲準;
·
· 優先級爲:
· !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>元素。
·
· :after 在元素之前添加內容,也可以用來做清除浮動。
· :before 在元素之後添加內容
· :enabled
· :disabled 控制表單控件的禁用狀態。
:checked 單選框或複選框被選中。
· 如何居中div？如何居中一個浮動元素？如何讓絕對定位的div居中？
o 給div設置一個寬度，然後添加margin:0 auto屬性
o div{
o width:200px;
o margin:0auto;
}
o 居中一個浮動元素
o 確定容器的寬高 寬500 高300的層
o 設置層的外邊距
o
o .div {
o width:500px; height:300px;//高度可以不設
o margin: -150px 00-250px;
o position:relative; //相對定位
o background-color:pink; //方便看效果
o left:50%;
o top:50%;
}
o 讓絕對定位的div居中
o position: absolute;
o width: 1200px;
o background: none;
o margin: 0 auto;
o top: 0;
o left: 0;
o bottom: 0;
right: 0;
· display有哪些值？說明他們的作用。
· block 象塊類型元素一樣顯示。
· none 缺省值。象行內元素類型一樣顯示。
· inline-block 象行內元素一樣顯示，但其內容象塊類型元素一樣顯示。
· list-item 象塊類型元素一樣顯示，並添加樣式列表標記。
· table 此元素會作爲塊級表格來顯示
inherit 規定應該從父元素繼承 display 屬性的值
· position的值relative和absolute定位原點是？
· absolute
· 生成絕對定位的元素，相對於值不爲 static的第一個父元素進行定位。
· fixed （老IE不支持）
· 生成絕對定位的元素，相對於瀏覽器窗口進行定位。
· relative
· 生成相對定位的元素，相對於其正常位置進行定位。
· static
· 默認值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right z-index聲明）。
· inherit
規定從父元素繼承 position 屬性的值。
· CSS3有哪些新特性？
· 新增各種CSS選擇器 （:not(.input)：所有class不是“input”的節點）
· 圓角 （border-radius:8px）
· 多列布局 （multi-column layout）
· 陰影和反射 （Shadow\Reflect）
· 文字特效 （text-shadow、）
· 文字渲染 （Text-decoration）
· 線性漸變 （gradient）
· 旋轉 （transform）
· 增加了旋轉,縮放,定位,傾斜,動畫，多背景
transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation:
· 請解釋一下CSS3的Flexbox（彈性盒佈局模型）,以及適用場景？
.
· 用純CSS創建一個三角形的原理是什麼？
· 把上、左、右三條邊隱藏掉（顏色設爲 transparent）
· #demo {
· width: 0;
· height: 0;
· border-width:20px;
· border-style: solid;
· border-color: transparent transparent redtransparent;
}
· 一個滿屏品字佈局如何設計?
· 簡單的方式：
· 上面的div寬100%，
· 下面的兩個div分別寬50%，
然後用float或者inline使其不換行即可
· 經常遇到的瀏覽器的兼容性有哪些？原因，解決方法是什麼，常用hack的技巧？
· * png24位的圖片在iE6瀏覽器上出現背景，解決方案是做成PNG8.
·
· * 瀏覽器默認的margin和padding不同。解決方案是加一個全局的*{margin:0;padding:0;}來統一。
·
· * IE6雙邊距bug:塊屬性標籤float後，又有橫行的margin情況下，在ie6顯示margin比設置的大。
·
· 浮動ie產生的雙倍距離#box{ float:left; width:10px;margin:0 0 0 100px;}
·
· 這種情況之下IE會產生20px的距離，解決方案是在float的標籤樣式控制中加入——_display:inline;將其轉化爲行內屬性。(_這個符號只有ie6會識別)
·
· 漸進識別的方式，從總體中逐漸排除局部。
·
· 首先，巧妙的使用“\9”這一標記，將IE遊覽器從所有情況中分離出來。
· 接着，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經獨立識別。
·
· css
· .bb{
· background-color:#f1ee18;/*所有識別*/
· .background-color:#00deff\9;/*IE6、7、8識別*/
· +background-color:#a200ff;/*IE6、7識別*/
· _background-color:#1e0bd1;/*IE6識別*/
· }
·
· * IE下,可以使用獲取常規屬性的方法來獲取自定義屬性,
· 也可以使用getAttribute()獲取自定義屬性;
· Firefox下,只能使用getAttribute()獲取自定義屬性。
· 解決方法:統一通過getAttribute()獲取自定義屬性。
·
· * IE下,even對象有x,y屬性,但是沒有pageX,pageY屬性;
· Firefox下,event對象有pageX,pageY屬性,但是沒有x,y屬性。
·
· * 解決方法：（條件註釋）缺點是在IE瀏覽器下可能會增加額外的HTTP請求數。
·
· * Chrome中文界面下默認會將小於12px的文本強制按照12px顯示,
· 可通過加入 CSS 屬性 -webkit-text-size-adjust: none;解決。
·
· 超鏈接訪問過後hover樣式就不出現了被點擊訪問過的超鏈接樣式不在具有hover和active瞭解決方法是改變CSS屬性的排列順序:
L-V-H-A: a:link{} a:visited{} a:hover {} a:active {}
· li與li之間有看不見的空白間隔是什麼原因引起的？有什麼解決辦法？
行框的排列會受到中間空白（回車\空格）等的影響，因爲空格也屬於字符,這些空白也會被應用樣式，佔據空間，所以會有間隔，把字符大小設爲0，就沒有空格了。
· 爲什麼要初始化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;}
· absolute的containing block(容器塊)計算方式跟正常流有什麼不同？
· 無論屬於哪種，都要先找到其祖先元素中最近的 position 值不爲 static 的元素，然後再判斷：
· 1、若此元素爲inline元素，則containing block爲能夠包含這個元素生成的第一個和最後一個inline box 的padding box(除margin, border外的區域)的最小矩形；
· 2、否則,則由這個祖先元素的 padding box構成。
· 如果都找不到，則爲 initial containing block。
·
· 補充：
· 1. static(默認的)/relative：簡單說就是它的父元素的內容框（即去掉padding的部分）
· 2.absolute:向上找最近的定位爲absolute/relative的元素
3. fixed:它的containingblock一律爲根元素(html/body)，根元素也是initialcontaining block
· CSS裏的visibility屬性有個collapse屬性值是幹嘛用的？在不同瀏覽器下以後什麼區別？
· position跟display、margin collapse、overflow、float這些特性相互疊加後會怎麼樣？
· 對BFC規範(塊級格式化上下文：block formatting context)的理解？
· （W3C CSS 2.1 規範中的一個概念,它是一個獨立容器，決定了元素如何對其內容進行定位,以及與其他元素的關係和相互作用。）
· 一個頁面是由很多個 Box 組成的,元素的類型和display屬性,決定了這個Box的類型。
不同類型的 Box,會參與不同的FormattingContext（決定如何渲染文檔的容器）,因此Box內的元素會以不同的方式渲染,也就是說BFC內部的元素和外部的元素不會互相影響。
· css定義的權重
· 以下是權重的規則：標籤的權重爲1，class的權重爲10，id的權重爲100，以下例子是演示各種定義的權重值：
·
· /*權重爲1*/
· div{
· }
· /*權重爲10*/
· .class1{
· }
· /*權重爲100*/
· #id1{
· }
· /*權重爲100+1=101*/
· #id1 div{
· }
· /*權重爲10+1=11*/
· .class1div{
· }
· /*權重爲10+10+1=21*/
· .class1.class2 div{
· }
·
如果權重相同，則最後定義的樣式會起作用，但是應該避免這種情況出現
· 請解釋一下爲什麼會出現浮動和什麼時候需要清除浮動？清除浮動的方式
· 移動端的佈局用過媒體查詢嗎？
· 使用CSS預處理器嗎？喜歡那個？
SASS (SASS、LESS沒有本質區別，只因爲團隊前端都是用的SASS)
· CSS優化、提高性能的方法有哪些？
· 瀏覽器是怎樣解析CSS選擇器的？
· 在網頁中的應該使用奇數還是偶數的字體？爲什麼呢？
· margin和padding分別適合什麼場景使用？
· 抽離樣式模塊怎麼寫，說出思路，有無實踐經驗？[阿里航旅的面試題]
· 元素豎向的百分比設定是相對於容器的高度嗎？
· 全屏滾動的原理是什麼？用到了CSS的那些屬性？
· 什麼是響應式設計？響應式設計的基本原理是什麼？如何兼容低版本的IE？
· 視差滾動效果，如何給每頁做不同的動畫？（回到頂部，向下滑動要再次出現，和只出現一次分別怎麼做？）
· ::before和 :after中雙冒號和單冒號有什麼區別？解釋一下這2個僞元素的作用。
· 如何修改chrome記住密碼後自動填充表單的黃色背景？
· 你對line-height是如何理解的？
· 設置元素浮動後，該元素的display值是多少？（自動變成display:block）
· 怎麼讓Chrome支持小於12px的文字？
· 讓頁面裏的字體變清晰，變細用CSS怎麼做？（-webkit-font-smoothing:antialiased;）
· font-style屬性可以讓它賦值爲"oblique" oblique是什麼意思？
· position:fixed;在android下無效怎麼處理？
· 如果需要手動寫動畫，你認爲最小時間間隔是多久，爲什麼？（阿里）
多數顯示器默認頻率是60Hz，即1秒刷新60次，所以理論上最小間隔爲1/60＊1000ms＝16.7ms
· display:inline-block什麼時候會顯示間隙？(攜程)
移除空格、使用margin負值、使用font-size:0、letter-spacing、word-spacing
· overflow:scroll時不能平滑滾動的問題怎麼處理？
· 有一個高度自適應的div，裏面有兩個div，一個高度100px，希望另一個填滿剩下的高度。
· png、jpg、gif這些圖片格式解釋一下，分別什麼時候用。有沒有了解過webp？
· 什麼是Cookie隔離？（或者說：請求資源的時候不要讓它帶cookie怎麼做）
· 如果靜態文件都放在主域名下，那靜態文件請求的時候都帶有的cookie的數據提交給server的，非常浪費流量，
· 所以不如隔離開。
·
· 因爲cookie有域的限制，因此不能跨域提交請求，故使用非主要域名的時候，請求頭中就不會帶有cookie數據，
· 這樣可以降低請求頭的大小，降低請求時間，從而達到降低整體請求延時的目的。
·
· 同時這種方式不會將cookie傳入WebServer，也減少了WebServer對cookie的處理分析環節，
提高了webserver的http請求的解析速度。
· style標籤寫在body後與body前有什麼區別？
· 什麼是CSS預處理器 /後處理器？
· - 預處理器例如：LESS、Sass、Stylus，用來預編譯Sass或less，增強了css代碼的複用性，
· 還有層級、mixin、變量、循環、函數等，具有很方便的UI組件模塊化開發能力，極大的提高工作效率。
·
· - 後處理器例如：PostCSS，通常被視爲在完成的樣式表中根據CSS規範處理CSS，讓其更有效；目前最常做的
是給CSS屬性添加瀏覽器私有前綴，實現跨瀏覽器兼容性的問題。