CSS 面試題總結

CSS 中類 (classes) 和 ID 的區別。

• 書寫上的差異：class名用「.」號開頭來定義，id名用「#」號開頭來定義；
• 優先級不一樣（權重不一樣）
• 調用上的區別：在同一個html網頁頁面中class是能夠被屢次調用的（在不一樣的地方）。而id名做爲標籤的身份則是惟一的，id在頁面中只能出現一次。在js腳本中常常會用到id來修改一個標籤的屬性
• id做爲元素的標籤，用於區分不一樣結構和內容，而class做爲一個樣式，它能夠應用到任何結構和內容上。
• 在佈局思路上，通常堅持這樣的原則：id是先肯定頁面的結構和內容，而後再爲它定義樣式：而class相反，它先定義好一類樣式，而後再頁面中根據須要把類樣式應用到不一樣的元素和內容上面。
• 在實際應用時，class更多的被應用到文字版塊以及頁面修飾等方面，而id更多地被用來實現宏偉佈局和設計包含塊，或包含框的樣式。

通常原則： 類應該應用於概念上類似的元素，這些元素能夠出如今同一頁面上的多個位置，而ID 應該應用於不一樣的惟一的元素

「resetting」 和 「normalizing」 CSS 之間的區別？你會如何選擇，爲何？

Normalize 相對「平和」，注重通用的方案，重置掉該重置的樣式，保留有用的 user agent 樣式，同時進行一些 bug 的修復，這點是 reset 所缺少的。
Reset 相對「暴力」，無論你有沒有用，通通重置成同樣的效果，且影響的範圍很大，講求跨瀏覽器的一致性。
http://jerryzou.com/posts/abo...
Normalize.css是一種CSS reset的替代方案。它們的區別有：

• Normalize.css 保護了有價值的默認值，Reset經過爲幾乎全部的元素施加默認樣式，強行使得元素有相同的視覺效果。相比之下，Normalize.css保持了許多默認的瀏覽器樣式。這就意味着你不用再爲全部公共的排版元素從新設置樣式。當一個元素在不一樣的瀏覽器中有不一樣的默認值時，Normalize.css會力求讓這些樣式保持一致並儘量與現代標準相符合。
• Normalize.css 修復了瀏覽器的bug，它修復了常見的桌面端和移動端瀏覽器的bug。這每每超出了Reset所能作到的範疇。關於這一點，Normalize.css修復的問題包含了HTML5元素的顯示設置、預格式化文字的font-size問題、在IE9中SVG的溢出、許多出如今各瀏覽器和操做系統中的與表單相關的bug。
• Normalize.css 不會讓你的調試工具變的雜亂
• Normalize.css 是模塊化的
• Normalize.css 擁有詳細的文檔

選擇Normalize.css ，主要是reset.css爲幾乎全部的元素施加默認樣式，因此須要對全部公共的排版元素從新設置樣式，這是一件很麻煩的工做。

請解釋浮動 (Floats) 及其工做原理

浮動出現的最開始出現的意義是用來讓文字環繞圖片而已。
float能夠自動包裹元素。
float會致使父容器高度塌陷。float爲何會致使高度塌陷：元素含有浮動屬性 –> 破壞inline box –> 破壞line box高度 –> 沒有高度 –> 塌陷。何時會塌陷：當標籤裏面的元素只要樣子沒有實際高度時會塌陷。
浮動會脫離文檔流。產生本身的塊級格式化上下文。

描述z-index和疊加上下文是如何造成的。

首先來看在CSS中疊加上下文造成的緣由：

• 負邊距:margin爲負值時元素會依參考線向外偏移。margin-left/margin-top的參考線爲左邊的元素/上面的元素（如無兄弟元素則爲父元素的左內側/上內側）,margin-right和margin-bottom的參考線爲元素自己的border右側/border下側。通常能夠利用負邊距來就行佈局，但沒有計算好的話就可能形成元素重疊。堆疊順序由元素在文檔中的前後位置決定，後出現的會在上面。
• position的relative/absolute/fixed定位:當爲元素設置position值爲relative/absolute/fixed後，元素髮生的偏移可能產生重疊，且z-index屬性被激活。z-index值能夠控制定位元素在垂直於顯示屏方向（Z 軸）上的堆疊順序（stack order），值大的元素髮生重疊時會在值小的元素上面。

z-index屬性 ：z-index只能在position屬性值爲relative或absolute或fixed的元素上有效。
基本原理：z-index值能夠控制定位元素在垂直於顯示屏方向（Z 軸）上的堆疊順序（stack order），值大的元素髮生重疊時會在值小的元素上面。
使用相對性：z-index值只決定同一父元素中的同級子元素的堆疊順序。父元素的z-index值（若是有）爲子元素定義了堆疊順序（css版堆疊「拼爹」）。向上追溯找不到含有z-index值的父元素的狀況下，則能夠視爲自由的z-index元素，它能夠與父元素的同級兄弟定位元素或其餘自由的定位元素來比較z-index的值，決定其堆疊順序。同級元素的z-index值若是相同，則堆疊順序由元素在文檔中的前後位置決定，後出現的會在上面。因此若是當你發現一個z-index值較大的元素被值較小的元素遮擋了，請先檢查它們之間的dom結點關係，多半是由於其父結點含有激活並設置了z-index值的position定位元素

