CSS面試題
1.有哪些方式可以對一個DOM設置它的CSS樣式？
外部樣式表。引入一個外部CSS文件；
內部樣式表。將CSS代碼放在<head>標簽內部；
內聯樣式，將CSS樣式直接定義在HTML元素內部；
2.CSS中可以通過哪些屬性定義，使得一個DOM元素不顯示在瀏覽器的可視範圍內？
最基本的：
設置display屬性為none，或者設置visiblity為hidden
技巧性：
設置高度為0， 設置透明度為0，設置z-index位置在-1000
3.超鏈接訪問過後hover樣式就不出現的問題時什麽？如何解決？
被點擊訪問過的超鏈接樣式不再具有hover和active了，解決方式是改變CSS屬性的排列順序：L-V-H-A（linked, visited, hover, active）。
4.什麽是Css Hack?ie6,7,8的hack分別是什麽？
針對不同的瀏覽器寫不同的CSS Code的過程，就是CSS Hack。實例如下：
#test{ width: 300px; height: 300px; background-color: blue; background-color: red\9; /* all ie */ background-color: yellow\0; /* ie8 */ +background-color: pink; /*ie7 */ _background-color: orange; /* ie6 */ :root #test{ background: purple\9; /* ie9 */ } @media all and {min-width: 0px} #test{background-color: black\0;} /* opera */ @media screen and {-webkit-min-device-pixel-ratio: 0 } {#test {background-color: gray}} /*chrome and safari */ }
@media可以針對不同的媒體類型定義不同的樣式。特別是如果你需要設計響應式的頁面，@media是非常有用的。當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器寬度和高度重新渲染頁面。
5.行內元素和塊級元素的具體區別是什麽？行內元素的padding和margin可設置嗎？
塊級元素（block）特性：
總是獨占一行，表現為另起一行開始，而且其後的元素也必須另起一行顯示。
width、height、padding（內邊距）、margin(外邊距)都可控制。
內聯元素（inline）特性：
寬度、高度、內邊距的padding-top/padding-bottom和外邊距的margin-top、margin-bottom都不可改變（也就是padding和margin的left和right是可以設置的）。
這裏還有其他問題。瀏覽器還有默認的天生inline-block元素（擁有內在尺寸，可設置高寬，但不會自動換行），有哪些元素是天生inline-block元素？
它們是<input>、<img>、<button>、<textare>、<label> 。
6.rgba()和opacity的透明效果有什麽區別？
rgba()和opacity都能實現透明效果，但最大的不同是opacity作用於元素，以及元素內的所有內容的透明度，而rgba()只作用於元素的顏色或起背景色。設置rgba透明的元素的子元素不會繼承透明效果。
7.CSS中可以讓文字在垂直和水平方向重疊的兩個屬性分別是什麽？
垂直方向：line-height。設置成比字體高度還小就可以讓兩行重疊
水平方向：letter-spacing。設置為負值即可實現重疊。
8.如何垂直居中一個浮動元素？
下面代碼分別實現了已知元素高度、未知元素高度、圖片的垂直居中方法。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>垂直居中一個浮動元素</title> <style type="text/css"> #div1 { background-color:#6699ff; width: 200px; height: 200px; position: absolute; top: 50%; left: 50%; margin-top: -100px; margin-left: -100px; } #div2{ width: 200px; height: 200px; background-color: #6699ff; margin: auto; position: absolute; left: 0; top: 0; right: 0; bottom: 0; } #container{ width: 600px; height: 600px; background: hotpink; display: table-cell; text-align: center; vertical-align: middle; } </style> </head> <body> <div style="background:hotpink; width: 600px; height: 600px; position: relative;"> <div id="div1"> 方法一：已知元素的高寬 </div> </div> <br> <div style="background:hotpink; width: 600px; height: 600px; position: relative;"> <div id="div2"> 方法二:未知元素的高寬 </div> </div> <br> <div id="container"> <img width="200px" height="200px" src="assets/images/mug.jpg"> </div> </body> </html>
9.px和em的區別
px和em都是長度單位，區別是，px的值是固定的，指定是多少就是多少，計算比較容易。em的值不是固定的，並且em會繼承父級元素的字體大小。
瀏覽器的默認字體高度都是16px。所以未經調整的瀏覽器都符合：1em=16px。那麽12px=0.75em, 10px = 0.625em。
10.描述一個“reset”的css文件並如何使用它。知道normalize.css嗎？你了解他們的不同之處嗎?
重置樣式非常多，凡是一個前端開發人員肯定會有一個常用的重置css文件並知道如何使用它們。他們是盲目的在做還是知道為什麽這麽做呢？原因是不同的瀏覽器對一些元素有不同的的默認樣式，如果你不處理，在不同瀏覽器下回存在必要的風險，或者更有戲劇性發生。
你可能會用Normalize來代替你的重置樣式文件。它沒有重置所有的樣式風格，但僅提供一套合理的默認樣式值。既能夠讓眾多瀏覽器達到一致和合理，但不擾亂其他的東西（如粗體的標題）。
11.Sass、Less是什麽？大家為什麽要使用他們？
他們是CSS預處理器。他是CSS上的一種抽象層。它們是一種特殊的語法、語言編譯成CSS。
例如Less是一種動態樣式語言。將CSS賦予了動態語言的特性，如變量，繼承，運算，函數。Less即可以在客戶端上運行（支持IE6+,Webkit,Firefox），也可以在服務端運行（借助Node.js）。
Sass變量必須是$開始，[email protected]
為什麽要使用它們？
結構清晰，便於擴展。
可以方便地屏蔽瀏覽器私有語法差異。這個不用多說，封裝對瀏覽器語法差異的重復處理，減少無異議的機械勞動。
可以輕松實現多重繼承。
完全兼容CSS代碼，可以方便地應用到老項目中。Less只是在CSS語法上做了擴展，所以老的CSS代碼也可以與Less代碼一同編譯。
12.display:none和visiblity:hidden的區別是什麽？
display:隱藏對應元素但不擠占該元素原來的空間。
visiblity: 隱藏對應的元素並且擠占該元素原來的空間。
即是，使用CSS display:none屬性後，HTML元素（對象）的寬度、高度等各種屬性都將“丟失”；而使用visibility:hidden屬性後，HTML元素（對象）僅僅是在視覺上看不見（完全透明），而它所占據的空間位置任然存在。
13.知道css有個content屬性嗎？有什麽用？有什麽應用？
知道。CSS的content屬性專門應用在before/after偽元素上，用來插入生成內容。
最常見的應用是利用偽類清除浮動：
CSS Code復制內容到剪貼板 //一種常見利用偽類清除浮動的代碼 .clearfix:after { content:"."; //這裏利用到了content屬性 display:block; height:0; visibility:hidden; clear:both; } .clearfix { *zoom:1; }
after偽元素通過content在元素的後面生成一個點的塊級元素，再利用clear: both清除浮動。
14.盒子模型在不同瀏覽器上的區別
盒子模型是CSS中一個重要的概念，理解了盒子模型才能更好的排版。盒子模型有兩種，分別是IE盒子模型和標準W3C盒子模型。它們對盒子模型的解釋各不相同，先看看我們熟知的標準盒子模型：
從上圖可以看到標準的w3c盒子模型的範圍包括margin、border、padding、content，並且content部分不包含其他部分。
在來看下IE盒子模型：
從上圖可以看到IE盒子模型的範圍也包括margin、border、padding、content，和標準w3c盒子模型不同的是：ie盒子模型的content部分包含了border和padding。
例如：
一個盒子的margin為20px，border為1px，padding為10px，content的寬為200px、高為50px，加入用標準盒子模型解釋，那麽這個盒子需要占據的位置為：
寬：20*2 + 1 * 2 + 10* 2 + 200 = 262px, 高：20 * 2 + 1 * 2 + 10 * 2 + 50 = 112px。
盒子的實際大小為：寬1*2 + 10 * 2 + 200 = 222px,高1* 2 + 10 * 2 + 50 = 72px。
假如用IE盒子模型，那麽盒子需要占據的位置為：
寬：20 * 2 + 200 = 240px,高：20 * 2 + 50 = 70px。
盒子的實際大小：寬200px,高50px。
一般推薦使用W3C盒子模型，怎樣才算是選擇了標準W3C盒子模型呢？就是在網頁上加DOCKTYPE申明。如果不加，那麽各個瀏覽器會根據自己的行為去理解網頁。
CSS3增加了box-sizing屬性，值包括content-box|border-box|inherit。
在我們的重置樣式文件中一般也會重置這個屬性，把box-sizing設置成border-box方便於排版。
CSS面試題