精選前端面試題之HTML5/CSS3

1、xhtml和html有什么區別？

HTML是一種基本的WEB網頁設計語言，XHTML是一個基于XML的置標語言 最主要的不同： XHTML 元素必須被正確地嵌套。 XHTML 元素必須被關閉。 標簽名必須用小寫字母。 XHTML 文檔必須擁有根元素。

2、什么是盒子模型？

在網頁中，一個元素占有空間的大小由幾個部分構成，其中包括元素的內容（content），元素的內邊距（padding），元素的邊框（border），元素的外邊距（margin）四個部分。這四個部分占有的空間中，有的部分可以顯示相應的內容，而有的部分只用來分隔相鄰的區域或區域。4個部分一起構成了css中元素的盒模型。

3、對WEB標準以及W3C的理解與認識？

標簽閉合、標簽小寫、不亂嵌套、提高搜索機器人搜索幾率、使用外 鏈css和js腳本、結構行為表現的分離、文件下載與頁面速度更快、內容能被更多的用戶所訪問、內容能被更廣泛的設備所訪問、更少的代碼和組件，容易維 護、改版方便，不需要變動頁面內容、提供打印版本而不需要復制內容、提高網站易用性；

4、行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？

行內元素：a、b、span、img、input、strong、select、label、em、button、textarea 塊級元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote 空元素：即系沒有內容的HTML元素，例如：br、meta、hr、link、input、img

5、CSS引入的方式有哪些? link和@import的區別是?

內聯 內嵌 外鏈 導入 區別 ：同時加載 前者無兼容性，后者CSS2.1以下瀏覽器不支持 Link 支持使用javascript改變樣式，后者不可

6、CSS實現垂直水平居中

一道經典的問題，實現方法有很多種?

7、簡述一下src與href的區別

href 是指向網絡資源所在位置，建立和當前元素（錨點）或當前文檔（鏈接）之間的鏈接，用于超鏈接。

src是指向外部資源的位置，指向的內容將會嵌入到文檔中當前標簽所在位置；在請求src資源時會將其指向的資源下載并應用到文檔內，例如js腳本，img圖片和frame等元素。當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源加載、編譯、執行完畢，圖片和框架等元素也如此，類似于將所指向資源嵌入當前標簽內。這也是為什么將js腳本放在底部而不是頭部。

8、CSS選擇符有哪些?哪些屬性可以繼承?優先級算法如何計算?內聯和important哪個優先級高?

標簽選擇符 類選擇符 id選擇符 繼承不如指定 Id>class>標簽選擇 后者優先級高

9、前端頁面有哪三層構成，分別是什么?作用是什么?

結構層 Html 表示層 CSS 行為層 js

10、簡述同步和異步的區別

同步是阻塞模式，異步是非阻塞模式。 同步就是指一個進程在執行某個請求的時候，若該請求需要一段時間才能返回信息，那么這個進程將會一直等待下去，直到收到返回信息才繼續執行下去； 異步是指進程不需要一直等下去，而是繼續執行下面的操作，不管其他進程的狀態。當有消息返回時系統會通知進程進行處理，這樣可以提高執行的效率。

11、你做的頁面在哪些流覽器測試過?這些瀏覽器的內核分別是什么?

Ie(Ie內核) 火狐（Gecko） 谷歌（webkit） opear(Presto)

12、px和em的區別

px和em都是長度單位，區別是，px的值是固定的，指定是多少就是多少，計算比較容易。em得值不是固定的，并且em會繼承父級元素的字體大小。 瀏覽器的默認字體高都是16px。所以未經調整的瀏覽器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em

13、什么叫優雅降級和漸進增強？

漸進增強 progressive enhancement： 針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。

優雅降級 graceful degradation： 一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容。

區別：

a. 優雅降級是從復雜的現狀開始，并試圖減少用戶體驗的供給

b. 漸進增強則是從一個非?；A的，能夠起作用的版本開始，并不斷擴充，以適應未來環境的需要

c. 降級（功能衰減）意味著往回看；而漸進增強則意味著朝前看，同時保證其根基處于安全地帶

14、什么是語義化的HTML?

直觀的認識標簽 對于搜索引擎的抓取有好處

15、描述css reset的作用和用途。

Reset重置瀏覽器的css默認屬性 瀏覽器的品種不同，樣式不同，然后重置，讓他們統一

16、解釋css sprites，如何使用。

Css 精靈 把一堆小的圖片整合到一張大的圖片上，減輕服務器對圖片的請求數量

17、display:none和visibility:hidden的區別？

display:none隱藏對應的元素，在文檔布局中不再給它分配空間，它各邊的元素會合攏， 就當他從來不存在。

visibility:hidden隱藏對應的元素，但是在文檔布局中仍保留原來的空間。

18、介紹一下CSS的盒子模型？

1）有兩種， IE 盒子模型、標準 W3C 盒子模型；IE的content部分包含了 border 和 pading; 2）盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border).

19、CSS3有哪些新特性？

CSS3實現圓角（border-radius），陰影（box-shadow）， 對文字加特效（text-shadow、），線性漸變（gradient），旋轉（transform） transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉,縮放,定位,傾斜 增加了更多的CSS選擇器 多背景 rgba 在CSS3中唯一引入的偽元素是::selection. 媒體查詢，多欄布局 border-image

20、解釋下浮動和它的工作原理？清除浮動的技巧

浮動元素脫離文檔流，不占據空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留。

1.使用空標簽清除浮動。 這種方法是在所有浮動標簽后面添加一個空標簽 定義css clear:both. 弊端就是增加了無意義標簽。 2.使用overflow。 給包含浮動元素的父標簽添加css屬性 overflow:auto; zoom:1; zoom:1用于兼容IE6。 3.使用after偽對象清除浮動。 該方法只適用于非IE瀏覽器。具體寫法可參照以下示例。使用中需注意以下幾點。一、該方法中必須為需要清除浮動元素的偽對象中設置 height:0，否則該元素會比實際高出若干像素