請描述 BFC(Block Formatting Context) 及其如何工做？

BFC:塊級格式上下文。定義：
浮動元素和絕對定位元素，非塊級盒子的塊級容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不爲「visiable」的塊級盒子，都會爲他們的內容建立新的塊級格式化上下文。
在一個塊級格式化上下文裏，盒子從包含塊的頂端開始垂直地一個接一個地排列，兩個盒子之間的垂直的間隙是由他們的margin 值所決定的。兩個相鄰的塊級盒子的垂直外邊距會發生疊加。
在塊級格式化上下文中，每個盒子的左外邊緣（margin-left）會觸碰到容器的左邊緣(border-left)（對於從右到左的格式來講，則觸碰到右邊緣），即便存在浮動也是如此，除非這個盒子建立一個新的塊級格式化上下文。

BFC詳解： http://www.cnblogs.com/lhb25/...

block，inline和inline-block的概念以及區別

display:block

• block元素會獨佔一行，多個block元素會各自新起一行。默認狀況下，block元素寬度自動填滿其父元素寬度。
• block元素能夠設置width,height屬性。塊級元素即便設置了寬度,仍然是獨佔一行。
• block元素能夠設置margin和padding屬性。

display:inline

• inline元素不會獨佔一行，多個相鄰的行內元素會排列在同一行裏，直到一行排列不下，纔會新換一行，其寬度隨元素的內容而變化。
• inline元素設置width,height屬性無效。
• inline元素的margin和padding屬性，水平方向的padding-left, padding-right, margin-left, margin-right都產生邊距效果；但豎直方向的padding-top,
• padding-bottom, margin-top, margin-bottom不會產生邊距效果。

display:inline-block
就是將對象呈現爲inline對象，可是對象的內容做爲block對象呈現。以後的內聯對象會被排列在同一行內。

備註：屬性爲inline-block元素之間的空格或者換行在瀏覽器上會是一個空白的間隙。且IE6和7是不支持這個屬性的，須要經過display:inline;zoom:1作hack處理。

列舉不一樣的清除浮動的技巧，並指出它們各自適用的使用場景

添加新的元素、應用 clear：both

<div class="outer"> 
<div class="div1">1</div> 
<div class="div2">2</div> 
<div class="div3">3</div> 
<div class="clear"></div> 
</div> 
.clear{clear:both; height: 0; line-height: 0; font-size: 0}

優勢：簡單，代碼少，瀏覽器支持好，不容易出現怪問題
缺點：要增長不少無效佈局，但這是清除浮動用的比較多的一種方法。

父級div定義overflow：auto或者hidden

<div class="outer over-flow"> //這裏添加了一個class 
<div class="div1">1</div> 
<div class="div2">2</div> 
<div class="div3">3</div> 
</div> 
.over-flow{ 
    overflow: auto; zoom: 1; //zoom: 1; 是在處理兼容性問題 
}

原理：必須定義width或zoom:1，同時不能定義height，使用overflow屬性來清除浮動有一點須要注意，overflow屬性共有三個屬性值：hidden,auto,visible。咱們可使用hiddent和auto值來清除浮動，但切記不能使用visible值，若是使用這個值將沒法達到清除浮動效果。
優勢：簡單，代碼少，瀏覽器支持好
缺點：使用auto時內部寬高超過父級div時，會出現滾動條，使用hidden時會被隱藏

after 方法

<div class="outer"> 
<div class="div1">1</div> 
<div class="div2">2</div> 
<div class="div3">3</div> 
</div> 
.outer {zoom:1;} /==for IE6/7 Maxthon2==/ 
.outer :after {clear:both;content:’.’;display:block;width: 0;height: 0;visibility:hidden;}

其中clear:both;指清除全部浮動；content: ‘.’; display:block;對於FF/chrome/opera/IE8不能缺乏，其中content（）能夠取值也能夠爲空。visibility:hidden;的做用是容許瀏覽器渲染它，可是不顯示出來，這樣才能實現清除浮動。
因此總的來講，推薦使用僞類的辦法。

請解釋 CSS sprites，以及你要如何在頁面或網站中實現它

CSS Sprites就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的「background-image」，「background- repeat」，「background-position」的組合進行背景定位，background-position能夠用數字能精確的定位出背景圖片的位置。
優勢： 當頁面加載時，不是加載每一個單獨圖片，而是一次加載整個組合圖片。這是一個了不得的改進，它大大減小了HTTP請求的次數，減輕服務器壓力，同時縮短了懸停加載圖片所須要的時間延遲，使效果更流暢，不會停頓。
缺點：作圖像拼合的時候很麻煩

你會如何解決特定瀏覽器的樣式問題？

解決方案：

