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

標準盒子模型：寬度=內容的寬度（content）+ border + padding + margin
低版本IE盒子模型：寬度=內容寬度（content+border+padding）+ margin

2 box-sizing屬性？

用來控制元素的盒子模型的解析模式，預設為content-box
context-box：W3C的標準盒子模型，設定元素的 height/width 屬性指的是content部分的高/寬
border-box：IE傳統盒子模型。設定元素的height/width屬性指的是border + padding + content部分的高/寬

3 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 比內聯優先順序高

4 CSS優先順序演算法如何計算？

元素選擇符： 1
class選擇符： 10
id選擇符：100
元素標籤：1000

1. !important宣告的樣式優先順序最高，如果衝突再進行計算。
2. 如果優先順序相同，則選擇最後出現的樣式。
3. 繼承得到的樣式的優先順序最低。

5 CSS3新增偽類有那些?

p:first-of-type 選擇屬於其父元素的首個元素
p:last-of-type 選擇屬於其父元素的最後元素
p:only-of-type 選擇屬於其父元素唯一的元素
p:only-child 選擇屬於其父元素的唯一子元素
p:nth-child(2) 選擇屬於其父元素的第二個子元素
:enabled :disabled 表單控制元件的禁用狀態。
:checked 單選框或複選框被選中。

6 如何居中div？如何居中一個浮動元素？如何讓絕對定位的div居中？

div：

浮動元素的上下左右居中：

絕對定位的左右居中：

還有更加優雅的居中方式就是用flexbox，我以後會做整理。

7 display有哪些值？說明他們的作用?

inline（預設）–內聯
none–隱藏
block–塊顯示
table–表格顯示
list-item–專案列表
inline-block

8 position的值？

static（預設）：按照正常文件流進行排列；
relative（相對定位）：不脫離文件流，參考自身靜態位置通過 top, bottom, left, right 定位；
absolute(絕對定位)：參考距其最近一個不為static的父級元素通過top, bottom, left, right 定位；
fixed(固定定位)：所固定的參照對像是可視視窗。

9 CSS3有哪些新特性？

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

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

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

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

首先，需要把元素的寬度、高度設為0。然後設定邊框樣式。

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

第一種真正的品字：

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

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

13 常見的相容性問題？

1. 不同瀏覽器的標籤預設的margin和padding不一樣。*{margin:0;padding:0;}
2. IE6雙邊距bug：塊屬性標籤float後，又有橫行的margin情況下，在IE6顯示margin比設定的大。hack：display:inline;將其轉化為行內屬性。
3. 漸進識別的方式，從總體中逐漸排除區域性。首先，巧妙的使用“9”這一標記，將IE瀏覽器從所有情況中分離出來。接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經獨立識別。
   

   123456

   {background-color:#f1ee18;/*所有識別*/.background-color:#00deff\9; /*IE6、7、8識別*/+background-color:#a200ff;/*IE6、7識別*/_background-color:#1e0bd1;/*IE6識別*/}

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

14 為什麼要初始化CSS樣式

因為瀏覽器的相容問題，不同瀏覽器對有些標籤的預設值是不同的，如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。

15 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: 它的containing block一律為根元素(html/body)

16 CSS裡的visibility屬性有個collapse屬性值？在不同瀏覽器下以後什麼區別？

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

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

17 display:none與visibility：hidden的區別？

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

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

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

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

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

1. 內部的Box會在垂直方向上一個接一個放置。
2. Box垂直方向的距離由margin決定，屬於同一個BFC的兩個相鄰Box的margin會發生重疊。
3. 每個元素的margin box 的左邊，與包含塊border box的左邊相接觸。
4. BFC的區域不會與float box重疊。
5. BFC是頁面上的一個隔離的獨立容器，容器裡面的