1、使元素消失的方法
a：opacity:0 ，該元素隱藏起來，不會改變頁面佈局，並且，如果該元素已經綁定了一些事件也是可以觸發的
b：visibility:hidden，該元素隱藏起來，不改變頁面佈局，但不會觸發已經綁定的事件；
c：display：none，把元素隱藏起來，改變頁面佈局，可以理解爲在頁面中吧該元素刪掉；
d：z-index：-1，延z軸把元素隱藏在body下面。
2、margin和padding分別適合什麼場景使用
margin：需要在border外側添加空白，空白處不需要背景色；
padding：需要在border內側添加空白，空白處不需要背景色。
3、display的值，說明它們的作用。
block：像塊狀元素一樣顯示，此元素前後會帶有換行符；
none：像行內樣式一樣顯示；
inline：默認，此元素會被現實爲內聯元素，元素前後沒有換行符；
inline-block：像行內樣式一樣顯示，但其內容像塊狀類型元素一樣顯示；
list-item：像塊類型元素一樣顯示，並添加樣式列表標記；
relative和absolute定位原點：
table：此元素回座位塊級表格顯示，表格前後帶有換行符；
absolute：生成絕對定位的元素，相對於static定位以外的第一個父元素進行定位；
relative：生成相對定位的元素，相對於其正常位置進行定位。
4、position跟display、overflow、float這些特性相互疊加後會怎麼樣？
display屬性規定元素應該生成的框的類型；position屬性規定元素的定位類型；float屬性是一種佈局方式，定義元素在哪個方向浮動。
優先級機制：position：absolute/fixed優先級最高，有他們再時，float不起作用，display值需要調整。float或者absolute定位的元素只能是塊元素或者表格
5、overflow屬性
scroll：必回出現滾動條；
auto：子元素內容大於父元素時出現滾動條；
visible：溢出的內容出現在父元素之外；
hidden：溢出時隱藏。
6、CSS優化、提高性能的方法：
a、避免過度約束；b、避免後代選擇符；c、避免鏈式選擇符；d、使用緊湊的語法；f、避免不必要的命名空間；g、避免不必要的重複；h、最好使用語義的名字；i、避免important，可以選擇其他選擇器；j、儘可能的精簡規則，你可以合併不同類裏的重複規則；k、正確使用display屬性==
7、你對line-height是如何理解的
行高指一行文字的高度，具體說李阿航文字間基線的距離，css中起高度作用的是height和line-height，沒有定義height屬性，最終表現作用一定是line-height
單行文本垂直居中：把line-height值設置爲height一樣大小的值可以實現單行文字的垂直居中，其實也可以吧height刪除
多行文本垂直居中：需要設置display屬性爲inline-block
8、li與li之間又看不見的空白間隙是什麼原因引起的？
行框的排列會受到中間空白（回車空格）等的影響，因爲空格也屬於字符，這些空白也會被應用於樣式，佔據空間，所會有間隙，把字符大小設爲0，就沒有空格了。
解決方法：
a、可以將<li>代碼全部寫在一排；
b、浮動li中的float：left；
c、在ul中用font-size：0（谷歌不支持）
d、可以將ul{letter-spacing：-4px；}；li{letter-spacing:normal;}
9、display：inline-block什麼時候會顯示間隙
a、有空格時候會有間隙 解決：s除空格；
b、margin正值的時候 解決：margin使用負值
c、使用font-size時候 解決：font-size:0、letter-spacing、word-spacing
10、png、jpg、gif、webp這些圖片 格式解釋：
png：便攜式網絡圖片，是一種無損數據壓縮位圖文件格式
優點：壓縮比高，色彩好。大多數地方可以用。
jpg：是一種針對相片使用的一種失真壓縮方法，是一種破壞性的壓縮，在色調和顏色平滑變化做的不錯。在www上，被用來儲存和傳輸照片的格式；
gif：是一種位圖文件格式，以8位色重現真色彩的圖像。可以實現動畫效果。
webp：是谷歌在2010年推出的圖片格式，壓縮率只有jpg的2/3，大小比png小45%。
缺點：壓縮的時間更久了，兼容性不好，目前只有谷歌和opera支持。
11、強制換行的css
Word-break:break-all；
12、如何設置水平並且垂直居中的一張背景圖
設置background-position：center
13、清除所有的默認邊距：padding：0；margin：0；
14、解決img圖片自帶邊距的問題
圖片底部的空隙實際上涉及行內元素的佈局模型，圖片偶人的垂直對齊方式是基線，而基線的位置是與字體相關的，所以在某些時候，圖片底部的空隙可能是2px，而有可能是4px或者更多。不同的font-size應該也會影響空隙的大小。
解決方法：
最優的解決方法是定義vertical-align
1、轉換成（行級）塊元素
display：block
2、浮動，浮動後的元素默認可以轉化爲塊元素（可以隨意設置寬高屬性）
float：left
3、給img定義vertical-align：（消除底部邊距）
img{
border: 0;
vertical-align: bottom;
}
4、將其父容器的font-size設爲0；
5、給父標籤設置與圖片相同的高度
15、文字如何加下劃線，上劃線，刪除線
text-decoration:underline|overline|line-through
16、居中的三個方法
1. margin-left: auto; margin-right:auto; text-align: center;必須設置text-align，否則在IE中會居左。
2.居中就是要先找到中間的位置，再偏移一定的像素。假設寬度爲900，設置如下：left: 50%; margin-left: -450px;
3.採用瀏覽器寬度調整定位：left:expression_r((body.clientWidth-900)/2);
這個不如第二個辦法好。並且在IE中不靈光。如果用jquery的話是可以的。
17、瀏覽器及內核
1.IE-trident
2.chrome-blink
3.opera-blink
4.Safari-webkit
5.Firefox-gecko
18、有哪項方式可以設置dom的css樣式
1.行內； 2.內嵌；3.外嵌
19、css樣式語句構成：
選擇器{屬性：值}
20、前端界面有哪三層構成?
html(結構）CSS（樣式）JS（交互）
21、CSS中link和@import的區別
1.link是HTML標籤，@import是css中提供
2.link頁面加載時同時加載，@import是css提供的
3.@import存在兼容性問題，IE5以上
4.@import權重低
22、簡述其作用
<!DOCTYPE>聲明位於文檔中的最前面的位置，處於<html>之前
它是用來告知web瀏覽器頁面使用了那種html版本