• 主張向前兼容，不考慮向後兼容，
• 根據產品的用戶羣中各大瀏覽器，來考慮須要兼容的瀏覽器
• 把瀏覽器分兩類，一類歷史遺留瀏覽器，一類是現代瀏覽器，而後根據這個分類開發兩個版本的網站，而後本身定義哪些瀏覽器是歷史遺留版本，歷史遺留版本瀏覽器，是用歷史遺留界面，經過通告欄告知用戶使用現代瀏覽器，功能更全面，提供好的用戶體驗
• 直接在用戶的瀏覽器不能兼容的時候，提示用戶至少什麼版本的IE和火狐谷歌瀏覽器才能支持（以上方案都失效）
• 項目開始前就得須要確認兼容支持的最低按本是什麼，設計一個對應的兼容方案

有哪些的隱藏內容的方法 (若是同時還要保證屏幕閱讀器可用呢)？

display:none 文本圖片的隱藏：
缺陷：搜索引擎可能認爲被隱藏的文字屬於垃圾信息而被忽略
屏幕閱讀器（是爲視覺上有障礙的人設計的讀取屏幕內容的程序）會忽略被隱藏的文字，同時不利於搜索引擎。

visibility: hidden：隱藏內容或圖片
缺陷：隱藏的內容會佔據他所應該佔據物理空間

你用過柵格系統 (grid system) 嗎？若是使用過，你最喜歡哪一種？

Bootstrap中的流式佈局；Bootstrap提供了兩種佈局方式，固定式佈局和流式佈局（用em表示的叫作彈性佈局，用百分比表示的叫作流體佈局）方式，Bootstrap的佈局其實是在柵格外加個容器 (Container)
所以兩種佈局方式的惟一區別是：
固定佈局加的是固定寬度(width)的容器，
流式佈局加的是自適應(或叫可變)寬度的容器。

你用過媒體查詢，或針對移動端的佈局/CSS 嗎？

媒體查詢規則是開發者可以在相同的樣式中，針對不一樣的媒介來使用不一樣的樣式規則。在CSS2的時候有media Type的規則，經過不一樣的媒介來切換不一樣的CSS樣式。經過媒體查詢的技術能夠實現響應式佈局，適應不一樣終端的開發。媒體查詢的具體知識請見 CSS3新屬性應用文檔。

如何優化網頁的打印樣式？

添加打印樣式，爲屏幕顯示和打印分別準備一個css文件，以下所示：

• 用於屏幕顯示的css：

  <link rel="stylesheet" href="css/mainstylesheet.css" media="screen" />

• 用於打印的css：

  <link rel="stylesheet" href="css/printstylesheet.css" media="print" />

• import方式：

  <style type="text/css">
      @import url("css/printstylesheet.css") print;
  </style>

• 直接把屏幕顯示樣式和打印樣式寫在一個css文件中：

  @media print {}{
     h1 {
       color: black;
     }
     h2 {}{
       color: gray;
     }
   }

@media print裏面的內容只對打印出來的內容有效，以外的內容就是屏幕顯示的樣式。

• 其餘：

建立一個不指定媒體類型的樣式表一般頗有用（或者利用media=」all」）。當你準備好定義一些特別用
於打印的規則時，能夠只建立一個單獨的樣式表，使任何在打印時看起來很差的樣式都失效。使用這種方法的一個問題是必須確保打印機樣式實際上確實覆蓋了主樣式表。可使用！important.

打印樣式表也應有些注意事項：

• 打印樣式表中最好不要用背景圖片，由於打印機不能打印CSS中的背景。如要顯示圖片，請使用html插入到頁面中。
• 最好不要使用像素做爲單位，由於打印樣式表要打印出來的會是實物，因此建議使用pt和cm。
• 隱藏掉沒必要要的內容。（@print div{display:none;}）
• 打印樣式表中最好少用浮動屬性，由於它們會消失。
• 若是想要知道打印樣式表的效果如何，直接在瀏覽器上選擇打印預覽就能夠了。

備註： 參考： http://blog.csdn.net/pangni/a...

在書寫高效 CSS 時會有哪些問題須要考慮？

• 樣式是：從右向左的解析一個選擇器
• ID最快，Universal最慢 有四種類型的key selector，解析速度由快到慢依次是：ID、class、tag和universal
• 不要tag-qualify （永遠不要這樣作 ul#main-navigation { } ID已是惟一的，不須要Tag來標識，這樣作會讓選擇器變慢。）
• 後代選擇器最糟糕（換句話說，下面這個選擇器是很低效的： html body ul li a { }）
• 想清楚你爲何這樣寫
• CSS3的效率問題（CSS3選擇器（好比 :nth-child）可以漂亮的定位咱們想要的元素，又能保證咱們的CSS整潔易讀。可是這些神奇的選擇器會浪費不少的瀏覽器資源。）
• 咱們知道#ID速度是最快的，那麼咱們都用ID，是否是很快。可是咱們不該該爲了效率而犧牲可讀性和可維護性

使用 CSS 預處理器的優缺點有哪些？

