1、CSS選擇器的優先級
!important > 內聯 > id選擇器 > 類選擇器 > 標籤選擇器
多個類選擇器疊加（256）之後的優先級大於一個id選擇器
!important 用於強調CSS屬性具有最高的優先級。IE6不支持這種用法。
CSS選擇器的種類：
1.id選擇器(# myid)
2.類選擇器(.myclassname)
3.標籤選擇器(div, h1, p)
4.相鄰選擇器(h1 + p)
5.子選擇器(ul > li)
6.後代選擇器(li a)
7.通配符選擇器( * )
8.屬性選擇器(a[rel = "external"])
9.僞類選擇器(a: hover, li:nth-child)
2、CSS優先級權重計算法
CSS優先級的計算規則如下：
元素標籤中定義的樣式（Style屬性）,加1,0,0,0
每個ID選擇符(如 #id),加0,1,0,0
每個Class選擇符、每個屬性選擇符、每個僞類（:hover）加0,0,1,0
每個元素選擇符（如p）或僞元素選擇符(如 :firstchild)等，加0,0,0,1
然後，將這四個數字分別累加，就得到每個CSS定義的優先級的值
然後從左到右逐位比較大小，數字大的CSS樣式的優先級就高。
3、超鏈接訪問過後hover樣式就不出現的問題是什麼？如何解決？
被點擊訪問過的超鏈接樣式不在具有hover和active了,解決方法是改變CSS屬性的排列順序: L-V-H-A（link,visited,hover,active）
4、什麼是Css Hack？ie6,7,8的hack分別是什麼？
針對不同的瀏覽器寫不同的CSS code的過程，就是CSS hack。
#test {
width:300px;
height:300px;
background-color:blue; /*firefox*/
background-color:red\9; /*all ie*/
background-color:yellow\0; /*ie8*/
+background-color:pink; /*ie7*/
_background-color:orange; /*ie6*/ }
:root #test { background-color: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*/
5、描述一個"reset"的CSS文件並如何使用它。知道normalize.css嗎？你瞭解他們的不同之處？
不同的瀏覽器對一些元素有不同的默認樣式，如果你不處理，在不同的瀏覽器下會存在必要的風險，或者更有戲劇性的性發生。
你可能會用Normalize來代替你的重置樣式文件。它沒有重置所有的樣式風格，但僅提供了一套合理的默認樣式值。既能讓衆多瀏覽器達到一致和合理，但又不擾亂其他的東西（如粗體的標題）。
6、display:none與visibility:hidden的區別是什麼？
display : 隱藏對應的元素但不擠佔該元素原來的空間。
visibility: 隱藏對應的元素並且擠佔該元素原來的空間。
即是，使用CSS display:none屬性後，HTML元素（對象）的寬度、高度等各種屬性值都將“丟失”;而使用visibility:hidden屬性後，HTML元素（對象）僅僅是在視覺上看不見（完全透明），而它所佔據的空間位置仍然存在。
7、CSS盒子模型
Box Model規定了元素框處理元素內容（element content）、內邊距（padding）、邊框（border） 和 外邊距（margin） 的方式。盒子模型有 block,inline-block,inline,flex,table-cell等幾種顯示方式。
如圖所示，元素的高度和寬度指的是盒子模型的content區域的高度和寬度，不包括內邊距以外的部分。(IE的content則是包含border、內邊距和content)。盒子模型有兩種，W3C標準盒子模型（content-box）以及IE盒子模型（border-box）。
給大家推薦一個技術交流學習圈，裏面概括移動應用網站開發，css，html，webpack，vue node angular以及面試資源等。獲取資料
對web開發技術感興趣的同學，可以加入交流圈👉👉👉1007317281，不管你是小白還是大牛都歡迎，還有大牛整理的一套高效率學習路線和教程與您免費分享，同時每天更新視頻資料。
8、相對定位relative、浮動float以及絕對定位absolute的區別？
1）相對定位是在常規流中的定位。一旦一個框按照常規流或者是浮動得到定位，它還可以相對該位置而偏移， 這就是相對定位。偏移後，在常規流中依然佔據原有位置，偏移量並不會對後續的block產生擠佔，後續的塊就好像沒有感知到偏移，依然按照常規流位置排位。
2）絕對定位（Absolute positioning）元素定位的參照物是其包含塊（第一個relative定位的祖先元素）進行定位，不一定是其父元素。絕對定位元素完全脫離了常規流，每個絕對定位的框都可以看做一個單獨的圖層，不會對其他層框的定位產生影響。絕對元素定位的 top 和 left 值跟絕對元素未脫離常規流之前在常規流中位置有關。
3）浮動框就是一個框在當前行被向左或向右挪動(偏移)，它不在常規流中。在該浮動框之前或之後創建的非定位框垂直排列，就好象浮動框並不存在一樣。當前行裏浮動框前的任何內容，都將被重新排列到該浮動另一側的第一個可用行裏。
9、清除浮動的用法？
在非IE瀏覽器（如Firefox）下，當容器的高度爲auto，且容器的內容中有浮動（float爲left或right）的元素，在這種情況下，容器的高度不能自動伸長以適應內容的高度，使得內容溢出到容器外面而影響（甚至破壞）佈局的現象。這個現象叫浮動溢出，爲了防止這個現象的出現而進行的CSS處理，就叫CSS清除浮動。
使用方法：
1、在浮動元素後使用一個空元素如<div class="clear"></div>，並在CSS中賦予.clear{clear:both;}屬性即可清理浮動。
2、給浮動元素的容器添加overflow:hidden;或overflow:auto;可以清除浮動
3、什麼都不做，給浮動元素後面的元素添加clear屬性。
4、利用僞類清除浮動，給浮動元素的容器添加一個clearfix的class，然 後給這個class添加一個:after僞
元素實現元素末尾添加一個看不見的塊元素（Block element）清理浮動。
//一種常見利用僞類清除浮動的代碼
.clearfix:after {
content:"."; //這裏利用到了content屬性
display:block;
height:0;
visibility:hidden;
clear:both;
} //歡迎加入前端全棧開發交流圈一起學習交流：1007317281
.clearfix {
*zoom:1;
}
10、BOX模型的margin在IE比在其他瀏覽器大2px的解決辦法
div{margin:30px!important;margin:28px;}
注意這兩個margin的順序一定不能寫反，據阿捷的說法!important這個 屬性IE不能識別，
但別的瀏覽器可以識別。所以在IE下其實解釋成這樣：
div{maring:30px;margin:28px}
重複定義的話按照最後一個來執行，所以不可以只寫
margin:XXpx!important;
也可以這樣子hack
div { _margin:28px;margin:28px\9;margin:30px;}
11、IE 3像素Bug的產生原因及解決辦法
當在同一行相鄰出現一個浮動的塊元素和一個非浮動的塊元素時，兩塊元素之間就會出現3px的裂痕。
解決辦法就是：對其中一個元素添加“_margin-*:-3px”的CSS屬性，或者將另外一個非浮動的元素設爲浮動。
12、IE6 雙邊距Bug的產生原因及解決辦法
當我們在浮動元素上面添加margin-*的屬性的時候，比如在float:left的元素CSS添加margin-left:50px，那麼最終在IE6下面的顯示就是該元素的margin-left最終變爲100px，邊距翻倍。
解決辦法：添加_display:inline
13、FOUC - Flash Of Unstyled Content 文檔樣式閃爍
<style type="text/css" media="all">@import "../fouc.css";</style>
而引用CSS文件的@import就是造成這個問題的罪魁禍首。IE會先加載整個HTML文檔的DOM，然後再去導入外部的CSS文件，因此，在頁面DOM加載完成到CSS導入完成中間會有一段時間頁面上的內容是沒有樣式的，這段時間的長短跟網速，電腦速度都有關係。
解決方法簡單的出奇，只要在<head>之間加入一個<link>或者<script>元素就可以了。
14、文本溢出省略的處理方法
1)單行文本溢出
.inline{
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
} //歡迎加入前端全棧開發交流圈一起學習交流：1007317281
2)多行文本溢出
.foo{
display:-webkit-box!important;
overflow:hidden;
text-overflow:ellipsis;
work-break:break-all;
-webkit-box-orient:vertical; /*方向*/
-webkit-line-clamp:4; /*顯示多少行文本*/
}
15、CSS實現垂直水平居中
方法1：
.parent {
width:800px;
height:500px;
border:2px solid #000;
position:relative;
} //歡迎加入前端全棧開發交流圈一起學習交流：1007317281
.child {
width:200px;
height:200px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background-color: red;
}
方法2：
.parent {
width:800px;
height:500px;
border:2px solid #000;
display:table-cell;
vertical-align:middle;
text-align: center;
} //歡迎加入前端全棧開發交流圈一起學習交流：1007317281
.child {
width:200px;
height:200px;
display:inline-block;
background-color: red;
}
方法3：
.parent {
width:800px;
height:500px;
border:2px solid #000;
display:flex;
justify-content:center;
align-items:center;
}
.child {
width:200px;
height:200px;
background-color: red;
}
方法4：
.parent {
width:800px;
height:500px;
border:2px solid #000;
position:relative;
} //歡迎加入前端全棧開發交流圈一起學習交流：1007317281
.child {
width:300px;
height:200px;
margin:auto;
position:absolute;
/*設定水平和垂直偏移父元素的50%，
再根據實際長度將子元素上左挪回一半大小*/
left:50%;
top:50%;
margin-left: -150px;
margin-top:-100px;
background-color: red;
}
16、BFC
塊格式上下文是頁面CSS 視覺渲染的一部分，用於決定塊盒子的佈局及浮動相互影響範圍的一個區域。
BFC的創建方法：
根元素或其它包含它的元素；
浮動 (元素的float不爲none)；
絕對定位元素 (元素的position爲absolute或fixed)；
行內塊inline-blocks(元素的 display: inline-block)；
表格單元格(元素的display: table-cell，HTML表格單元格默認屬性)；
overflow的值不爲visible的元素；
彈性盒 flex boxes (元素的display: flex或inline-flex)；
17、響應式圖片的CSS
所謂響應式圖片，就是根據圖片所在容器的大小來實時地按比例縮放。實現的辦法非常簡單，只需要設置img標籤的width:100%即可。
img {
width:100%;
}
如果 max-width 屬性設置爲 100%, 圖片永遠不會大於其原始大小：
img {
max-width: 100%;
}
18、CSS響應式網格系統原理
總的來說，網格系統就是利用百分比把視口等分爲12個，然後利用float屬性使之並列顯示。
* {
box-sizing: border-box;
}
[class*="col-"] {
float: left;
padding: 15px;
border: 1px solid red;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
19、用LESS循環實現柵格類
.generate-columns(12);
.generate-columns(@n; @i: 1) when (@i =< @n) {
.column-@{i} {
width: (@i * 100% / @n);
} //歡迎加入前端全棧開發交流圈一起學習交流：1007317281
.generate-columns(@n, (@i + 1));
}
20、使用perspective屬性和transform：perspective()函數的區別
以上的兩種書寫格式都會生成一個3D立體效果，但是它們之間有一些區別。使用功能函數的方式可以很方便的在單個元素上應用3D transform，但是當在多個元素上使用時，轉換的元素不會得到預期的效果。如果你爲不同的元素使用相同的transform，每一個元素都會有自己的消失點。爲了解決這個問題，可以在父元素上使用perspective屬性，這樣，所有的子元素都可以共享同一個3D空間。
perspective-origin: 25% 75%，等價於perspective-origin x和perspective-origin y的合體，用來設置鏡頭聚焦點的位置(舞臺中心)
transform-style: preserve-3d,transform-style屬性也是3D效果中經常使用的，其兩個參數，
flat|preserve-3d. 前者flat爲默認值，表示平面的；後者preserve-3d表示3D透視。
backface-visibility：hidden|visibility設置背後元素是否可見
給大家推薦一個技術交流學習圈，裏面概括移動應用網站開發，css，html，webpack，vue node angular以及面試資源等。獲取資料
對web開發技術感興趣的同學，可以加入交流圈👉👉👉1007317281，不管你是小白還是大牛都歡迎，還有大牛整理的一套高效率學習路線和教程與您免費分享，同時每天更新視頻資料。