1、CSS中塊級元素、行內元素、空元素分別有哪些？二者的區別是什麼？
塊級元素：div dl dd dt h1~h6 header footer form ul ol li hr p
行內元素：a span em strong i b select input button textarea
空元素：br img input hr meta link
區別：- 塊級元素會獨佔一行，寬度默認填滿其父元素的寬度；行內元素不會獨佔一行，相鄰的行內元素會排在同一行裏
- 塊級元素可以設置width和height屬性；行內元素設置寬高無效，其寬高值由其內容決定
- 塊級元素和行內元素可以通過display屬性來轉換：display:block;可以將行內元素轉換爲塊級元素；display:inline;可以將塊級元素轉換爲行內元素
2、CSS的浮動特性會給父元素帶來什麼後果？怎麼處理這個結果？
後果：子元素設置浮動之後，父元素的高度值會塌陷
清除浮動的方式：
a、在浮動元素後邊添加一個空標籤來清除浮動：<div style="float:left;"><div style="clear:all;"></div>
b、給父級元素添加overflow:hidden;屬性，需要添加zoom:1;來觸發IE瀏覽器的hasLayout
c、定義一個清除浮動的類，給父元素添加該類：
.clear{zoom:1;//兼容IE6}
.clear:after{display:block; content:""; clear:both; height:0;}
3、CSS引入方式有哪些？link和@import的區別是什麼？
1> CSS的引入方式有4種：
a、內聯樣式：<div style="coloe:#fff;"></div>；
b、通過style標籤引入：<style>div{color:#fff;}</style>；
c、通過link標籤引入：<link rel="stylesheet" type="text/css" href="style.css">；
d、通過@import引入：@import url(style.css)；
2> link和@import的區別：
a、link爲XHTML標籤，@import由CSS提供；
b、頁面加載時，會同時加載由link引入的CSS文件；而@import引入的CSS文件，只有在頁面加載完成之後纔會加載；
c、link無兼容問題，@import在低版本瀏覽器中不支持；
d、link引入的CSS樣式可以通過js操作來改變，而@import引入的CSS樣式不可以；
4、null與undefined的區別是什麼？
1> null：
a、一個表示”無”的對象，Number(null)轉換結果爲0；
b、null表示尚未存在的對象；
c、null表示沒有對象，即該處不該有值；null是對象原型鏈的終點；
2> undefined：
a、一個表示未定義的值，Number(undefined)轉換結果爲NaN；
b、當聲明的變量爲初始化時，默認值爲undefined；
c、一個變量聲明，但未定義，此時爲undefined；
對象沒有賦值的屬性的值爲undefined；
函數沒有返回值時，默認返回undefined；
5、CSS選擇符有哪些？哪些屬性可以繼承？優先級是怎麼樣的？
- CSS選擇符：ID選擇符、類選擇符、標籤選擇符、通配符（*）、子選擇符、兄弟選擇符
- 可以繼承的屬性：visibility、cursor、list-style、font、font-size、font-family、font-weight、color、text-indent、text-align
- 優先級：!important > 內聯樣式 > ID選擇器 > class選擇器 > 標籤選擇器
6、CSS盒模型
標準瀏覽器下盒模型的寬高：margin*2 + border*2 + padding*2 + width/height;
IE瀏覽器下盒模型的寬高：border*2 + padding*2 + width/height
7、爲什麼要初始化CSS樣式？
CSS初始化指的就是重新設置瀏覽器樣式，不同的瀏覽器對樣式的默認值不同，爲了保證頁面樣式的統一，我們需要初始化頁面樣式來減少頁面在瀏覽器中的差異。
8、解釋css sprites如何使用
CSS sprites是將不同的小圖片放置到一張大圖片中，在頁面中通過backgroun-image來引入該圖片，在需要使用的時候，通過background-position設置left值和top值來定位小圖標的位置，使用雪碧圖可以減少頁面的HTTP請求，提高頁面性能。
9、W3C標準的理解與認識
W3C標準：指的就是實現結構與行爲的分離，其中HTML實現頁面結構，CSS操作頁面表現，JS完成頁面行爲
10、如何顯示/隱藏一個DOM元素?
1>、display:none
- 隱藏元素，使用none值會讓元素從文檔中直接刪除，刪除後的元素不會佔用頁面空間；
- 優點：不需要多餘代碼，不佔用空間，對頁面佈局沒有影響；
- 缺點：元素從文檔刪除，不利於seo；
2>、visibility:hidden，
- 隱藏元素，元素隱藏後佔用頁面空間，元素會影響佈局；
- 優點：利於SEO優化；
- 缺點：該屬性會繼承，父元素使用visibility:hidden，子元素也會隱藏；
3>、text-indent:-999em
- 給元素設置一個足夠大的負值，大到瀏覽器無法顯示；
- 優點：利於搜索引擎；
- 缺點：影響頁面佈局；
4>、使用position的left和top隱藏元素
- 給元素的left和top設置足夠大的值，大到瀏覽器無法顯示；position:absolute; top:-999em或者left:-999em；
- 優點：可以隨意設置元素的位置；
- 缺點：不能隨意修改，比較死板
11、XHTML和HTML的區別是什麼？
- XHTML 元素必須被正確地嵌套；
- XHTML 元素必須被關閉；
- 標籤名必須用小寫字母；
- XHTML 文檔必須擁有根元素；
12、CSS中常用的定位有什麼？都有什麼特性？
1>、CSS中的定位機制分類：標準流、絕對定位、浮動定位；
- 標準文檔流：從左往右、從上往下依次排列；
- 絕對定位：脫離標準文檔流，重新定位，不會保留元素原先所佔的位置；
- 浮動定位：脫離標準文檔流，重新定位；
2>、CSS中定位方式分類
- 絕對定位、相對定位、固定定位、靜態定位
3>、絕對定位
- 默認情況下，當前定位元素的祖先沒有使用定位方式時，是相對於整個文檔document進行定位的，而不是相對於body和html進行定位；
- 若祖先元素採用了除static以外的其他定位方式，那麼該定位元素則相對於有定位的祖先元素定位；
- 採用絕對定位方式的元素，會脫離標準文檔流，重新定位，並且不會保留元素原先的位置；
- 添加了絕對定位和浮動的元素，如果沒有給元素添加寬度，則元素的寬度是由內容來撐開的；
{position:absolute; left:0; top:0;}
4>、相對定位
- 相對定位是相對於元素當前的位置進行定位，沒有脫離標準文檔流，會保留元素本身的位置；
- 給元素添加相對定位之後，並不會對元素本身及周圍的元素產生影響；
{position:relative; left:20px;top:-10px;}
5>、固定定位
- 固定定位是相對於整個文檔進行定位，脫離標準文檔流，但是IE6不支持固定定位方式，所以在IE6中實現固定定位需要JS來配合實現；
- 使用固定定位的元素，不會隨着頁面中元素內容的滾動而滾動；
{position:fixed; left:10px; top:10px;}
12、在父級塊元素的高度不固定的情況下，子級塊元素如何在父級塊元素中垂直居中？
可以通過CSS3屬性：transform來實現
#div{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#div{
display: -webkit-flex;
align-items: center;
}13、DOCTYPE的定義和作用
- 定義：
<!DOCTYPE html>DOCTYPE聲明在網頁中是必不可少的，它是一種標準通用標記語言的文檔類型聲明；
- 作用：告訴瀏覽器（標準通用語言解析器）應該使用什麼文檔類型來解析文檔；
14、img標籤上title和alt屬性的區別是什麼？
title：鼠標劃上圖片上時的提示信息；
alt：在頁面圖片沒加載出來的提示信息；
15、怎樣用css在頁面上繪製三角形
.div1{
width: 0;
height: 0;
border: 50px solid;
border-left-color: transparent;
border-bottom-color: transparent;
border-top-color: greenyellow;
border-right-color: greenyellow;
}16、如何設置手機網頁視窗，讓其適應屏幕，並禁止放大縮小頁面
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no，minimum-scale=1.0,maximum-scale=1.0"/>17、談談px、em、rem單位的區別？
參考鏈接：https://webdesign.tutsplus.com/zh-hans/tutorials/comprehensive-guide-when-to-use-em-vs-rem–cms-23984
18、如何讓img標籤在DIV中水平垂直居中？
#div{
width: 800px;
height: 400px;
display: table-cell;
vertical-align: middle;
text-align: center;
border: 1px solid #ccc;
}
<div id="div"><img src="../img/1.png"></div>19、CSS hack技巧
由於不同廠商的瀏覽器對CSS的解析不一樣，導致生成的頁面效果不一樣，需要編寫不同的CSS樣式適應不同的瀏覽器。
IE代碼解析：
a、<!--[if IE 8]--><[endif]-->給瀏覽器添加特殊標識，限定當前CSS樣式只能在某些瀏覽器下被解析
b、* + 表示被IE7以下的IE瀏覽器解析
c、 \9：IE10以下的瀏覽器解析
d、 _：下劃線表示IE6之前的瀏覽器解析
e、谷歌瀏覽器的CSS hack:@media screen and (-webkit-min-device-pixel-ratio:0){.box{color:red;}}
1>、屬性級hack
color:red; _color:red; *color:red; +color: red; *+color: red; color: red !important;
2>、選擇符級hack
*html #demo{color:red;} *+html #demo{color:red; body:nth-of-type(1) #demo{color:red;} head:first-child + body #demo{color:red;}}
20、請寫出一個最簡單的css動畫，只需要從左邊移動到右邊，並且動畫結束後保持在最後的狀態
CSS3動畫的實現需要遵循@keyframes規則，使用@keyframes定義動畫，然後結合animation屬性一起使用。
<style>
#div{
width: 800px;
height: 400px;
background: #aff;
animation: animate 1s;
animation-fill-mode: forwards;
}
@keyframes animate {
0% {
margin-left: 0;
}
25% {
margin-left: 100px;
}
50% {
margin-left: 200px;
}
100% {
margin-left: 400px;
}
}
</style>
<div id="div"></div>21、請寫出響應式的css媒體查詢代碼
@media screen and (max-width: 300px) {
body {
background-color:lightblue;
}
}22、僞類元素before和after的理解
before：防止子元素頂部的外邊距塌陷
after：防止子元素底部的外邊距塌陷，清除元素浮動
23、常見頁面佈局
1>、兩列布局—橫向兩列布局：
方法一：float使塊級元素在一行顯示,margin設置兩列之間的間距；
方法二：父元素設置相對定位；自適應寬度元素設置絕對定位；固定寬度列的高度要大於自適應寬度的列；
2>、三列布局
三列自適應佈局：寬度值設置爲百分比；
三列布局中間自適應：中間列使用margin值來設置，兩邊則使用絕對定位的方式來設置，將兩邊的寬度值設置爲固定值，中間的寬度值設置爲自適應；
3>、雙飛翼佈局：左右固定，中間自適應；
4>、聖盃佈局：左右兩邊使用position定位，中間設置爲margin：0 100px;
5>、等高佈局：padding-bottom：1000px; margin-bottom:-1000px;
margin負值：margin使用負值時，IE6下超出父級的部分會隱藏，解決方案：給子元素添加relative，當元素本身有寬度時，就會觸發IE瀏覽器的haslayout