缺點：簡單來講CSS預處理器語言較CSS玩法變得更高級了，但同時下降了本身對最終代碼的控制力。更致命的是提升了門檻，首先是上手門檻，其次是維護門檻，再來是團隊總體水平和規範的門檻。這也形成了初學學習成本的昂貴。
優勢：用一種專門的編程語言，爲CSS增長了一些編程的特性，將CSS做爲目標生成文件，而後開發者就只要使用這種語言進行編碼工做。通俗的說，CSS預處理器用一種專門的編程語言，進行Web頁面樣式設計，而後再編譯成正常的CSS文件，以供項目使用。CSS預處理器爲CSS增長一些編程的特性，無需考慮瀏覽器的兼容性問題，例如你能夠在CSS中使用變量、簡單的邏輯程序、函數等等在編程語言中的一些基本特性，可讓你的CSS更加簡潔、適應性更強、可讀性更佳，更易於代碼的維護等諸多好處。

若是設計中使用了非標準的字體，你該如何去實現？

Webfonts (字體服務例如：Google Webfonts，Typekit 等等。)

請解釋瀏覽器是如何判斷元素是否匹配某個 CSS 選擇器？

瀏覽器先產生一個元素集合，這個集合每每由最後一個部分的索引產生（若是沒有索引就是全部元素的集合）。而後向上匹配，若是不符合上一個部分，就把元素從集合中刪除，直到真個選擇器都匹配完，還在集合中的元素就匹配這個選擇器了。

請描述僞元素 (pseudo-elements) 及其用途

僞類用於當已有元素處於的某個狀態時，爲其添加對應的樣式，這個狀態是根據用戶行爲而動態變化的。
僞元素用於建立一些不在文檔樹中的元素，併爲其添加樣式。

區別：僞類的操做對象是文檔樹中已有的元素，而僞元素則建立了一個文檔數外的元素。所以，僞類與僞元素的區別在於：有沒有建立一個文檔樹以外的元素

參考： http://www.alloyteam.com/2016...

請解釋你對盒模型的理解，以及如何在 CSS 中告訴瀏覽器使用不一樣的盒模型來渲染你的佈局？

盒子模型分爲兩類：W3C標準盒子模型和IE盒子模型
這二者的關鍵區別就在於：
寬高的計算：W3C盒子模型——屬性高（height）和屬性寬（width）這兩個值不包含 填充（padding）和邊框（border）
IE盒子模型——屬性高（height）和屬性寬（width）這兩個值包含 填充（padding）和邊框（border）

各瀏覽器盒模型的組成結構是一致的，區別只是在」怪異模式」下寬度和高度的計算方式，而「標準模式」下則沒有區別。

組成結構以寬度爲例：總寬度=marginLeft+borderLeft+paddingLeft+contentWidth+paddingRight+borderRight+marginRight（W3C標準盒子模型）。頁面在「怪異模式」下，css中爲元素的width和height設置的值在標準瀏覽器和ie系列(ie9除外)裏的表明的含義是不一樣的（IE盒子模型）。

於是解決兼容型爲題最簡潔和值得推薦的方式是：下述的第一條。

• 將頁面設爲「標準模式」。 添加對應的dtd標識，如： <!DOCTYPE html>
• 使用hack或者在外面套上一層wrapper。 前提是頁面處於「怪異模式」，「標準模式」不存在兼容性問題。

一、hack的方式

#box {  
    width:100px !important; // ie9,ff,chrome,opera這樣的標準瀏覽器
    width:160px; //全部的瀏覽器；它的本意是隻對不認識!important的設置。但是ie七、ie8也認識
    +width:160px!important;//ie7
    width:160px/0!important;//ie8
    padding:0 10px;border:20px solid blue;margin:70px;  
}

二、wrapper

#box {  
width:100px;  
margin:70px;  
float:left;  
}  
.wrapper {  
padding:0 10px;border:20px solid blue;  
}

總結：使用「標準模式」便可實現兼容，不兼容只發生在「怪異模式」下。並且正常的頁面基本上都選擇前者，若是選擇後者，麻煩不止於此，一些css技巧也將失靈，如將div居中：div {margin:0 auto;}

請解釋 * { box-sizing: border-box; } 的做用, 而且說明使用它有什麼好處？

設置之後，至關於以怪異模式解析，border和padding全會在你設置的寬度內部，好比手機端設置兩行而且的佈局，寬度各爲50%,若是不用這個屬性，設置border後右邊的div會下來錯位，設置這個屬性，寬度仍是50%而不是50%+*px,兩行能夠並列顯示

說到 IE 的 bug，在 IE6之前的版本中，IE對盒模型的解析出現一些問題，跟其它瀏覽器不一樣，將 border 與 padding 都包含在 width 以內。而另一些瀏覽器則與它相反，是不包括border和padding的。對於IE瀏覽器，當咱們設置 box-sizing: content-box; 時，瀏覽器對盒模型的解釋聽從咱們以前認識到的 W3C 標準，當它定義width和height時，它的寬度不包括border和padding；對於非IE瀏覽器，當咱們設置box-sizing: border-box; 時，瀏覽器對盒模型的解釋與 IE6以前的版本相同，當它定義width和height時，border和padding則是被包含在寬高以內的。內容的寬和高能夠經過定義的「width」和 「height」減去相應方向的「padding」和「border」的寬度獲得。內容的寬和高必須保證不能爲負，必要時將自動增大該元素border box的尺寸以使其內容的寬或高最小爲0。

好處：　

• 使用 * { box-sizing: border-box; }可以統一IE和非IE瀏覽器之間的差別。
• 　解決排版的問題，每一個盒子之間排版時不用考慮padding和border的寬度計算

