『壹』 採用 CSS+DIV布局網站
SEO的優化需要從各個方面實行,才能使其盡可能的符合搜索引擎的排名規則.SEO是一個大工程,下面就讓我們從六個方面來講述一下如何優化一個網站.
一.域名主機的選擇，網站域名中包含的關鍵字盡量少些,盡量簡短; 如果你使用的虛擬主機,沒有被搜索引擎懲罰過;哪么你就可以根據不同語言,選擇不同地方的主機.
二.關鍵詞的選擇
1. 關鍵詞定位：你必須要先確定主推關鍵詞和次要關鍵詞是那些,同時你也要盡量避免選擇競爭過於激烈的或過於冷門的詞語.
2. 關鍵詞分布：先要做好關鍵詞布局,根據關鍵詞的主次作用對應的分布到網頁中去,同時也要避免把大量關鍵詞放在一個網頁中.
3. 關鍵詞密度：控制關鍵詞的密度,因為關鍵詞的密度過高或則過低都會對排名不利,甚至搜索引擎遭到懲罰.
三.符合搜索引擎網頁設計
1. 目錄結構URL優化，目錄結構不要超過三層
2.內鏈優化，導航中包含目錄頁面;確保每個子頁面都有鏈接回到主頁面和其它的重要頁面;相關內容頁之間互鏈;建立網站地圖,使搜索引擎更好的抓取網頁.
3. 圖像，圖片盡量少用,用ALT標簽註明該圖片的信息,並在圖片周圍寫上關於該圖片的文字描述.圖片文件名.因為搜索引擎看不懂圖片,只識文字.
4. 網頁減肥，減少一些累贅代碼,如把腳本寫到一個文件中調用,使用DIV+CSS等,減小網頁的大小,提高網頁的瀏覽速度.
四.Title 和標簽優化，Title優化，這個是重中之重.title是對網頁內容的概括與提煉;包含關鍵詞優化，keywords,deion 包括關鍵詞,deion 更要寫的通順.
五.動態網頁的優化
根據搜索引擎公司發布的一些資料和一些SEO專家研究結果得出,搜索引擎相對喜歡靜態頁面的網頁,比那些帶動態網頁並且帶有參數鏈接有著更高的權重,所以我們盡可能的使網站靜態化,根據網站實際的情況,結合假靜態技術,大家可以參考這個網站的靜態頁面http: //www.v1314.com,使網站在不影響使用的前提下,靜態化網站.
六.制定外部鏈接策略
外部鏈接在排名機制中佔了很大的比重,尋找有效的外部鏈接是SEO必須做的事.外部鏈接不要一下子增加太多,更不能通過作弊的手段獲得外部鏈接,這樣都會有被搜索引擎懲罰的風險.應該穩步的增加有效的外部鏈接.
完成以上這幾個方面的優化,一個符合搜索引擎優化的網站就建成了,當然這僅僅是一個好的開始.SEO是一個長期維護的過程,需要不斷的檢測分析並加以改進.這就需要SEO人員對網站進行長期跟蹤分析,並實時做出調整.搜索引擎的演算法在更新,要想保持長久的排名,必須根據實時調整優化策略.
SEO維護概括起來有三點:
1. 網站數據更新，搜索引擎會給經常更新的網頁更高的權重,從而得到更好的排名.所以必須保持網站的更新.
2. 網站流量分析，從流量結果中能得出有多有用的信息,可以根據分析結果制定相應的策略,不斷的優化網站.
3. 外鏈的增加，有效的外鏈能提高網頁的排名,必須不斷的增加外鏈。
『貳』 請高人指點一下css layout具體的含義，我知道height:1%可以觸發，但是為何必須出發layout呢，麻煩指點。
layout是table元素內特有的。
tableLayout 屬性用來顯示表格單元格、行、列的演算法規則。
固定表格布局：
固定表格布局與自動表格布局相比，允許瀏覽器更快地對表格進行布局。
在固定表格布局中，水平布局僅取決於表格寬度、列寬度、表格邊框寬度、單元格間距，而與單元格的內容無關。
通過使用固定表格布局，用戶代理在接收到第一行後就可以顯示表格。
自動表格布局：
在自動表格布局中，列的寬度是由列單元格中沒有折行的最寬的內容設定的。
此演算法有時會較慢，這是由於它需要在確定最終的布局之前訪問表格中所有的內容。
說明
該屬性指定了完成表布局時所用的布局演算法。固定布局演算法比較快，但是不太靈活，而自動演算法比較慢，不過更能反映傳統的 HTML 表。
『叄』 網頁製作,CSS排版遇到問題了！！！！！！！！！！！！！
當兩個容器嵌套時,如果外層容器和內層容器之間沒有別的元素,firefox會把內層元素的margin-top作用與父元素。
也就是說因為子層是父層的第一個非空子元素，所以使用margin-top會發生這個錯誤。
解決的辦法有兩個：
1、使用浮動來解決，即將子層代碼改為：<div style="margin-top:200px;float:left";>子層</div>
2、使用padding-top來解決，即：
<div style="padding-top:200px;">
<div>子層</div>
</div>
『肆』 求CSS解釋：word-warp word-break table-layout
word-wrap : normal | break-word 取值： normal :默認值。允許內容頂開指定的容器邊界break-word :內容將在邊界內換行。如果需要，詞內換行( word-break )也將發生說明：設置或檢索當當前行超過指定容器的邊界時是否斷開轉行。
此屬性僅作用於有布局的對象，如塊對象。內聯要素要使用該屬性，必須先設定對象的 height 或 width 屬性，或者設定 position 屬性為 absolute ，或者設定 display 屬性為 block 。
此屬性對於 currentStyle 對象而言是只讀的。對於其他對象而言是可讀寫的。
對應的腳本特性為 wordWrap 。 word-break : normal | break-all | keep-all 取值：normal :默認值。允許在詞間換行break-all :該行為與亞洲語言的 normal 相同。也允許非亞洲語言文本行的任意字內斷開。該值適合包含一些非亞洲文本的亞洲文本keep-all :與所有非亞洲語言的 normal 相同。對於中文，韓文，日文，不允許字斷開。適合包含少量亞洲文本的非亞洲文本說明：設置或檢索對象內文本的字內換行行為。尤其在出現多種語言時。
對於中文，應該使用 break-all 。
此屬性對於 currentStyle 對象而言是只讀的。對於其他對象而言是可讀寫的。
對應的腳本特性為 wordBreak 。 table-layout : auto | fixed 取值： auto :默認值。默認的自動演算法。布局將基於各單元格的內容。表格在每一單元格內所有內容讀取計算之後才會顯示出來fixed :固定布局的演算法。在這種演算法中，表格和列的寬度取決於 col 對象的寬度總和，假如沒有指定，則會取決於第一行每個單元格的寬度。假如表格沒有指定寬度( width )屬性，則表格被呈遞的默認寬度為 100% 。說明：設置或檢索表格的布局演算法。
你可以通過此屬性改善表格呈遞性能。此屬性導致IE以一次一行的方式呈遞表格內容從而提供給信息用戶更快的速度。此屬性依據此下順序使用其中一種方式布置表格欄寬度：
使用 col 或 colGroup 對象的寬度( width )屬性信息。
使用表格第一行內的單元格的寬度( width )信息。
依據表格列數等分表格寬度。而不考慮表格內容的實際寬度。 假如單元格的內容超過了列寬度，內容將會被換行。假如無法換行，則內容會被裁切。假如此屬性被設置為 fixed ，則 overflow 能夠被用於控制處理溢出單元格( td )寬度的內容。假如表格行高度被指定了，那麼換行的內容如果超出了指定表格行高度也會在縱向上被裁切。
設置此屬性值為 fixed ，有助於提高表格性能。對於長表格效果尤其顯著。
設置表格行高可以進一步提高呈遞速度，瀏覽器不需要檢測行內每一個單元格內容去確定行高就可以開始解析以及呈遞。
此屬性對於 currentStyle 對象而言是只讀的。對於其他對象而言是可讀寫的。
對應的腳本特性為 tableLayout 。
『伍』 如何利用CSS控制文本只在一行顯示
用CSS讓文字在一行內顯示不換行的方法：
一般的文字截斷(適用於內聯與塊)：
.text-overflow{
display:block;/*內聯對象需加*/
width:31em;
word-break:keep-all;/* 不換行 */
white-space:nowrap;/* 不換行 */
overflow:hidden;/* 內容超出寬度時隱藏超出部分的內容 */
text-overflow:ellipsis;/*溢出時顯示省略標記...；需與overflow:hidden;一起使用*/
}
對於表格，定義有點不一樣：
table{
width:30em;
table-layout:fixed;/*只有定義了表格的布局演算法為fixed，下面td的定義才能起作用*/
}
td{
width:100%;
word-break:keep-all;/* 不換行 */
white-space:nowrap;/* 不換行 */
overflow:hidden;/* 內容超出寬度時隱藏超出部分的內容 */
text-overflow:ellipsis;/* 溢出時顯示省略標記...；需與overflow:hidden;一起使用*/
}
註：這個只對單行的文字的效，如果你想把它用在多行上，也只有第一行有作用的。 這個寫法只有IE會有"..."，其它的瀏覽器文本超出指定寬度時會隱藏。
『陸』 如何用演算法或css布局將不確定數量的圖標均勻分布在
flex彈性盒：
網頁鏈接
『柒』 Css 優先順序演算法如何計算
在多個選擇符應用於同一個元素上那麼Specificity值高的最終獲得優先順序。 選擇符Specificity值列表：規則： 1. 行內樣式優先順序Specificity值為1,0,0,0，高於外部定義。 如：sjweb 外部定義指經由或標簽定義的規則； 2.!important聲明的Specificity值最高； 3.Specificity值一樣的情況下，按CSS代碼中出現的順序決定，後者CSS樣式居上； 4.由繼續而得到的樣式沒有specificity的計算，它低於一切其他規則(比如全局選擇符*定義的規則)。 演算法：當遇到多個選擇符同時出現時候 按選擇符得到的Specificity值逐位相加， {數位之間沒有進制 比如說： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0} 就得到最終計算得的specificity， 然後在比較取捨時按照從左到右的順序逐位比較。 實例分析：
『捌』 幾個必須掌握的css概念：重用，子選擇器和組選擇器
這個可以看看HTML5課程大綱了解啊，分階段學習的，不同階段學習的內容可以了解下。
第一階段：PCterminal
★ PC端頁面重構
1、認知行業、崗位、部分專業術語，就業趨勢與行業未來展望；
2、HTML5核心元素及布局應用；
3、CSS3核心屬性及布局應用；
4、圖形、圖像軟體的使用（PS,FW,AI）；
5、瀏覽器兼容及解決方案；
6、圖片整合、滑動門及寬高自適應等高級應用技術；
7、初步接觸JS。
★ PC端交互開發（原生JS）
1、javascript基礎語法和變數、控制語句、循環語句、函數、事件處理、數組、常見排序演算法；
2、DOM操作和BOM操作；
3、定時器、Cookie本地存儲、內置對象、正則表達式、閉包、JS面向對象語法、JSON、堆棧結構；
4、Ajax動態讀取數據、非同步操作、與DOM、JSON的結合使用；
5、各種主流瀏覽器兼容性處理；
6、單例、工廠、代理、觀察者等設計模式；
7、ECMA6.0新特性介紹。
★ PC端交互開發 （JQuery）
1、初識jQuery、jQuery的優勢、jQuery框架核心功能、最容易混淆的幾個概念
2、jQuery各種選擇器的使用，及選擇器的應用優化；
3、Dom節點操作、插入、刪除、復制、移動節點等操作；
4、事件處理、事件處理模型、事件處理機制、jQuery事件封裝機制、jQuery事件應用；
5、jQuery中的動畫、動畫時間的概念、基本動畫方法、復雜動畫方法、停止動畫與參數說明、jQuery動畫的隊列問題；
6、表單開發，設計可用性表單、表單驗證、增強型表單；
7、Ajax、XMLHttpRequest 基礎、jQuery Ajax、工具函數、緩存；
8、在jQuery中編寫插件、插件擴展、插件應用、jQuery.pagination分頁、jQuery.qtip信息提示、 jQuery.artDialog彈出層、jQuery.jscrollpane滾動條；
9、理解模塊式開發，以及requirejs插件的使用。
★ PC項目實訓
1、了解項目需求，項目流程；
2、了解項目管理，模塊分配，項目時間預估；
3、了解產品周期，參與團隊協作；
4、綜合運用HTML+CSS,JS,JQ,JQUERY UI, jquery easyui等技術，完成大型PC端項目開發。
第二階段：Mobile terminal
HTML5+CSS3新添特性
1、HTML5概述，新增的元素和廢除的元素、全局屬性；
2、HTML5基礎：新增文檔結構元素（Article、section、nav）智能表單、文件API（FileList對象和File對象、FileReader介面）、拖放API；
3、CSS3基礎：新增的後代選擇器、偽類選擇器、文本陰影、圓角、盒陰影、變形處理（transform）、動畫（transitions）、幀定義（key-frames）、旋轉（rotate）、 animation；
4、HTML5多媒體audio音頻元素、Video視頻元素、視頻回調事件；
5、本地存儲web storage、本地緩存；
6、定位基礎知識以及原理，結合google（高德）地圖定位；
7、響應式布局概念以及語法（@media）、web網頁和mobile網頁的區別、樣式繼承；
8、Canvas標簽基礎知識、繪制矩形、繪制圓形、使用路徑、圖像裁剪、保存為文件、創建動畫。
★ WebAPP項目開發及實訓
1、angular.js、backbone.js；
2、數據交互，ajax與DOM交互應用；
3、HTML5+CSS3在實際項目中的應用；
4、項目管理，模塊分配，項目時間預估；
5、產品周期，團隊協作；
6、微信場景開發；
7、微信平台互動開發。
第三階段：混合應用開發及實訓
★ 混合應用開發及綜合實訓
1、混合開發原理；
2、APP與webAPP；
3、混合應用與HTML頁面交互；
4、通過客戶端傳遞數據；
5、項目的版本迭代；
6、項目打包與應用，生成APK。
『玖』 如何通過CSS樣式設置單元格顯示內容的長度
在給出源碼之前還是讓我們先來了解一個跟本文要使用的技術有關的知識吧： table的樣式屬性table-layout: table-layout 版本：CSS2 兼容性：IE5+ 繼承性：無語法：table-layout : auto | fixed取值：auto : 默認值。默認的自動演算法。布局將基於各單元格的內容。表格在每一單元格內所有內容讀取計算之後才會顯示出來 fixed : 固定布局的演算法。在這種演算法中，表格和列的寬度取決於 col 對象的寬度總和，假如沒有指定，則會取決於第一行每個單元格的寬度。假如表格沒有指定寬度( width )屬性，則表格被呈遞的默認寬度為 100% 。 [自己總結]如果指定了table的百分比，並且第一行的每個單元格的寬度之和小於table指定的百分比寬度，則按百分比顯示；但是如果指定了table的百分比，並且第一行的每個單元格的寬度之和要大於table指定的百分比寬度，則按第一行的每個單元格的寬度之和顯示；同理，如果table指定了固定值，也是同上面一樣的呈現。 設置或檢索表格的布局演算法。 你可以通過此屬性改善表格呈遞性能。此屬性導致IE以一次一行的方式呈遞表格內容從而提供給信息用戶更快的速度。此屬性依據此下順序使用其中一種方式 布置表格欄寬度： 使用col 或 colGroup 對象的寬度( width )屬性信息。 使用表格第一行內的單元格的寬度( width )信息。 依據表格列數等分表格寬度。而不考慮表格內容的實際寬度。 假如單元格的內容超過了列寬度，內容將會被換行。假如無法換行，則內容會被裁切。假如此屬性被設置為 fixed ，則 overflow 能夠被用於控制處理溢出單元格( td )寬度的內容。假如表格行高度被指定了，那麼換行的內容如果超出了指定表格行高度也會在縱向上被裁切。 設置此屬性值為 fixed ，有助於提高表格性能。對於長表格效果尤其顯著。 設置表格行高可以進一步提高呈遞速度，瀏覽器不需要檢測行內每一個單元格內容去確定行高就可以開始解析以及呈遞。 此屬性對於 currentStyle. 對象而言是只讀的。對於其他對象而言是可讀寫的。 對應的腳本特性為 tableLayout 。
『拾』 CSS面試須知，哪些需要掌握得CSS技巧
主要都圍繞知識點的理解與css兼容性問題上，請參考下面的
2.1 link和@import都可以為頁面引入CSS文件，其區別是？
將樣式定義在單獨的.css的文件里，link和@import都可以在html頁面引入css文件。有link和@import兩種方式，導入方式如下：
link方式：<link rel=」stylesheet」 type=」text/css」 href=」aa.css」>
@import方式：<style type=」text/css」>@import 「aa.css」;</style>
link和@import兩種導入css文件的區別：
祖先的差別。Link屬於XHTML標簽，而@import完全是CSS提供的一種方式。Link標簽除了可以載入CSS外，還可以做很多其他的事情，比如定義RCC，定義rel連接屬性等；@import就只能載入css了。
載入順序的差別。當一個頁面被載入的時候，link引用的CSS會同時被載入，而@import引用的CSS會等到頁面全部被下載完再被載入。所以有時候瀏覽@import載入CSS的頁面時開始會沒有樣式（就是閃爍），網速慢時更為明顯。
兼容性的差別。由於@import是CSS2.1提出的所有老的瀏覽器不支持，@import只有在IE5以上的才能識別，而link標簽無此問題。
使用DOM控制樣式時的差別。當使用JavaScript控制DOM去改變樣式的時候，只能使用link標簽，因為@import不是DOM可以控制的。
@Import可以在css中再次引入其他樣式表，比如可以創建一個主樣式表，在主樣式表中再引入其他的樣式表。
2.2 如何理解CSS樣式表的層疊性？
CSS使用層疊的原則來考慮繼承、層疊次序和優先順序等重要特徵，從而判斷相互沖突的規則中哪個規則應該起作用。
繼承性是指，許多CSS的樣式規則不但影響選擇器所定義的元素，而且會被這些元素的後代繼承。
層疊性是指，當一個web頁面使用多個樣式表，多個樣式表中的樣式可層疊為一個。在多個樣式表之間所定義的樣式沒有沖突的時候，瀏覽器會顯示所有的樣式。
優先順序是指，當發生樣式定義沖突時，瀏覽器首先會按照不同樣式規則的優先順序來應用樣式。CSS樣式的優先順序如下所示（其中數字3擁有最高的優先權）：
1.瀏覽器預設設置；
2.外部樣式表（.css文件）或者內部樣式表（位於<head>元素內部）；
3.內聯樣式（作為某個元素的style屬性的值）。
同等優先順序下，以最後定義的樣式為准，important比內聯高。
2.3 哪些屬性可以繼承？
Css中可以繼承的屬性如下：
文本相關屬性：font-family、font-size、font-style、font-variant、font-weight、font 、letter-spacing、line-height、text-align、 text-indent、 text-transform 、word-spacing 、color；
列表相關屬性：list-style-image、list-style-position、list-style-type、list-style；
表格相關屬性：border-collapse、border-spacing、caption-side、table-layoute；
其他屬性：Cursor、visibility；
2.4 CSS選擇器中，元素選擇器和類選擇器的區別是什麼？
元素選擇器是常見的CSS選擇器，即文檔的元素就是最基本的選擇器。選擇器通常是某個HTML元素，比如<p>、<h1>、<em>、<a>等，甚至可以是<html>元素本身。
類選擇器用於將樣式規則與附帶class屬性的元素匹配，其中該class屬性的值為類選擇器中指定的值。使用類選擇器時，首先要定義樣式類，其語法為：
.className{ }；
所有能夠附帶class屬性的元素都可以使用此樣式聲明。只需要將class屬性的值設置為」className」，則可以將類選擇器的樣式與元素關聯。
在實際使用時，如果需要為某種元素定義樣式，則往往使用元素選擇器；如果要應用樣式而不考慮具體設計的元素，最常用的方法就是使用類選擇器。
2.5 簡要描述CSS中的定位機制
CSS中，除了默認的流定位方式以外，還有如下幾種定位機制：浮動定位、相對定位、絕對定位和固定定位。
浮動定位是將元素排除在普通流之外，並且將它放置在包含框的左邊或者右邊，但是依舊位於包含框之內。
相對定位將元素相對於它在普通流中的位置進行定位。
絕對定位是指將元素的內容從普通流中完全移除，並且可以使用偏移屬性來固定該元素的位置。
固定定位是指將元素的內容固定在頁面的某個位置。
2.6 display屬性和 visibility屬性的區別？
可以使用display屬性定義建立布局是元素生成的顯示框類型。
1.如果將display屬性設置為block，可以讓行內元素表現得像塊級元素一樣；
2.如果將display屬性設置為inline，可以讓塊級元素表現得像內聯元素一樣；
3.可以通過把display屬性設置為none，讓生成的元素根本沒有框。這樣的話，該框及其所有內容就不在顯示，不佔用文檔中的空間。
在DIV設計中，室友display:none屬性後，HTML元素（對象）的寬度。高度等各種
屬性都將」丟失」；而使用visibility:hidden屬性後，HTML元素（對象）僅僅是在視覺上看不見（完全透明），而它所佔據的空間位置仍然存在，也即是說它仍具有高度、寬度等屬性值。
2.7 簡述對CSS的盒子模型的理解？
CSS盒子模型也叫做框模型，具備內容（content）、填充（padding）、邊框（border）、邊距（margin）這些屬性。在CSS中，每個元素都被視為一個框，而每個框都有三個屬性：
border：元素的邊框（可能不可見），用於將框的邊緣與其他框分開；
margin：外邊距，表示框的邊緣與相鄰框之間的距離，也稱為頁邊空白；
padding：內邊距，表示框內容和邊框之間的空間。
盒子模型的結構如圖所示：
由上圖可以看出，width和height指的是內容區域的寬度和高度。增加內邊距、外邊距和邊框不會影響到內容區域的尺寸，但會增加元素框的總尺寸。
因此，如果在一個具有邊框的元素中放置文本，往往需要設置一些內邊距，以便文本的邊緣不要接觸邊框，這樣更便於閱讀。而外邊距則可以在多個元素框之間創建空白，避免這些框都擠在一起。因此，在設計頁面時，經常會使用padding屬性和margin屬性來設置頁面的布局。但是，必須注意的是，一旦用了padding屬性或者margin屬性設置了元素的邊距以後，會增加元素在頁面布局中所佔的面積。
2.8 簡述CSS3中的偽類選擇器？
CSS3提供了大量偽類選擇器，瀏覽器對於有些偽類選擇器的支持還不太好。目前，常用的偽類選擇器有：
目標偽類：即 :target，突出顯示活動的HTML錨，用於選取當前活動的目標元素；
元素狀態偽類：比如 :enabled、:disabled、:checked；
結構偽類： 比如 :first-child、:last-child、:empty、:only-child；
否定偽類：即 :not(selector)，匹配非指定元素/選擇器的每個元素。
2.9 為什麼建議設置背景圖像的同時還設置背景顏色？
一般建議在使用背景圖片的同時提供background-color屬性，並且將其設置為和圖像主要顏色類似的顏色。這樣，如果正在載入頁面，或者因為各種原因無法顯示背景圖像時，頁面可以使用這種顏色作為背景色。
2.10 如何居中div？如何居中一個浮動元素？
給div設置一個寬度，然後設置元素的左右外邊距為auto，比如，margin:0 auto。則可以實現div居中顯示。
對於浮動元素，設置其左右外邊距為關鍵字auto是無效的。此時，如果需要設置其居中顯示，可以：1.精確計算其左外邊距並進行設置，實現居中顯示。
2.使用一個居中顯示的div元素包含次浮動元素,
代碼如：<div style=」margin:0 auto;」><div style=」float:left;」></div></div>
2.11 在設置文本的字體時，為什麼建議設置替換字體？
可以使用font-family屬性來指定文本的字體，代碼如下所示：font-family:name/inherit;
此時，name為首選字體的名稱。如果字體名稱有多個單詞，即中間有空格，則需要將字體名稱用一對單引號或者雙引號包圍起來。
但是，如果用戶機器上並沒有安裝name所指定的字體，則會顯示默認字體。因此，如果可以指定一種替代字體，替代字體可以和指定字體不完全相同，相似且不會影響頁面的布局，就可以解決問題了。
我們可以為font-family屬性指定多種字體，且多種字體之間用逗號隔開，這樣可以為頁面指定一個字體列表。如果用戶機器沒有第一種字體，則瀏覽器會查找字體列表中的下一種字體替代默認字體顯示。如果找遍了字體列表還是沒有可以使用的字體，瀏覽器才會使用默認字體顯示頁面。代碼如下所示：
h1{font-family:Georgia,serif;}
此時，如果用戶機器上沒有安裝Georgia，但安裝了Times字體（serif字體系列中的一種字體），瀏覽器就可能對<h1>元素使用Times。盡管Times與Georgia並不完全匹配，但至少足夠接近。
因此，我們建議在所有font-family規則中都提供一個通用字體系列。這樣就提供了一條後路，在用戶機器無法提供與規則匹配的特定字體時，就可以選擇一個通用字體作為替換。
2.12 內聯元素可以實現浮動嗎？
在CSS中，任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素。因此，對於內聯元素，如果設置為浮動，會產生和塊級框相同的效果。
2.13 什麼情況下需要額外設置表格的顯示規則？
默認情況下（不額外設置表格的顯示規則時），表格按照自動表格布局進行顯示，即瀏覽器在顯示表之前查看每一個單元格，然後基於所有格的設置計算表單大小，而列的寬度是由列段元個中沒有折行的最寬的內容設定的。此時，單元格的大小會適應內容的大小。
自動表格布局的演算法在表格復雜時會比較慢，這是由於它需要在確定最終的布局之前訪問表格中多有的內容。在不能提前確定每一列的大小時，這種方式會非常適用。
如果額外設置表格的顯示規則，即設置table-layout屬性的值為fixed，則稱為固定表格布局。在固定表格布局中，水平布局僅取決於表格寬度，列寬度，表格邊框寬度，單元格間距，而與單元格的內容無關。瀏覽器將使用某列指定的寬度來計算布局，並使用該寬度計算該列中所有其他單元格的寬度。
固定表格布局與自動表格布局相比，允許瀏覽器更快地對表格進行布局。因為如果指定使用固定表格布局，瀏覽器在接收到第一行後就可以顯示表格。如果表格龐大且已經指定了大小，則會加速表的顯示。
2.14 簡要描述CSS中content屬性的作用
content屬性與:before及:after偽元素配合使用，來插入生成內容，可以在元素之前或之後放置生成的內容。可以插入文本、圖像、引號，並可以結合計數器為頁面元素插入編號。比如，查看如下代碼：
body {counter-reset:chapter;}
h1:before { content:」第」counter(chapter)」章」;}
h1 { counter-increment:chapter;}
使用content屬性，並結合:before選擇器和計數器counter，可以在每個<h1>元素前插入新的內容。
2.15 CSS Sprite是什麼，談談這個技術的優缺點
CSS Sprite是一種網頁圖片應用處理方式，就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的」background-image」，」background-repeat」，」background-position」的組合進行背景定位。
其優點在於：①減少網頁的http請求，提高性能，這也是CSS Sprite最大的優點，
也是其被廣泛傳播和應用的主要原因；
②減少圖片的位元組，多張圖片合並成1張圖片的位元組小於多張圖片的位元組總和；
③較少了命名困擾，只需對一張集合的圖片命名，不需要對每一個小元素進行命名提高製作效率；
④更換風格方便。只需要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就可以改變，維護起來更加方便；
但是CSS Sprite也存在一些不可忽視的缺點：
①圖片合成比較麻煩；
②背景設置時，需要得到每一個背景單元的精確位置；
③維護合成圖片時，最好只是向下加圖片，而不是更改已有圖片。
2.16 對CSS3有了解嗎？列舉幾個CSS3的新特性並簡要描述
CSS3作為CSS技術的升級版本，著力於模塊化發展，將規范分解為一些小的模塊，如選擇器、盒子模型、列表模塊、背景和邊框等；並加入了很多新的模塊和屬性，比如賦值選擇器、文字陰影、邊框圓角、邊框陰影、漸變、過渡、多欄布局、2D/3D轉換、動畫等。
其中，CSS3提供了一些復雜選擇器，用於實現頁面復雜情況下的元素選擇，如屬性選擇器，一些偽類和偽元素選擇器；漸變用於為元素設置漸變效果的背景；轉換可以實現元素的變換，比如位移、縮放、旋轉等；過渡可以實現簡單的動畫效果；動畫屬性則可以實現復雜的動畫，可以實現逐幀製作動畫。
2.17 過渡與動畫的區別是什麼？
過渡屬性transition可以在一定的事件內實現元素的狀態過渡為最終狀態，用於模擬一種過渡動畫效果，但是功能有限，只能用於製作簡單的動畫效果；
動畫屬性animation可以製作類似Flash動畫，通過關鍵幀控制動畫的每一步，控制更為精確，從而可以製作更為復雜的動畫。
2.18 什麼是CSS reset？
CSS reset，又叫做CSS重寫或者CSS重置，用於改寫HTML標簽的默認樣式。
有些HTML標簽在瀏覽器里有默認的樣式，例如p標簽有上下邊距，li標簽有列表標識符號等。這些默認樣式在不同瀏覽器之間也會有差別，例如ul默認帶有縮進的樣式，在IE下，它的縮進是通過margin實現的，而Firefox下，它的縮進是由padding實現的。著必然會帶來瀏覽器兼容問題。
因此，在CSS代碼中，可以使用CSS代碼去掉這些默認樣式，即重新定義標簽樣式，從而覆蓋瀏覽器的CSS默認屬性，即CSS reset。
需要注意的是，在進行樣式重寫時，不建議使用 * 選擇器進行重寫，這樣會降低效率，影響性能。
2.19 如何清除浮動元素所帶來的影響？
浮動定位是指將元素排除在普通流之外，並且將它放置在包含框的左邊或者右邊，但是依舊位於包含框之內。也就是說，浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
由於浮動框不在文檔的普通流中，所以元素浮動之後，其原有位置不再保留，其他元素的位置會受到影響。
如果需要清除左側或者右側浮動元素帶來的影響，則可以使用clear屬性來設置。另外，包含框呃逆的子元素浮動後，如果包含框沒有設置具體的高度，則其高度會發生變化，此時，可以使用overflow屬性來清除子元素浮動後帶來的影響。
2.20 談談你對瀏覽器兼容性問題的理解
瀏覽器的類型及版本的不同會造成CSS效果不盡相同，因此需要實現瀏覽器兼容，也可以針對不同的瀏覽器編寫不同的CSS。
目前，各主流瀏覽器的新版本，對應W3C的標准支持很好，因此，首先保證代碼符合W3C的標准，這是解決瀏覽器兼容問題的前提。
其次，對於某些支持受限的屬性，針對不同的瀏覽器添加相應的前綴，比如-webkit-、-o-、-moz-。
第三，對於IE的低版本，可以編寫帶有特定前綴的代碼，實現版本識別。比如：
.bb{
background-color:#f1ee18;/*所有識別*/
.background-color:#f1ee18\9;/*IE6 7 8識別*/
+background-color:#f1ee18;/*IE6 7識別*/
_background-color:#f1ee18;/*IE6識別*/
}
另外，對於特定的兼容性問題，特殊解決。常見的特殊問題有：
1.使用CSS reset：對於有些HTML標簽，瀏覽器默認的margin和padding不同，可以使用CSS代碼改寫默認的樣式效果，從而實現統一
2.IE低版本中，不能使用auto關鍵字實現塊級元素居中顯示，可以改用設置父元素的text-align；
3.子元素設置上外邊距時，父元素需要設置邊框或者外邊距；
4.外邊距合並問題。