實用干貨:BAT前端面試題之CSS篇
來源：
奇酷教育 發表于：
1 有哪項方式可以對一個DOM設置它的CSS樣式？ 外部樣式表，引入一個外部css文件內部樣式表，將css代碼放在 <head> 標簽內部內聯樣式，將
1.有哪項方式可以對一個DOM設置它的CSS樣式？
外部樣式表，引入一個外部css文件
內部樣式表，將css代碼放在 <head> 標簽內部
內聯樣式，將css樣式直接定義在 HTML 元素內部
2.CSS都有哪些選擇器？
派生選擇器（用HTML標簽申明）
id選擇器（用DOM的ID申明）
類選擇器（用一個樣式類名申明）
屬性選擇器（用DOM的屬性申明，屬于CSS2，IE6不支持，不常用，不知道就算了）
除了前3種基本選擇器，還有一些擴展選擇器，包括
后代選擇器（利用空格間隔，比如div .a{ }）
群組選擇器（利用逗號間隔，比如p,div,#a{ }）
那么問題來了，CSS選擇器的優先級是怎么樣定義的？
基本原則：
一般而言，選擇器越特殊，它的優先級越高。也就是選擇器指向的越準確，它的優先級就越高。
復雜的計算方法：
用1表示派生選擇器的優先級
用10表示類選擇器的優先級
用100標示ID選擇器的優先級
div.test1 .span var 優先級 1+10 +10 +1
span#xxx .songs li 優先級1+100 + 10 + 1
#xxx li 優先級 100 +1
那么問題來了，看下列代碼，<p>標簽內的文字是什么顏色的？。
1 <style>
2 .classA{ color:blue;}
3
4 .classB{ color:red;}
5 </style>
6
7 <body>
8
9 <p class='classB classA'> 123 </p>
10
11 </body>
答案：red。與樣式定義在文件中的先后順序有關，即是后面的覆蓋前面的，與在<p class=’classB classA’>中的先后關系無關。
3.CSS中可以通過哪些屬性定義，使得一個DOM元素不顯示在瀏覽器可視范圍內？
最基本的：
設置display屬性為none，或者設置visibility屬性為hidden
技巧性：
設置寬高為0，設置透明度為0，設置z-index位置在-1000
4.超鏈接訪問過后hover樣式就不出現的問題是什么？如何解決？
答案：被點擊訪問過的超鏈接樣式不在具有hover和active了,解決方法是改變CSS屬性的排列順序: L-V-H-A（link,visited,hover,active）
5.什么是Css Hack？ie6,7,8的hack分別是什么？
答案：針對不同的瀏覽器寫不同的CSS code的過程，就是CSS hack。
示例如下：
1 #test {
2 width:300px;
3 height:300px;
4
5 background-color:blue; /*firefox*/
6 background-color:red\9; /*all ie*/
7 background-color:yellow\0; /*ie8*/
8 +background-color:pink; /*ie7*/
9 _background-color:orange; /*ie6*/ }
10 :root #test { background-color:purple\9; } /*ie9*/
11 @media all and (min-width:0px){ #test {background-color:black\0;} } /*opera*/
12 @media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} } /*chrome and safari*/
6.請用Css寫一個簡單的幻燈片效果頁面
答案：知道是要用css3。使用animation動畫實現一個簡單的幻燈片效果。
1 /**HTML**/
2 div.ani
3
4 /**css**/
5 .ani{
6 width:480px;
7 height:320px;
8 margin:50px auto;
9 overflow: hidden;
10 box-shadow:0 0 5px rgba(0,0,0,1);
11 background-size: cover;
12 background-position: center;
13 -webkit-animation-name: "loops";
14 -webkit-animation-duration: 20s;
15 -webkit-animation-iteration-count: infinite;
16 }
17 @-webkit-keyframes "loops" {
18 0% {
19 background:url(http://d.hiphotos.baidu.com/image/w%3D400/sign=c01e6adca964034f0fcdc3069fc27980/e824b899a9014c08e5e38ca4087b02087af4f4d3.jpg) no-repeat;
20 }
21 25% {
22 background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=edee1572e9f81a4c2632edc9e72b6029/30adcbef76094b364d72bceba1cc7cd98c109dd0.jpg) no-repeat;
23 }
24 50% {
25 background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=937dace2552c11dfded1be2353266255/d8f9d72a6059252d258e7605369b033b5bb5b912.jpg) no-repeat;
26 }
27 75% {
28 background:url(http://g.hiphotos.baidu.com/image/w%3D400/sign=7d37500b8544ebf86d71653fe9f9d736/0df431adcbef76095d61f0972cdda3cc7cd99e4b.jpg) no-repeat;
29 }
30 100% {
31 background:url(http://c.hiphotos.baidu.com/image/w%3D400/sign=cfb239ceb0fb43161a1f7b7a10a54642/3b87e950352ac65ce2e73f76f9f2b21192138ad1.jpg) no-repeat;
32 }
33 }
7.行內元素和塊級元素的具體區別是什么？行內元素的padding和margin可設置嗎？
塊級元素(block)特性：
總是獨占一行，表現為另起一行開始，而且其后的元素也必須另起一行顯示;
寬度(width)、高度(height)、內邊距(padding)和外邊距(margin)都可控制;
內聯元素(inline)特性：
和相鄰的內聯元素在同一行;
寬度(width)、高度(height)、內邊距的top/bottom(padding-top/padding-bottom)和外邊距的top/bottom(margin-top/margin-bottom)都不可改變（也就是padding和margin的left和right是可以設置的），就是里面文字或圖片的大小。
那么問題來了，瀏覽器還有默認的天生inline-block元素（擁有內在尺寸，可設置高寬，但不會自動換行），有哪些？
答案：<input> 、<img> 、<button> 、<texterea> 、<label>。
8.什么是外邊距重疊？重疊的結果是什么？
答案：
外邊距重疊就是margin-collapse。
在CSS當中，相鄰的兩個盒子（可能是兄弟關系也可能是祖先關系）的外邊距可以結合成一個單獨的外邊距。這種合并外邊距的方式被稱為折疊，并且因而所結合成的外邊距稱為折疊外邊距。
折疊結果遵循下列計算規則：
兩個相鄰的外邊距都是正數時，折疊結果是它們兩者之間較大的值。
兩個相鄰的外邊距都是負數時，折疊結果是兩者絕對值的較大值。
兩個外邊距一正一負時，折疊結果是兩者的相加的和。
9.rgba()和opacity的透明效果有什么不同？
答案：
rgba()和opacity都能實現透明效果，但最大的不同是opacity作用于元素，以及元素內的所有內容的透明度，
而rgba()只作用于元素的顏色或其背景色。（設置rgba透明的元素的子元素不會繼承透明效果！）
10.css中可以讓文字在垂直和水平方向上重疊的兩個屬性是什么？
答案：
垂直方向：line-height
水平方向：letter-spacing
那么問題來了，關于letter-spacing的妙用知道有哪些么？
答案:可以用于消除inline-block元素間的換行符空格間隙問題。
11.如何垂直居中一個浮動元素？
1 // 方法一：已知元素的高寬
2
3 #div1{
4 background-color:#6699FF;
5 width:200px;
6 height:200px;
7
8 position: absolute; //父元素需要相對定位
9 top: 50%;
10 left: 50%;
11 margin-top:-100px ; //二分之一的height，width
12 margin-left: -100px;
13 }
14
15 //方法二:未知元素的高寬
16
17 #div1{
18 width: 200px;
19 height: 200px;
20 background-color: #6699FF;
21
22 margin:auto;
23 position: absolute; //父元素需要相對定位
24 left: 0;
25 top: 0;
26 right: 0;
27 bottom: 0;
28 }
那么問題來了，如何垂直居中一個<img>?（用更簡便的方法。）
1 #container //<img>的容器設置如下
2 {
3 display:table-cell;
4 text-align:center;
5 vertical-align:middle;
6 }
12.px和em的區別。
px和em都是長度單位，區別是，px的值是固定的，指定是多少就是多少，計算比較容易。em得值不是固定的，并且em會繼承父級元素的字體大小。
瀏覽器的默認字體高都是16px。所以未經調整的瀏覽器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。
13.描述一個”reset”的CSS文件并如何使用它。知道normalize.css嗎？你了解他們的不同之處？
重置樣式非常多，凡是一個前端開發人員肯定有一個常用的重置CSS文件并知道如何使用它們。他們是盲目的在做還是知道為什么這么做呢？原因是不同的瀏覽器對一些元素有不同的默認樣式，如果你不處理，在不同的瀏覽器下會存在必要的風險，或者更有戲劇性的性發生。
你可能會用Normalize來代替你的重置樣式文件。它沒有重置所有的樣式風格，但僅提供了一套合理的默認樣式值。既能讓眾多瀏覽器達到一致和合理，但又不擾亂其他的東西（如粗體的標題）。
在這一方面，無法做每一個復位重置。它也確實有些超過一個重置，它處理了你永遠都不用考慮的怪癖，像HTML的audio元素不一致或line-height不一致。
14.Sass、LESS是什么？大家為什么要使用他們？
他們是CSS預處理器。他是CSS上的一種抽象層。他們是一種特殊的語法/語言編譯成CSS。
例如Less是一種動態樣式語言. 將CSS賦予了動態語言的特性，如變量，繼承，運算， 函數. LESS 既可以在客戶端上運行 (支持IE 6+, Webkit, Firefox)，也可一在服務端運行 (借助 Node.js)。
為什么要使用它們？
結構清晰，便于擴展。
可以方便地屏蔽瀏覽器私有語法差異。這個不用多說，封裝對瀏覽器語法差異的重復處理，減少無意義的機械勞動。
可以輕松實現多重繼承。
完全兼容 CSS 代碼，可以方便地應用到老項目中。LESS 只是在 CSS 語法上做了擴展，所以老的 CSS 代碼也可以與 LESS 代碼一同編譯。
15.display:none與visibility:hidden的區別是什么？
display : 隱藏對應的元素但不擠占該元素原來的空間。
visibility: 隱藏對應的元素并且擠占該元素原來的空間。
即是，使用CSS display:none屬性后，HTML元素（對象）的寬度、高度等各種屬性值都將“丟失”;而使用visibility:hidden屬性后，HTML元素（對象）僅僅是在視覺上看不見（完全透明），而它所占據的空間位置仍然存在。
16.知道css有個content屬性嗎？有什么作用？有什么應用？
答案：知道。css的content屬性專門應用在 before/after 偽元素上，用于來插入生成內容。
最常見的應用是利用偽類清除浮動。
1 //一種常見利用偽類清除浮動的代碼
2 .clearfix:after {
3 content:"."; //這里利用到了content屬性
4 display:block;
5 height:0;
6 visibility:hidden;
7 clear:both; }
8
9 .clearfix {
10 *zoom:1;
11 }
after偽元素通過 content 在元素的后面生成了內容為一個點的塊級元素，再利用clear:both清除浮動。
那么問題繼續還有，知道css計數器（序列數字字符自動遞增）嗎？如何通過css content屬性實現css計數器？
答案：css計數器是通過設置counter-reset 、counter-increment 兩個屬性 、及 counter()/counters()一個方法配合after / before 偽類實現。