請羅列出你所知道的 display 屬性的所有值?

display 屬性規定元素應該生成的框的類型。

請解釋 inline 和 inline-block 的區別？

都是display 屬性規定元素應該生成的框的類型。可是block表明塊級元素，元素先後都有換行符；inline是默認的樣式，表示該元素被顯示爲內聯元素，元素先後沒有換行符號。也就是說，block元素一般被現實爲獨立的一塊，會單獨換一行；inline元素則先後不會產生換行，一系列inline元素都在一行內顯示，直到該行排滿。而inline-block表明行內塊元素（css2.0新增）。

display:block:

• block元素會獨佔一行，多個block元素會各自新起一行。默認狀況下，block元素寬度自動填滿其父元素寬度。
• block元素能夠設置width,height屬性。塊級元素即便設置了寬度,仍然是獨佔一行。
• block元素能夠設置margin和padding屬性。

display:inline:

• inline元素不會獨佔一行，多個相鄰的行內元素會排列在同一行裏，直到一行排列不下，纔會新換一行，其寬度隨元素的內容而變化。
• inline元素設置width,height屬性無效。
• inline元素的margin和padding屬性，水平方向的padding-left, padding-right, margin-left, margin-right都產生邊距效果；但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會產生邊距效果。

display:inline-block:
簡單來講就是將對象呈現爲inline對象，可是對象的內容做爲block對象呈現。以後的內聯對象會被排列在同一行內。好比咱們能夠給一個link（a元素）inline-block屬性值，使其既具備block的寬度高度特性又具備inline的同行特性

請解釋 relative、fixed、absolute 和 static 元素的區別?

各個屬性的值：

• static：默認值。沒有定位，元素出如今正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。
• relative：生成相對定位的元素，經過top,bottom,left,right的設置相對於其正常位置進行定位。可經過z-index進行層次分級。
• absolute：生成絕對定位的元素，相對於 static 定位之外的第一個父元素進行定位。元素的位置經過 「left」, 「top」, 「right」 以及 「bottom」 屬性進行規定。可經過z-index進行層次分級。
• fixed：生成絕對定位的元素，相對於瀏覽器窗口進行定位。元素的位置經過 「left」, 「top」, 「right」 以及 「bottom」 屬性進行規定。可經過z-index進行層次分級。

relative和absolute進行對比分析：

• relative。定位爲relative的元素脫離正常的文本流中，但其在文本流中的位置依然存在。
• absolute。定位爲absolute的層脫離正常文本流，但與relative的區別是其在正常流中的位置不在存在。
• fixed:定位爲絕對定位，脫離正常文本流，相對於瀏覽器窗口進行定位

relative和absolute與fixed進行對比分析：

• relative定位的層老是相對於其最近的父元素，不管其父元素是何種定位方式。
• absolute定位的層老是相對於其最近的定義爲absolute或relative的父層，而這個父層並不必定是其直接父層。若是其父層中都未定義absolute或relative，則其將相對body進行定位，
• fixed：生成絕對定位的元素，相對於瀏覽器窗口進行定位。

CSS中字母 ‘C’ 的意思是疊層 (Cascading)。請問在肯定樣式的過程當中優先級是如何決定的 (請舉例)？如何有效使用此係統？

請寫出一些塊級元素、行內元素、行內塊元素？

• 塊級：div、p、ul、ol、body、from
• 行內： title  lable  span a
• 行內塊：  img  input  td

解釋一下盒子模型？

盒子模型的三維立體結構: 第一層：border   第二層：內容+padding    第三層：背景圖片     第四層：背景顏色      第五層：外邊距

什麼是語義化的html標籤？

語義化的HTML就是寫出的HTML代碼，符合內容的結構化（內容語義化），選擇合適的標籤（代碼語義化），可以便於開發者閱讀和寫出更優雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析。

• 語義化有利於SEO，有利於搜索引擎爬蟲更好的理解咱們的網頁，從而獲取更多的有效信息，提高網頁的權重。
• 在沒有CSS的時候可以清晰的看出網頁的結構，加強可讀性。
• 便於團隊開發和維護，語義化的HTML可讓開發者更容易的看明白，從而提升團隊的效率和協調能力。
• 支持多終端設備的瀏覽器渲染。

CSS 有哪些選擇器？權重計算及優先級？

id選擇器、類選擇器、元素選擇器、全局選擇器、組合選擇器、繼承選擇器、僞類選擇器

權重計算:
第一等級：表明內聯樣式，如style=""，權值爲 1000
第二等級：表明id選擇器，如#content，權值爲100
第三等級：表明類，僞類和屬性選擇器，如.content，權值爲10
第四等級：表明標籤選擇器和僞元素選擇器，如div p，權值爲1
Css 語句權重由選擇器的權值相加可得。
樣式優先級:！important>行內樣式>內部樣式>外部樣式

• !important聲明的樣式優先級最高，若是衝突再進行計算。
• 若是優先級相同，則選擇最後出現的樣式。
• 繼承獲得的樣式的優先級最低。

CSS 引入方式有哪些？link和 @important的區別？

CSS的引入方式共有三種：

