Doctype是什么？如何觸發嚴格模式與混雜模式模式？區分它們有何意義？
Doctype是document type（文檔類型）的簡寫，是用來說明所用的XHTML或HTML是什么版本的。XHTML1.0 提供了三種DTD聲明可供選擇，分別是：
1、過渡的(Transitional，也叫混雜模式)：要求比較寬松，允許繼續使用HTML4.01的標識，完整聲明為
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tranisitional.dtd">
2、嚴格的(Strict)：要求嚴格的DTD，不能使用任何表現層的標識和屬性，完整聲明為
<!DOCTYPE html PUBLIC "-W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3、框架的(Frameset)：專門針對框架頁面設計使用的DTD，如果頁面中包含有框架，可以采用DTD，完整聲明為
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
定義成相應的聲明就可以觸發相應的模式。
區分的意義是為了最終能達到數據與表現相分離的目地。
行內元素和塊級元素各有哪些？
行內元素會再一條直線上，是在同一行的。如 我是行內元素span 我是行內元素a
塊級元素會各占一行。如
我是塊級元素p
行內元素主要有：<span>、<a>、<b>、<img>、<br>、<button>、<strong>、<textarea>、<select>
塊級元素主要有：<div>、<ul>、<li>、<p>、<fieldset>、<form>、<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<hr>、<iframe>、<ol>、<pre>、<table>、<tr>、<td>
行內元素可以通過display:block轉為塊級元素。另外塊級元素的margin和padding都正常，行內元素左右maring和左右padding正常，上下不識別，也就是說不能通過margin-top和padding-top來改變行高。
CSS的盒模型？
CSS盒模型：網頁設計中的每個元素都是長方形的盒子，如下圖所示
Margin 比較特別，它不會影響盒子本身的大小，但是它會影響和盒子有關的其他內容。盒子本身的大小是這樣計算的：
width(即MSIE中的offsetWidth)：width + padding-left + padding-right + border-left + border-right
height(即MSIE中的offsetHeight)：height + padding-top + padding-bottom + border-top + border-bottom
CSS引入的方式有哪些?
CSS與HTML文檔結合的4中方法：
1、使用<link>元素鏈接到外部的樣式文件
2、在<head>元素中使用"style"元素來指定
3、使用CSS "@import"標記來導入樣式表單
4、在<body>內部的元素中使用"style"屬性來定義樣式
Demo:
<html> <head> <title>css demo</title> <link rel=stylesheet type="text/css" href="css/name.css" title="cool"> <style type="text/css"> @import url(css/name2.css); h1 {color:red} </style> </head> <body> <h1>CSS demo</h1> <p style="color:blue">Test</p> </body> </html>
link和@import的區別是?
本質上，這兩種方式都是為了加載CSS文件，但還是存在着細微的差別。
1、老祖宗的差別。link屬於XHTML標簽，而@import完全是CSS提供的一種方式。link標簽除了可以加載CSS外，還可以做很多其它的事情，比如定義RSS，定義rel連接屬性等，@import就只能加載CSS了。
2、加載順序的差別。當一個頁面被加載的時候（就是被瀏覽者瀏覽的時候），link引用的CSS會同時被加載，而@import引用的CSS會等到頁面全部被下載完再被加載。
3、兼容性的差別。由於@import是CSS2.1提出的所以老的瀏覽器不支持，@import只有在IE5以上的才能識別，而link標簽無此問題。
4、使用dom控制樣式時的差別。當使用javascript控制dom去改變樣式的時候，只能使用link標簽，因為@import不是dom可以控制的。
CSS選擇符有哪些？
CSS選擇符主要有以下10類：
1、通配選擇符：*{margin:0px;}
2、類型選擇符：a{text-decoration:none;}
3、屬性選擇符：input[type="button"]{padding:5px;}
4、包含選擇符：div.code a{text-decoration:none;}
5、子對象選擇符：ul.test>li{font-size:14px;}
6、ID選擇符：#test {color:red;}
7、類選擇符：.test{color:red;}
8、選擇符分組：body,ul,li{margin:0px;}
9、偽類及偽對象選擇符：div:first-letter{font-size:16px;}、a.test:hover{text-decoration:underline;}
10、相鄰選擇符：li+li{font-weight:bold;}
哪些屬性可以繼承？
CSS可以繼承的屬性有：
1、文字相關：font-family、font-size、font-style、font-variant、font-weight、font、letter-spacing、line-height、text-align、text-indent、text-transform、word-spacing
2、列表相關：list-style-image、list-style-position、list-style-type、list-style
3、顏色相關:color
4、透明度：opacity(opacity的繼承有問題，子元素會繼承祖元素的opacity，但是無法更改。)
另外，font-size繼承的是父元素的大小，而不是比例。line-height當父元素是百分比或px值的時候，子元素跟父元素相同，當父元素是normal或數字的時候，子元素的line-height是子元素的字體大小乘以數字。
關於繼承性參考了博客：css 繼承的一點總結
優先級算法如何計算？
重要性和來源的優先級排序從低到高是：
1、瀏覽器默認樣式
2、用戶在瀏覽器中定義的普通樣式（normal規則，不帶important規則）
3、開發人員定義的普通樣式（ normal規則，不帶important規則）
4、開發人員定義特殊樣式（帶important規則）
5、用戶在瀏覽器中定義特殊樣式（帶important規則）
另外還有一些原則：
1、相同的樣式在CSS規則后添加了!important的優先於沒有添加的。
2、CSS規則在文檔中出現的順序后面定義的的優先於前面定義的。
3、內聯樣式優先於用link引入的樣式和頁面上<style>里的樣式。
常見的用以上規則就可以確定了，如果以上規則還不能區分，請參考這里：http://www.w3.org/TR/CSS21/cascade.html#specificity
內聯和important哪個優先級高？
important高，DEMO：
<style type="text/css"> .test{ padding:10px; border-radius:5px; border:1px solid red!important; } </style> ... <div class="test" style="border:1px solid blue;">Test</div>
小結
以上總結只是依據本人目前的水平給出的自己的看法，不確保嚴格正確，如果有誤歡迎大家指出。
以上題目主要是選自淘寶HTML&CSS面試題，今天就總結這幾個，現在出去吃飯，以后會繼續。如果大家有什么好的前端面試題，歡迎提供。