前端面試問題css匯總
1，行內元素有哪些?塊級元素有哪些?空元素有哪些？CSS的盒模型?
塊級元素：div p h1 h2 h3 h4 form ul li
行內元素: a b br i span input select
空元素：即沒有內容的HTML元素，例如：br、meta、hr、link、input、img
css盒模型:content，padding，border ,margin（盒模型順序）
行內元素的margin padding是無效的，需要display:inline
用display:inline-block 強制將塊級元素轉為行內元素。註意有3px間距。letter-spacing可以消除這個間距
2，描述css reset的作用和用途。
reset重置瀏覽器的css默認屬性 瀏覽器的品種不同，樣式不同，然後重置，讓他們統一。
3，如何減輕服務器對圖片請求的壓力
使用雪碧圖，減少服務器請求圖片的數量
4，CSS實現垂直水平居中
HTML結構：
<div class="wrapper">
<div class="content"></div>
</div> CSS：
.wrapper {
position: relative;
width: 500px;
height: 500px;
background-color: #ddd;
}
.content{
background-color:#6699FF;
width:200px;
height:200px;
position: absolute; //父元素需要相對定位
top: 50%;
left: 50%;
margin-top:-100px ; //二分之一的height，width
margin-left: -100px;
}
5，簡述一下src與href的區別
href 是指向網絡資源所在位置，建立和當前元素（錨點）或當前文檔（鏈接）之間的鏈接，用於超鏈接。
src是指向外部資源的位置，指向的內容將會嵌入到文檔中當前標簽所在位置；在請求src資源時會將其指向的資源下載並應用到文檔內，例如js腳本，img圖片和frame等元素。當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源加載、編譯、執行完畢，圖片和框架等元素也如此，類似於將所指向資源嵌入當前標簽內。這也是為什麽將js腳本放在底部而不是頭部。
6、什麽是css hack ？css hack解決的問題？
CSS hack是通過在CSS樣式中加入一些特殊的符號，讓不同的瀏覽器識別不同的符號（什麽樣的瀏覽器識別什麽樣的符號是有標準的，CSS hack就是讓你記住這個標準），以達到應用不同的CSS樣式的目的
CSS hack用來解決有些css屬性在不同瀏覽器中顯示的效果不一樣的問題（參考文檔：http://www.kwstu.com/Admin/ViewArticle/201409011604277330）
不同瀏覽器的內核：IE瀏覽器的內核Trident、 Mozilla的Gecko、google的WebKit、Opera內核Presto，Firefox：gecko內核；
7、px和em的區別
px和em都是長度單位，區別是，px的值是固定的，指定是多少就是多少，計算比較容易。em得值不是固定的，並且em會繼承父級元素的字體大小。
瀏覽器的默認字體高都是16px。所以未經調整的瀏覽器都符合: 1em=16px。那麽12px=0.75em, 10px=0.625em
8，有哪些方式可以對一個DOM設置它的CSS樣式？
外部樣式表，引入一個外部css文件
內部樣式表，將css代碼放在標簽內部
內聯樣式，將css樣式直接定義在 HTML 元素內部
9、CSS都有哪些選擇器？ 派生選擇器（用HTML標簽申明）
id選擇器（用DOM的ID申明）
類選擇器（用一個樣式類名申明）
屬性選擇器（用DOM的屬性申明，屬於CSS2，IE6不支持，不常用，不知道就算了）
除了前3種基本選擇器，還有一些擴展選擇器，包括
後代選擇器（利用空格間隔，比如div .a{ }）
群組選擇器（利用逗號間隔，比如p,div,#a{ }）
選擇器越特殊，選擇指向越準確，優先級越高。
css 奇數、偶數選擇器。奇數：p:nth-child(odd)；偶數：p:nth-child(even)
10，rgba()和opacity的透明效果有什麽不同？
rgba()和opacity都能實現透明效果，但最大的不同是opacity作用於元素，以及元素內的所有內容的透明度，
而rgba()只作用於元素的顏色或其背景色。（設置rgba透明的元素的子元素不會繼承透明效果！）
11，Sass、LESS是什麽？大家為什麽要使用他們？
他們是CSS預處理器。他是CSS上的一種抽象層。他們是一種特殊的語法/語言編譯成CSS。
例如Less是一種動態樣式語言. 將CSS賦予了動態語言的特性，如變量，繼承，運算， 函數. LESS 既可以在客戶端上運行 (支持IE 6+, Webkit, Firefox)，也可一在服務端運行 (借助 Node.js)。
為什麽要使用它們？
結構清晰，便於擴展。
可以方便地屏蔽瀏覽器私有語法差異。這個不用多說，封裝對瀏覽器語法差異的重復處理，減少無意義的機械勞動。
可以輕松實現多重繼承。
完全兼容 CSS 代碼，可以方便地應用到老項目中。LESS 只是在 CSS 語法上做了擴展，所以老的 CSS 代碼也可以與 LESS 代碼一同編譯。
12、什麽是外邊距重疊？重疊的結果是什麽？
答案：
外邊距重疊就是margin-collapse。
在CSS當中，相鄰的兩個盒子（可能是兄弟關系也可能是祖先關系）的外邊距可以結合成一個單獨的外邊距。這種合並外邊距的方式被稱為折疊，並且因而所結合成的外邊距稱為折疊外邊距。
折疊結果遵循下列計算規則：
1. 兩個相鄰的外邊距都是正數時，折疊結果是它們兩者之間較大的值。
2. 兩個相鄰的外邊距都是負數時，折疊結果是兩者絕對值的較大值。
3. 兩個外邊距一正一負時，折疊結果是兩者的相加的和。
前端面試問題css匯總