• 行內樣式（使用style屬性引入CSS樣式）
• 內部樣式表（在style標籤中書寫CSS代碼。style標籤寫在head標籤中）
• 外部樣式表（連接式、導入式）

連接：

<link type="text/css" rel="styleSheet"  href="CSS文件路徑" />

導入：

<style type="text/css">
      @import url("css文件路徑");
</style>

連接和道路的區別：
<link>：

• 屬於XHTML
• 優先加載CSS文件到頁面

@import：

• 屬於CSS2.1
• 先加載HTML結構在加載CSS文件

CSS選擇器有哪些？哪些屬性能夠繼承？

CSS選擇符：id選擇器(#myid)、類選擇器(.myclassname)、標籤選擇器(div, h1, p)、相鄰選擇器(h1 + p)、子選擇器（ul > li）、後代選擇器（li a）、通配符選擇器（*）、屬性選擇器（a[rel=」external」]）、僞類選擇器（a:hover, li:nth-child）

可繼承的屬性：font-size, font-family, color
不可繼承的樣式：border, padding, margin, width, height
優先級（就近原則）：!important > [ id > class > tag ]
!important 比內聯優先級高

CSS3有哪些新特性？

• RGBA和透明度
• background-image background-origin(content-box/padding-box/border-box) background-size background-repeat
• word-wrap（對長的不可分割單詞換行）word-wrap：break-word
• 文字陰影：text-shadow： 5px 5px 5px #FF0000;（水平陰影，垂直陰影，模糊距離，陰影顏色）
• font-face屬性：定義本身的字體
• 圓角（邊框半徑）：border-radius 屬性用於建立圓角
• 邊框圖片：border-image: url(border.png) 30 30 round
• 盒陰影：box-shadow: 10px 10px 5px #888888
• 媒體查詢：定義兩套css，當瀏覽器的尺寸變化時會採用不一樣的屬性

請解釋一下CSS3的flexbox（彈性盒佈局模型）,以及適用場景？

該佈局模型的目的是提供一種更加高效的方式來對容器中的條目進行佈局、對齊和分配空間。在傳統的佈局方式中，block 佈局是把塊在垂直方向從上到下依次排列的；而 inline 佈局則是在水平方向來排列。彈性盒佈局並無這樣內在的方向限制，能夠由開發人員自由操做。
適用場景：彈性佈局適合於移動前端開發，在Android和ios上也完美支持。

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

首先，須要把元素的寬度、高度設爲0。而後設置邊框樣式。

width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;

一個滿屏品字佈局如何設計?

第一種真正的品字：

三塊高寬是肯定的；
上面那塊用margin: 0 auto;居中；
下面兩塊用float或者inline-block不換行；
用margin調整位置使他們居中。

第二種全屏的品字佈局:
上面的div設置成100%，下面的div分別寬50%，而後使用float或者inline使其不換行。

常見的兼容性問題？

• 不一樣瀏覽器的標籤默認的margin和padding不同。*{margin:0;padding:0;}
• IE6雙邊距bug：塊屬性標籤float後，又有橫行的margin狀況下，在IE6顯示margin比設置的大。hack：display:inline;將其轉化爲行內屬性。
• 漸進識別的方式，從整體中逐漸排除局部。首先，巧妙的使用「9」這一標記，將IE瀏覽器從全部狀況中分離出來。接着，再次使用「+」將IE8和IE七、IE6分離開來，這樣IE8已經獨立識別。

{
background-color:#f1ee18;/*全部識別*/
.background-color:#00deff\9; /*IE六、七、8識別*/
+background-color:#a200ff;/*IE六、7識別*/
_background-color:#1e0bd1;/*IE6識別*/
}

• 設置較小高度標籤（通常小於10px），在IE6，IE7中高度超出本身設置高度。hack：給超出高度的標籤設置overflow:hidden;或者設置行高line-height 小於你設置的高度。
• IE下，可使用獲取常規屬性的方法來獲取自定義屬性,也可使用getAttribute()獲取自定義屬性；Firefox下，只能使用getAttribute()獲取自定義屬性。解決方法:統一經過getAttribute()獲取自定義屬性。
• Chrome 中文界面下默認會將小於 12px 的文本強制按照 12px 顯示,可經過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決。
• 超連接訪問事後hover樣式就不出現了，被點擊訪問過的超連接樣式再也不具備hover和active了。解決方法是改變CSS屬性的排列順序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}

爲何要初始化CSS樣式？

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

absolute的containing block計算方式跟正常流有什麼不一樣？

不管屬於哪一種，都要先找到其祖先元素中最近的 position 值不爲 static 的元素，而後再判斷：

• 若此元素爲 inline 元素，則 containing block 爲可以包含這個元素生成的第一個和最後一個 inline box 的 padding box (除 margin, border 外的區域) 的最小矩形；
• 不然,則由這個祖先元素的 padding box 構成。

若是都找不到，則爲 initial containing block。
補充：

• static(默認的)/relative：簡單說就是它的父元素的內容框（即去掉padding的部分）
• absolute: 向上找最近的定位爲absolute/relative的元素
• fixed: 它的containing block一概爲根元素(html/body)

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

