1. Doctype? 嚴格模式與混雜模式-如何觸發這兩種模式，區分它們有何意義?
Doctype聲明位於文檔中的最前面的位置，處於標籤之前。此標籤可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規範。該標籤可聲明三種DTD 類型，分別表示嚴格版本、過渡版本以及基於框架的 HTML 文檔。
當瀏覽器廠商開始創建與標準兼容的瀏覽器時，他們希望確保向後兼容性。爲了實現這一點，他們創建了兩種呈現模式：標準模式和混雜模式（quirks mode）。在標準模式中，瀏覽器根據規範呈現頁面；在混雜模式中，頁面以一種比較寬鬆的向後兼容的方式顯示。混雜模式通常模擬老式瀏覽器（比如Microsoft IE 4和Netscape Navigator 4）的行爲以防止老站點無法工作。
瀏覽器根據DOCTYPE是否存在以及使用的哪種DTD來選擇要使用的呈現方法。如果XHTML文檔包含形式完整的DOCTYPE，那麼它一般以標準模式呈現。對於HTML 4.01文檔，包含嚴格DTD的DOCTYPE常常導致頁面以標準模式呈現。包含過渡DTD和URI的DOCTYPE也導致頁面以標準模式呈現，但是有過渡DTD而沒有URI會導致頁面以混雜模式呈現。DOCTYPE不存在或形式不正確會導致HTML和XHTML文檔以混雜模式呈現。
2. 行內元素有哪些？塊級元素有哪些？CSS的盒模型？
行內元素有：a b span I b em img input select strong
塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
盒模型：margin border padding width
3. CSS引入的方式有哪些? link和@import的區別是?
|
1. 使用 LINK標籤 將樣式規則寫在.css的樣式文件中，再以<link>標籤引入。 <link rel=stylesheet type="text/css" href="example.css"> |
|
2. 使用@import引入 跟link方法很像，但必須放在<STYLE>...</STYLE> 中 <STYLE TYPE="text/css"> <!-- @import url(css/example.css); --> </STYLE> |
|
3. 使用STYLE標籤 將樣式規則寫在<STYLE>...</STYLE>標籤之中。 <STYLE TYPE="text/css"> <!-- body {color: #666;background: #f td,p {color:#c00;font-size: 12px;} --> </STYLE> |
|
4. 使用STYLE屬性 將STYLE屬性直接加在個別的元件標籤裏，<元件(標籤) STYLE="性質(屬性)1: 設定值1; 性質(屬性)2: 設定值2; ...} |
|
5. 使用<span></span>標記引入樣式 <span style="font:12px/20px #000000;">cnwebshow.com</span> |
兩者區別：加載順序的差別。當一個頁面被加載的時候，link引用的CSS會同時被加載，而@import引用的CSS會等到頁面全部被下載完再被加載。@import可以在css中再次引入其他樣式表，比如可以創建一個主樣式表，在主樣式表中再引入其他的樣式表，如：
main.css
———————-
@import “sub1.css”;
@import “sub2.css”;
這樣做有一個缺點，會對網站服務器產生過多的HTTP請求，以前是一個文件，而現在卻是兩個或更多文件了，服務器的壓力增大，瀏覽量大的網站還是謹慎使用。
4. CSS選擇符有哪些？哪些屬性可以繼承？優先級算法如何計算？內聯和important哪個優先級高？
|
l 通配選擇符* { sRules } l 類型選擇符E { sRules } l 屬性選擇符 l ^= //以xxx開頭的元素 l $= //以xxx結尾的元素 l *= //包含xxx的元素 l 包含選擇符E1 E2 { sRules } l 子對象選擇符E1 > E2 { sRules } l ID選擇符 #ID { sRules } l 類選擇符E.className { sRules } l 選擇符分組 l 僞類及僞對象選擇符 |
可以繼承的有：font-size font-family color
不可繼承的一般有：border padding margin background-color width height等
============================
|
關於CSS specificity CSS 的specificity 特性或稱非凡性，它是衡量一個衡量CSS值優先級的一個標準 既然作爲標準，就具有一套相關的判定規定及計算方式，specificity用一個四位的數 字串(CSS2是三位)來表示，更像四個級別，值從左到右，左面的最大，一級大於一級，數位之間沒有進制，級別之間不可超越。 算法： 當遇到多個選擇符同時出現時候 按選擇符得到的Specificity值逐位相加， {數位之間沒有進制 比如說： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0} 就得到最終計算得的specificity， 然後在比較取捨時按照從左到右的順序逐位比較。 主要的選擇器Specificity值： !important最高 行內style 1，0，0，0 Id選擇器 0，1，0，0 Class及屬性選擇器 0,0,1,0 標籤選擇器 0,0,0,1 其他選擇符 0,0,0,0 Specificity值一樣的情況下，按CSS代碼中出現的順序決定，後者CSS樣式居上； 由繼續而得到的樣式沒有specificity的計算，它低於一切其他規則(比如全局選擇符*定義的規則)。 實例分析： 1.html > body div [id=”totals”] ul li > p {color:red;} 分析： 6個元素{ html body div ul li p} Specificity值爲0,0,0,6 1個屬性選擇符{ [id=”totals”] } Specificity值爲0,0,1,0 2個其他選擇符{ > > } Specificity值爲0,0,0,0 最終：Specificity值爲 0,0,1,6 |
使用!important可以改變優先級別爲最高，其次是style對象，然後是id > class >tag ，另外在同級樣式按照申明的順序後出現的樣式具有高優先級。
5. 前端頁面由哪三層構成，分別是什麼？作用是什麼？
網頁分成三個層次，即：結構層（html或xhtml）、表示層（css）、行爲層（js）。
網頁的結構層（structural layer）由 HTML 或 XHTML 之類的標記語言負責創建。標籤，也就是那些出現在尖括號裏的單詞，對網頁內容的語義含義做出了描述，但這些標籤不包含任何關於如何顯示有關內容的信息。例如，P 標籤表達了這樣一種語義：“這是一個文本段。”
網頁的表示層（presentation layer） 由 CSS 負責創建。 CSS 對“如何顯示有關內容”的問題做出了回答。
網頁的行爲層（behavior layer）負責回答“內容應該如何對事件做出反應”這一問題。這是 Javascript 語言和 DOM 主宰的領域。
6. css的基本語句構成是？
選擇器{屬性1:值1;屬性2:值2;……}
如 如何居中一個浮動元素?
設置容器的浮動方式爲相對定位，然後確定容器的寬高，比如寬500 高 300 的層，然後設置層的外邊距。
div{Width:500px;height:300px;Margin: -150px 0 0 -250px;position:relative;left:50%;top:50%;}
如何用CSS分別單獨定義IE6、7、8的width屬性。
所有瀏覽器 通用height: 100px;
IE6 專用
_height: 100px;
IE6 專用
*height: 100px;
IE7 專用
*+height: 100px;
IE7、FF 共用
height: 100px !important;