實用干貨:BAT前端面試題之CSS篇
來源：
奇酷教育 發(fā)表于：
1 有哪項方式可以對一個DOM設(shè)置它的CSS樣式？ 外部樣式表，引入一個外部css文件內(nèi)部樣式表，將css代碼放在 <head> 標簽內(nèi)部內(nèi)聯(lián)樣式，將
1.有哪項方式可以對一個DOM設(shè)置它的CSS樣式？
外部樣式表，引入一個外部css文件
內(nèi)部樣式表，將css代碼放在 <head> 標簽內(nèi)部
內(nèi)聯(lián)樣式，將css樣式直接定義在 HTML 元素內(nèi)部
2.CSS都有哪些選擇器？
派生選擇器（用HTML標簽申明）
id選擇器（用DOM的ID申明）
類選擇器（用一個樣式類名申明）
屬性選擇器（用DOM的屬性申明，屬于CSS2，IE6不支持，不常用，不知道就算了）
除了前3種基本選擇器，還有一些擴展選擇器，包括
后代選擇器（利用空格間隔，比如div .a{ }）
群組選擇器（利用逗號間隔，比如p,div,#a{ }）
那么問題來了，CSS選擇器的優(yōu)先級是怎么樣定義的？
基本原則：
一般而言，選擇器越特殊，它的優(yōu)先級越高。也就是選擇器指向的越準確，它的優(yōu)先級就越高。
復雜的計算方法：
用1表示派生選擇器的優(yōu)先級
用10表示類選擇器的優(yōu)先級
用100標示ID選擇器的優(yōu)先級
div.test1 .span var 優(yōu)先級 1+10 +10 +1
span#xxx .songs li 優(yōu)先級1+100 + 10 + 1
#xxx li 優(yōu)先級 100 +1
那么問題來了，看下列代碼，<p>標簽內(nèi)的文字是什么顏色的？。
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。與樣式定義在文件中的先后順序有關(guān)，即是后面的覆蓋前面的，與在<p class=’classB classA’>中的先后關(guān)系無關(guān)。
3.CSS中可以通過哪些屬性定義，使得一個DOM元素不顯示在瀏覽器可視范圍內(nèi)？
最基本的：
設(shè)置display屬性為none，或者設(shè)置visibility屬性為hidden
技巧性：
設(shè)置寬高為0，設(shè)置透明度為0，設(shè)置z-index位置在-1000
4.超鏈接訪問過后hover樣式就不出現(xiàn)的問題是什么？如何解決？
答案：被點擊訪問過的超鏈接樣式不在具有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動畫實現(xiàn)一個簡單的幻燈片效果。
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.行內(nèi)元素和塊級元素的具體區(qū)別是什么？行內(nèi)元素的padding和margin可設(shè)置嗎？
塊級元素(block)特性：
總是獨占一行，表現(xiàn)為另起一行開始，而且其后的元素也必須另起一行顯示;
寬度(width)、高度(height)、內(nèi)邊距(padding)和外邊距(margin)都可控制;
內(nèi)聯(lián)元素(inline)特性：
和相鄰的內(nèi)聯(lián)元素在同一行;
寬度(width)、高度(height)、內(nèi)邊距的top/bottom(padding-top/padding-bottom)和外邊距的top/bottom(margin-top/margin-bottom)都不可改變（也就是padding和margin的left和right是可以設(shè)置的），就是里面文字或圖片的大小。
那么問題來了，瀏覽器還有默認的天生inline-block元素（擁有內(nèi)在尺寸，可設(shè)置高寬，但不會自動換行），有哪些？
答案：<input> 、<img> 、<button> 、<texterea> 、<label>。
8.什么是外邊距重疊？重疊的結(jié)果是什么？
答案：
外邊距重疊就是margin-collapse。
在CSS當中，相鄰的兩個盒子（可能是兄弟關(guān)系也可能是祖先關(guān)系）的外邊距可以結(jié)合成一個單獨的外邊距。這種合并外邊距的方式被稱為折疊，并且因而所結(jié)合成的外邊距稱為折疊外邊距。
折疊結(jié)果遵循下列計算規(guī)則：
兩個相鄰的外邊距都是正數(shù)時，折疊結(jié)果是它們兩者之間較大的值。
兩個相鄰的外邊距都是負數(shù)時，折疊結(jié)果是兩者絕對值的較大值。
兩個外邊距一正一負時，折疊結(jié)果是兩者的相加的和。
9.rgba()和opacity的透明效果有什么不同？
答案：
rgba()和opacity都能實現(xiàn)透明效果，但最大的不同是opacity作用于元素，以及元素內(nèi)的所有內(nèi)容的透明度，
而rgba()只作用于元素的顏色或其背景色。（設(shè)置rgba透明的元素的子元素不會繼承透明效果！）
10.css中可以讓文字在垂直和水平方向上重疊的兩個屬性是什么？
答案：
垂直方向：line-height
水平方向：letter-spacing
那么問題來了，關(guān)于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>的容器設(shè)置如下
2 {
3 display:table-cell;
4 text-align:center;
5 vertical-align:middle;
6 }
12.px和em的區(qū)別。
px和em都是長度單位，區(qū)別是，px的值是固定的，指定是多少就是多少，計算比較容易。em得值不是固定的，并且em會繼承父級元素的字體大小。
瀏覽器的默認字體高都是16px。所以未經(jīng)調(diào)整的瀏覽器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。
13.描述一個”reset”的CSS文件并如何使用它。知道normalize.css嗎？你了解他們的不同之處？
重置樣式非常多，凡是一個前端開發(fā)人員肯定有一個常用的重置CSS文件并知道如何使用它們。他們是盲目的在做還是知道為什么這么做呢？原因是不同的瀏覽器對一些元素有不同的默認樣式，如果你不處理，在不同的瀏覽器下會存在必要的風險，或者更有戲劇性的性發(fā)生。
你可能會用Normalize來代替你的重置樣式文件。它沒有重置所有的樣式風格，但僅提供了一套合理的默認樣式值。既能讓眾多瀏覽器達到一致和合理，但又不擾亂其他的東西（如粗體的標題）。
在這一方面，無法做每一個復位重置。它也確實有些超過一個重置，它處理了你永遠都不用考慮的怪癖，像HTML的audio元素不一致或line-height不一致。
14.Sass、LESS是什么？大家為什么要使用他們？
他們是CSS預處理器。他是CSS上的一種抽象層。他們是一種特殊的語法/語言編譯成CSS。
例如Less是一種動態(tài)樣式語言. 將CSS賦予了動態(tài)語言的特性，如變量，繼承，運算， 函數(shù). LESS 既可以在客戶端上運行 (支持IE 6+, Webkit, Firefox)，也可一在服務(wù)端運行 (借助 Node.js)。
為什么要使用它們？
結(jié)構(gòu)清晰，便于擴展。
可以方便地屏蔽瀏覽器私有語法差異。這個不用多說，封裝對瀏覽器語法差異的重復處理，減少無意義的機械勞動。
可以輕松實現(xiàn)多重繼承。
完全兼容 CSS 代碼，可以方便地應(yīng)用到老項目中。LESS 只是在 CSS 語法上做了擴展，所以老的 CSS 代碼也可以與 LESS 代碼一同編譯。
15.display:none與visibility:hidden的區(qū)別是什么？
display : 隱藏對應(yīng)的元素但不擠占該元素原來的空間。
visibility: 隱藏對應(yīng)的元素并且擠占該元素原來的空間。
即是，使用CSS display:none屬性后，HTML元素（對象）的寬度、高度等各種屬性值都將“丟失”;而使用visibility:hidden屬性后，HTML元素（對象）僅僅是在視覺上看不見（完全透明），而它所占據(jù)的空間位置仍然存在。
16.知道css有個content屬性嗎？有什么作用？有什么應(yīng)用？
答案：知道。css的content屬性專門應(yīng)用在 before/after 偽元素上，用于來插入生成內(nèi)容。
最常見的應(yīng)用是利用偽類清除浮動。
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 在元素的后面生成了內(nèi)容為一個點的塊級元素，再利用clear:both清除浮動。
那么問題繼續(xù)還有，知道css計數(shù)器（序列數(shù)字字符自動遞增）嗎？如何通過css content屬性實現(xiàn)css計數(shù)器？
答案：css計數(shù)器是通過設(shè)置counter-reset 、counter-increment 兩個屬性 、及 counter()/counters()一個方法配合after / before 偽類實現(xiàn)。