當一個元素的visibility屬性被設置成collapse值後，對於通常的元素，它的表現跟hidden是同樣的。

• chrome中，使用collapse值和使用hidden沒有區別。
• firefox，opera和IE，使用collapse值和使用display：none沒有什麼區別。

display:none與visibility：hidden的區別？

• display：none 不顯示對應的元素，在文檔佈局中再也不分配空間（迴流+重繪）
• visibility：hidden 隱藏對應元素，在文檔佈局中仍保留原來的空間（重繪）

position跟display、overflow、float這些特性相互疊加後會怎麼樣？

display屬性規定元素應該生成的框的類型；position屬性規定元素的定位類型；float屬性是一種佈局方式，定義元素在哪一個方向浮動。
相似於優先級機制：position：absolute/fixed優先級最高，有他們在時，float不起做用，display值須要調整。float 或者absolute定位的元素，只能是塊元素或表格。

對BFC規範(塊級格式化上下文：block formatting context)的理解？

BFC規定了內部的Block Box如何佈局。
定位方案：

• 內部的Box會在垂直方向上一個接一個放置。
• Box垂直方向的距離由margin決定，屬於同一個BFC的兩個相鄰Box的margin會發生重疊。
• 每一個元素的margin box 的左邊，與包含塊border box的左邊相接觸。
• BFC的區域不會與float box重疊。
• BFC是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。
• 計算BFC的高度時，浮動元素也會參與計算。

知足下列條件之一就可觸發BFC：

• 根元素，即html
• float的值不爲none（默認）
• overflow的值不爲visible（默認）
• display的值爲inline-block、table-cell、table-caption
• position的值爲absolute或fixed

爲何會出現浮動和何時須要清除浮動？清除浮動的方式？

浮動元素碰到包含它的邊框或者浮動元素的邊框停留。因爲浮動元素不在文檔流中，因此文檔流的塊框表現得就像浮動框不存在同樣。浮動元素會漂浮在文檔流的塊框上。
浮動帶來的問題：

• 父元素的高度沒法被撐開，影響與父元素同級的元素
• 與浮動元素同級的非浮動元素（內聯元素）會跟隨其後
• 若非第一個元素浮動，則該元素以前的元素也須要浮動，不然會影響頁面顯示的結構。

清除浮動的方式：

• 父級div定義height
• 最後一個浮動元素後加空div標籤 並添加樣式clear:both。
• 包含浮動元素的父標籤添加樣式overflow爲hidden或auto。
• 父級div定義zoom

上下margin重合的問題

在重合元素外包裹一層容器，並觸發該容器生成一個BFC。
例子：

<div class="aside"></div>
    <div class="text">
        <div class="main"></div>
    </div>
    <!--下面是css代碼-->
    .aside {
        margin-bottom: 100px;  
        width: 100px;
        height: 150px;
        background: #f66;
    }
    .main {
        margin-top: 100px;
        height: 200px;
        background: #fcc;
    }
     .text{
        /*盒子main的外面包一個div，經過改變此div的屬性使兩個盒子分屬於兩個不一樣的BFC，以此來阻止margin重疊*/
        overflow: hidden;  //此時已經觸發了BFC屬性。
    }

設置元素浮動後，該元素的display值是多少？

自動變成display:block

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

經過媒體查詢能夠爲不一樣大小和尺寸的媒體定義不一樣的css，適應相應的設備的顯示。

• <head>裏邊<link rel=」stylesheet」 type=」text/css」 href=」xxx.css」 media=」only screen and (max-device-width:480px)」>
• CSS : @media only screen and (max-device-width:480px) {/css樣式/}

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

• 避免過分約束
• 避免後代選擇符
• 避免鏈式選擇符
• 使用緊湊的語法
• 避免沒必要要的命名空間
• 避免沒必要要的重複
• 最好使用表示語義的名字。一個好的類名應該是描述他是什麼而不是像什麼
• 避免！important，能夠選擇其餘選擇器
• 儘量的精簡規則，你能夠合併不一樣類裏的重複規則

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

CSS選擇器的解析是從右向左解析的。若從左向右的匹配，發現不符合規則，須要進行回溯，會損失不少性能。若從右向左匹配，先找到全部的最右節點，對於每個節點，向上尋找其父節點直到找到根元素或知足條件的匹配規則，則結束這個分支的遍歷。兩種匹配規則的性能差異很大，是由於從右向左的匹配在第一步就篩選掉了大量的不符合條件的最右節點（葉子節點），而從左向右的匹配規則的性能都浪費在了失敗的查找上面。
而在 CSS 解析完畢後，須要將解析的結果與 DOM Tree 的內容一塊兒進行分析創建一棵 Render Tree，最終用來進行繪圖。在創建 Render Tree 時（WebKit 中的「Attachment」過程），瀏覽器就要爲每一個 DOM Tree 中的元素根據 CSS 的解析結果（Style Rules）來肯定生成怎樣的 Render Tree。

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

使用偶數字體。偶數字號相對更容易和 web 設計的其餘部分構成比例關係。Windows 自帶的點陣宋體（中易宋體）從 Vista 開始只提供 十二、1四、16 px 這三個大小的點陣，而 1三、1五、17 px時用的是小一號的點。（即每一個字佔的空間大了 1 px，但點陣沒變），因而略顯稀疏。

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

