HTML/CSS部分常見面試題

　　好程式員web前端教程分享HTML/CSS部分常見面試題。準備參加web前端面試的小夥伴們一起看一看吧，希望對大家有所幫助！

1、什麼是盒子模型?

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

2、行内元素有哪些?塊級元素有哪些? 空(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

3、CSS實作垂直水準居中

一道經典的問題，實作方法有很多種，以下是其中一種實作：

HTML結構：

CSS：

.wrapper{position:relative;}

.content{

width:200px;

height:200px;

position: absolute; //父元素需要相對定位

top: 50%;

left: 50%;

margin-top:-100px ; //二分之一的height，width

margin-left: -100px;

}

4、簡述一下src與href的差別

href 是指向網絡資源所在位置，建立和目前元素(錨點)或目前文檔(連結)之間的連結，用于超連結。

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

5、什麼是CSS Hack?

一般來說是針對不同的浏覽器寫不同的CSS,就是 CSS Hack。

IE浏覽器Hack一般又分為三種，條件Hack、屬性級Hack、選擇符Hack(詳細參考CSS文檔：css文檔)。例如：

// 1、條件Hack

// 2、屬性Hack

.test{

color:#0909; / For IE8+ /

color:#f00; / For IE7 and earlier */

_color:#ff0; / For IE6 and earlier /

// 3、選擇符Hack

• html .test{color:#090;} / For IE6 and earlier /

• • html .test{color:#ff0;} / For IE7 /

6、簡述同步和異步的差別

同步是阻塞模式，異步是非阻塞模式。

同步就是指一個程序在執行某個請求的時候，若該請求需要一段時間才能傳回資訊，那麼這個程序将會一直等待下去，直到收到傳回資訊才繼續執行下去;

異步是指程序不需要一直等下去，而是繼續執行下面的操作，不管其他程序的狀态。當有消息傳回時系統會通知程序進行處理，這樣可以提高執行的效率。

7、px和em的差別

px和em都是長度機關，差別是，px的值是固定的，指定是多少就是多少，計算比較容易。em得值不是固定的，并且em會繼承父級元素的字型大小。

浏覽器的預設字型高都是16px。是以未經調整的浏覽器都符合: 1em=16px。那麼12px=0.75em, 10px=0.625em

8、什麼叫優雅降級和漸進增強?

漸進增強 progressive enhancement：

針對低版本浏覽器進行建構頁面，保證最基本的功能，然後再針對進階浏覽器進行效果、互動等改進和追加功能達到更好的使用者體驗。

優雅降級 graceful degradation：

一開始就建構完整的功能，然後再針對低版本浏覽器進行相容。

差別：

1. 優雅降級是從複雜的現狀開始，并試圖減少使用者體驗的供給

1. 漸進增強則是從一個非常基礎的，能夠起作用的版本開始，并不斷擴充，以适應未來環境的需要

1. 降級(功能衰減)意味着往回看;而漸進增強則意味着朝前看，同時保證其根基處于安全地帶

9、浏覽器的核心分别是什麼?

IE: trident核心

Firefox：gecko核心

Safari：webkit核心

Opera：以前是presto核心，Opera現已改用Google Chrome的Blink核心

Chrome：Blink(基于webkit，Google與Opera Software共同開發)