初中級的前端人員面試必然少不了html和css的內容，筆者就今幾年公司招聘前端所蒐集到的高頻率問題進行彙總整理，做重要是嘗試給一個最佳答案（歡迎指正）
第一部分 HTML5 基礎
1.1. 請描述一個網頁從開始請求到最終顯示的完整過程？
一個網頁從請求到最終顯示的完整過程一般可分爲如下 7 個步驟：
- 在瀏覽器中輸入網址；
- 發送至 DNS 服務器並獲得域名對應的 WEB 服務器的 IP 地址；
- 與 WEB 服務器建立 TCP 連接；
- 瀏覽器向 WEB 服務器的 IP 地址發送相應的 HTTP 請求；
- WEB 服務器響應請求並返回指定 URL 的數據，或錯誤信息，如果設定重定向，則重定向到新的 URL 地址。
- 瀏覽器下載數據後解析 HTML 源文件，解析的過程中實現對頁面的排版，解析完成後在瀏覽器中顯示基礎頁面。
- 分析頁面中的超鏈接並顯示在當前頁面，重複以上過程直至無超鏈接需要發送，完成全部顯示。
1.2. DOCTYPE 聲明的作用是什麼? 嚴格模式與混雜模式如何區分？
HTML 語言已經存在太久了，目前必然會有一些不同版本的文檔存在。爲了能夠讓瀏覽器清楚你的文檔的版本、類型和風格，需要在文檔的起始用 DOCTYPE 聲明指定當前文檔的版本和風格。如果在網頁中提供了版本信息，則可以有利於驗證頁面中的代碼是否符合當前的版本和風格。
在嚴格模式（標準模式）中，瀏覽器根據規範呈現頁面；在混雜模式中頁面以向後兼容的方式顯示，以防止老站點無法工作。
如果 HTML 文檔包含形式完整的 DOCTYPE，那麼它一般以標準模式呈現。對於 HTML4.01 文檔，包含嚴格 DTD 的 DOCTYPE 常常導致頁面以標準模式呈現。DOCTYPE 不存在
或格式不正確會導致文檔以混雜模式呈現。
1.3. 簡要描述常見的瀏覽器內核。
Trident：IE 瀏覽器；
Gecko：Mozilla 瀏覽器，比如 Firefox；
Webkit：Safari 瀏覽器，也是 Chrome 瀏覽器的內核原型；
Blink：Chrome 瀏覽器，Opera 瀏覽器。
1.4. 如何理解 html 標籤語義化？
語義化的主要目的在於，直觀的認識標籤(markup)和屬性(attribute)的用途和作用。
可以概括爲：用正確的標籤做正確的事情。
html 語義化可以讓頁面的內容結構化，便於瀏覽器解析，便於搜索引擎解析，並提高
代碼的可維護度和可重用性。
比如，儘可能少的使用無語義的標籤 div，使用結構化標籤header、section
footer
1.5. 錨點的作用是什麼？如何創建錨點？
錨點是文檔中某行的一個記號，類似於書籤，用於鏈接到文檔中的某個位置。當定義了錨點後，我們可以創建直接跳至該錨點（比如頁面中某個小節）的鏈接，這樣使用者就無需不停地滾動頁面來尋找他們需要的信息了。
在使用 a 元素創建錨點時，需要使用 name 屬性爲其命名，代碼如下所示：
<a name=”anchorname1”>錨點一</a>
然後就可以創建鏈接，直接跳轉到錨點，代碼如下所示：
<a href=”#anchorname1”>回到錨點一
1.6. 使用 ？
1.7. 列舉常用的結構標記，並描述其作用。
結構標記專門用於標識頁面的不同結構，相對於使用
常用的結構標記有：
<header> 元素：用於定義文檔的頁眉；<nav> 元素：用於定義頁面的導航鏈接部分；<section> 元素：用於定義文檔中的節，表示文檔中的一個具體的組成部分；<article> 元素：常用於定義獨立於文檔的其他部分的內容；<footer> 元素：常用於定義某區域的腳註信息；<aside> 元素：常用於定義頁面的一些額外組成部分，如廣告欄、側邊欄和相關引用信息等。
1.8. 超級鏈接有哪些常見的表現形式？
a元素用於創建超級鏈接，常見的表現形式有：
1、普通超級鏈接，語法爲：
<a href="" target="">文本</a>
2、下載鏈接，即目標文檔爲下載資源，語法如：
<a href="DAY02.zip">下載</a>
3、電子郵件鏈接，用於鏈接到 email，語法如：
<a href="mailto:[email protected]">聯繫我們</a>
4、空鏈接，用於返回頁面頂部，語法如：
<a href="#">...</a>
5、鏈接到 JavaScript，以實現特定的代碼功能，語法如：
<a href="javascript : …">JS 功能</a>
1.9. 簡要描述行內元素和塊級元素的區別。
塊級元素的前後都會自動換行，如同存在換行符一樣。默認情況下，塊級元素會獨佔一行。例如，
、、
行內元素可以和其他行內元素位於同一行，在瀏覽器中顯示時不會換行。例如，a、span 等。對於行內元素，不能設置其高度和寬度。
還有一種元素，爲行內塊級元素，比如 img 、input 元素等。這些元素可以和其他行內元素位於同一行，同時可以設置其高度和寬度。
1.10.表單向服務器提交數據有幾種方式？這些方式有什麼區別？
將表單數據發送給服務器的常用方式有兩種：Get 和 Post。
瀏覽器發送給服務器的 HTTP 請求分爲請求頭（header）和請求主體（body）兩部分。
其中，必須包含頭部分，用於指定發送請求的方式、目的地以及其他關鍵信息；而主體是可選的。在頭數據和主體數據之間用一個空白行來隔開。
比如，需要發送請求到頁面 GetStockPrice.php，且需要附帶數據 Symbol=MSFT。
那麼如果使用 Get 方式發送數據，則簡化後的請求數據內容如下所示：
GET /Trading/GetStockPrice.aspx?Symbol=MSFT HTTP/1.1
Host: localhost
如果使用 Post 方式發送數據，則簡化後的請求數據內容如下所示：
POST /Trading/GetStockPrice.aspx HTTP/1.1
Host: localhost
Content-Type: application/x-www-form-urlencoded
Content-Length: 11
Symbol=MSFT
由此可見，兩種方式的區別主要在於發送數據方式不同。
使用 Get 方式向服務器發送表單數據時，表單數據將附加在 URL 屬性的末端；採用
POST 方法發送數據時，數據會放置在主體中發送。
CSS3 基礎
2.1. link 和@import 都可以爲頁面引入 CSS 文件，其區別是？
將樣式定義在單獨的.css 的文件裏，link 和@import 都可以在 html 頁面引入 css 文
件。有 link 和@import 兩種方式，導入方式如下
link 方式：
2.2. 如何理解 CSS 樣式表的層疊性？
CSS 使用層疊（Cascade）的原則來考慮繼承、層疊次序和優先級等重要特徵，從而判斷相互衝突的規則中哪個規則應該起作用。
繼承性是指，許多 CSS 的樣式規則不但影響選擇器所定義的元素，而且會被這些元素的後代繼承。
層疊性是指，當一個 Web 頁面使用多個樣式表，多個樣式表中的樣式可層疊爲一個。在多個樣式表之間所定義的樣式沒有衝突的時候，瀏覽器會顯示所有的樣式。
優先級是指，當發生樣式定義衝突時，瀏覽器首先會按照不同樣式規則的優先級來應用
樣式。CSS 樣式的優先級如下所示（其中數字 3 擁有最高的優先權）：
- 瀏覽器缺省設置；
- 外部樣式表（.css 文件）或者內部樣式表（位於 元素內部）；
- 內聯樣式（作爲某個元素的 style 屬性的值）。
同等優先級下，以最後定義的樣式爲準，important 比內聯高。
2.3. 哪些屬性可以繼承？
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、color；
2）列表相關屬性：list-style-image、list-style-position、list-style-type、list-style；
3）表格相關屬性：border-collapse、border-spacing、caption-side、table-layoute；
4）其他屬性：Cursor、visibility。
2.4. CSS 選擇器中，元素選擇器和類選擇器的區別是什麼？
元素選擇器是最常見的 CSS 選擇器，即，文檔的元素就是最基本的選擇器。選擇器通常是某個 HTML 元素，比如 p、h1、em、a等，甚至可以是 元素本身。
類選擇器用於將樣式規則與附帶 class 屬性的元素匹配，其中該 class 屬性的值爲類選
擇器中指定的值。使用類選擇器時，首先需要定義樣式類，其語法爲：
.className { }所有能夠附帶 class 屬性的元素都可以使用此樣式聲明。只需要將 class 屬性的值設置爲“className”，則可以將類選擇器的樣式與元素關聯。
在實際使用時，如果需要爲某種元素定義樣式，則往往使用元素選擇器；如果要應用樣式而不考慮具體設計的元素，最常用的方法就是使用類選擇器。
2.5. 簡要描述 CSS 中的定位機制。
CSS 中，除了默認的流定位方式以外，還有如下幾種定位機制：浮動定位、相對定位、絕對定位和固定定位。
浮動定位是指將元素排除在普通流之外，並且將它放置在包含框的左邊或者右邊，但是依舊位於包含框之內。
相對定位將元素相對於它在普通流中的位置進行定位。
絕對定位是指將元素的內容從普通流中完全移除，並且可以使用偏移屬性來固定該元素的位置。
固定定位是指將元素的內容固定在頁面的某個位置。
2.6. display 屬性 和 visibility 屬性的區別？
可以使用 display 屬性定義建立佈局時元素生成的顯示框類型。
- 如果將 display 屬性設置爲 block，可以讓行內元素（比如 元素）表現得像塊級元素一樣；
- 如果將 display 屬性設置爲 inline，可以讓塊級元素（比如
元素）表現得像內聯元素一樣；
- 可以通過把 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:0px auto。
則可以實現 div 居中顯示。
對於浮動元素，設置其左右外邊距爲關鍵字 auto 是無效的。此時，如果需要設置其居中顯示，可以：
1、 精確計算其左外邊距並進行設置，實現居中顯示；
2、 使用一個居中顯示的 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 Sprites 是一種網頁圖片應用處理方式，就是把網頁中一些背景圖片整合到一張圖片 文 件 中 ， 再 利 用 CSS 的 “background-image” ， “background- repeat” ，“background-position”的組合進行背景定位。
其優點在於：
減少網頁的 http 請求，提高性能，這也是 CSS Sprites 最大的優點，也是其被廣泛傳播和應用的主要原因；
減少圖片的字節：多張圖片合併成 1 張圖片的字節小於多張圖片的字節總和；
減少了命名困擾：只需對一張集合的圖片命名，不需要對每一個小元素進行命名提高製作效率；
更換風格方便：只需要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就可以改變，維護起來更加方便。
誠然 CSS Sprites 是如此的強大，但是也存在一些不可忽視的缺點：
圖片合成比較麻煩；
背景設置時，需要得到每一個背景單元的精確位置；
維護合成圖片時，最好只是往下加圖片，而不要更改已有圖片。
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:#00deff\9; /IE6、7、8識別/
+background-color:#a200ff;/IE6、7識別/
_background-color:#1e0bd1;/IE6識別/
}
另外，對於特定的兼容性問題，特殊解決。常見的特殊問題有：
1、使用 CSS reset：對於有些 HTML 標籤，瀏覽器默認的 margin 和 padding 不同，可以使用 CSS 代碼改寫默認的樣式效果，從而實現統一；
2、IE 低版本中，不能使用 auto 關鍵字實現塊級元素居中顯示，可以改用設置父元素的 text-align；
3、子元素設置上外邊距時，父元素需要設置邊框或者外邊距；
4、外邊距合併問題。