什麼時候使用margin：

• 須要在border外側添加空白
• 空白處不須要背景色
• 上下相連的兩個盒子之間的空白，須要相互抵消時。

什麼時候使用padding：

• 須要在border內側添加空白
• 空白處須要背景顏色
• 上下相連的兩個盒子的空白，但願爲二者之和。

兼容性的問題：在IE5 IE6中，爲float的盒子指定margin時，左側的margin可能會變成兩倍的寬度。經過改變padding或者指定盒子的display：inline解決。

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

當按百分比設定一個元素的寬度時，它是相對於父容器的寬度計算的，可是，對於一些表示豎向距離的屬性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，當按百分比設定它們時，依據的也是父容器的寬度，而不是高度。

全屏滾動的原理是什麼？用到了CSS的哪些屬性？

原理：有點相似於輪播，總體的元素一直排列下去，假設有5個須要展現的全屏頁面，那麼高度是500%，只是展現100%，剩下的能夠經過transform進行y軸定位，也能夠經過margin-top實現

overflow：hidden；transition：all 1000ms ease；

什麼是響應式設計？響應式設計的基本原理是什麼？如何兼容低版本的IE？

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

<meta name="’viewport’" content="」width=device-width," initial-scale="1." maximum-scale="1,user-scalable=no」"/>

視差滾動效果？

視差滾動（Parallax Scrolling）經過在網頁向下滾動的時候，控制背景的移動速度比前景的移動速度慢來建立出使人驚歎的3D效果。

• CSS3實現: 優勢：開發時間短、性能和開發效率比較好，缺點是不能兼容到低版本的瀏覽器
• jQuery實現: 經過控制不一樣層滾動速度，計算每一層的時間，控制滾動效果。
  優勢：能兼容到各個版本的，效果可控性好
  缺點：開發起來對製做者要求高
• 插件實現方式: 例如：parallax-scrolling，兼容性十分好

::before 和 :after中雙冒號和單冒號有什麼區別？解釋一下這2個僞元素的做用

• 單冒號(:)用於CSS3僞類，雙冒號(::)用於CSS3僞元素。
• ::before就是以一個子元素的存在，定義在元素主體內容以前的一個僞元素。並不存在於dom之中，只存在在頁面之中。

:before 和 :after 這兩個僞元素，是在CSS2.1裏新出現的。起初，僞元素的前綴使用的是單冒號語法，但隨着Web的進化，在CSS3的規範裏，僞元素的語法被修改爲使用雙冒號，成爲::before ::after

你對line-height是如何理解的？

行高是指一行文字的高度，具體說是兩行文字間基線的距離。CSS中起高度做用的是height和line-height，沒有定義height屬性，最終其表現做用必定是line-height。
單行文本垂直居中：把line-height值設置爲height同樣大小的值能夠實現單行文字的垂直居中，其實也能夠把height刪除。

多行文本垂直居中：須要設置display屬性爲inline-block。

怎麼讓Chrome支持小於12px 的文字？

p{font-size:10px;-webkit-transform:scale(0.8);} //0.8是縮放比例

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

-webkit-font-smoothing在window系統下沒有起做用，可是在IOS設備上起做用-webkit-font-smoothing：antialiased是最佳的，灰度平滑。

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

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>

若是須要手動寫動畫，你認爲最小時間間隔是多久，爲何？

多數顯示器默認頻率是60Hz，即1秒刷新60次，因此理論上最小間隔爲1/60＊1000ms ＝ 16.7ms

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

行框的排列會受到中間空白（回車空格）等的影響，由於空格也屬於字符,這些空白也會被應用樣式，佔據空間，因此會有間隔，把字符大小設爲0，就沒有空格了。
解決方法：

• 能夠將<li>代碼所有寫在一排
• 浮動li中float：left
• 在ul中用font-size：0（谷歌不支持）；可使用letter-space：-3px

display:inline-block 何時會顯示間隙？

• 有空格時候會有間隙 解決：移除空格
• margin正值的時候 解決：margin使用負值
• 使用font-size時候 解決：font-size:0、letter-spacing、word-spacing

有一個高度自適應的div，裏面有兩個div，一個高度100px，但願另外一個填滿剩下的高度

外層div使用position：relative；高度要求自適應的div使用position: absolute; top: 100px; bottom: 0; left: 0

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

• png是便攜式網絡圖片（Portable Network Graphics）是一種無損數據壓縮位圖文件格式.優勢是：壓縮比高，色彩好。 大多數地方均可以用。
• jpg是一種針對相片使用的一種失真壓縮方法，是一種破壞性的壓縮，在色調及顏色平滑變化作的不錯。在www上，被用來儲存和傳輸照片的格式。
• gif是一種位圖文件格式，以8位色重現真色彩的圖像。能夠實現動畫效果.
• webp格式是谷歌在2010年推出的圖片格式，壓縮率只有jpg的2/3，大小比png小了45%。缺點是壓縮的時間更久了，兼容性很差，目前谷歌和opera支持。

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

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

闡述一下CSS Sprites

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