前端面試問題css匯總

標籤：服務   樣式   結構   特性   資源下載   二分   padding   border   ide   

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匯總