天天看點

前端面試題小集

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;

·                  +background-color:#a200ff;

·                  _background-color:#1e0bd1;

·              }

·         

·        *  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,以下例子是示範各種定義的權重值:

·         

·        

·        div{

·        }

·        

·        .class1{

·        }

·        

·        #id1{

·        }

·        

·        #id1 div{

·        }

·        

·        .class1div{

·        }

·        

·        .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屬性添加浏覽器私有字首,實作跨浏覽器相容性的問題。

繼續閱讀