前端面試題 | CSS篇
標準盒子模型：寬度=內容的寬度（content）+ border + padding + margin
低版本IE盒子模型：寬度=內容寬度（content+border+padding）+ margin
2. CSS常用選擇器有哪些？
3. CSS3新增偽類有哪些？
p:first-of-type 選擇屬於其父元素的首個元素
p:last-of-type 選擇屬於其父元素的最後元素
p:only-of-type 選擇屬於其父元素唯一的元素
p:only-child 選擇屬於其父元素的唯一子元素
p:nth-child(2) 選擇屬於其父元素的第二個子元素
:enabled :disabled 表單控制元件的禁用狀態。
:checked 單選框或複選框被選中
4. CSS優先順序計算規則
important Infinity
行間樣式 1000
id 100
class/屬性/偽類 10
標籤選擇器/偽元素 1
通配 0
5. em\px\rem區別
px：絕對單位，頁面按精確畫素展示。
em：相對單位，基準點為父節點字型的大小，如果自身定義了font-size按自身來計算（瀏覽器預設字型是16px），整個頁面內1em不是一個固定的值。
rem：相對單位，可理解為”root em”, 相對根節點html的字型大小來計算，CSS3新加屬性，chrome/firefox/IE9+支援。
PX特點：
-
IE無法調整那些使用px作為單位的字型大小；
-
國外的大部分網站能夠調整的原因在於其使用了em或rem作為字型單位；
-
Firefox能夠調整px和em，rem，但是96%以上的中國網民使用IE瀏覽器(或核心)。
EM特點 ：
-
em的值並不是固定的；
-
em會繼承父級元素的字型大小。
rem特點：
rem是CSS3新增的一個相對單位（root em，根em），這個單位引起了廣泛關注。區別在於使用rem為元素設定字型大小時，仍然是相對大小，但相對的只是HTML根元素。
這個單位可謂集相對大小和絕對大小的優點於一身，通過它既可以做到只修改根元素就成比例地調整所有字型大小，又可以避免字型大小逐層複合的連鎖反應。
目前，除了IE8及更早版本外，所有瀏覽器均已支援rem。對於不支援它的瀏覽器，應對方法也很簡單，就是多寫一個絕對單位的宣告。這些瀏覽器會忽略用rem設定的字型大小。
6. 如何使用自定義字型
@font-face
7. CSS有哪些繼承屬性
8. CSS多行省略
9. 如何去除inline-blcok元素間隙？
10. 垂直居中佈局
11. display屬性？
block: 指定元素為塊級元素，可以設寬高，元素前後自帶換行符，比如div、p。 inline：指定元素為內聯元素，不能設定寬高，元素不帶換行符，會顯示在同一行，比如span。 inline-block：行內塊元素，兼具前兩者的特點，元素前後不帶換行符，但又可以設定寬高，比如input\img。 none：可以隱藏元素。 常用的還有2個，我個人認為非常實用，就是table和table-cell，結合使用在父子元素身上，子元素如果有大段文字，只要再加一個vertical-align:middle，就能輕鬆將文字垂直居中。 CSS3新增了一個非常適合移動端使用的flex，能很好的適應不同螢幕大小。
12. box-sizing屬性
用來控制元素的盒子模型的解析模式，預設為content-box。
context-box：W3C的標準盒子模型，設定元素的height/width屬性指的是content部分的高/寬；border-box：IE傳統盒子模型。設定元素的height/width屬性指的是border + padding + content部分的高/寬。
13. display:none與visibility:hidden
很多前端的同學認為visibility: hidden和display: none的區別僅僅在於display: none隱藏後的元素不佔據任何空間，而visibility: hidden隱藏後的元素空間依舊保留 ，實際上沒那麼簡單，visibility是一個非常有故事性的屬性
1、visibility具有繼承性，給父元素設定visibility:hidden;子元素也會繼承這個屬性。但是如果重新給子元素設定visibility: visible,則子元素又會顯示出來。這個和display: none有著質的區別
2、visibility: hidden不會影響計數器的計數，如圖所示，visibility: hidden雖然讓一個元素不見了，但是其計數器仍在執行。這和display: none完全不一樣。
visibility屬性的collapse屬性值
collapse屬性很有意思，當一個元素的 visibility 屬性被設定成 collapse 值後，對於一般的元素，它的表現跟 hidden 是一樣的。但例外的是，如果這個元素是table相關的元素，例如table行，table group，table列，table column group，它的表現會和瀏覽器不同而變化。
在谷歌瀏覽器裡，使用 collapse 值和使用 hidden 值沒有什麼區別。
在火狐瀏覽器和IE8裡，使用 collapse值的效果就如它的字面意思：table的行會消失，它的下面一行會補充它的位置。效果類似於display：none。
內外邊距和邊框
rgba和opacity的透明有何不同？
position有哪些值？
1、static（靜態定位）：預設值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 宣告）。
2、relative（相對定位）：生成相對定位的元素，通過top,bottom,left,right的設定相對於其正常（原先本身）位置進行定位。可通過z-index進行層次分級。元素位置變換以後，不會脫離文件流。
3、absolute（絕對定位）：生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。可通過z-index進行層次分級，會脫離文件流。
4、fixed（固定定位）：生成絕對定位的元素，相對於瀏覽器視窗進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。可通過z-index進行層次分級。
如何實現水平居中？
div：
border: 1px solid red; margin: 0 auto; height: 50px; width: 80px; 複製程式碼
浮動元素的上下左右居中：
border: 1px solid red; float: left; position:absolute; width: 200px; height: 100px; left: 50%; top: 50%; margin: -50px 0 0 -100px; 複製程式碼
絕對定位的左右居中：
position:absolute; left:50%; top:50%; margin-left:-50px; margin-top:-50px; 複製程式碼
還有一種更巧妙的方法，是利用了絕對定位元素的自動伸縮的特性實現的。程式碼如下：
position:absolute; left: 0; right: 0; top: 0; bottom: 0; margin:auto; 複製程式碼