精選前端面試題之HTML5/CSS3（20道）

1.xhtml和html有什麼區別？

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

二、什麼是盒子模型？

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

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

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

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

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

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

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

六、CSS實現垂直水平居中

一道經典的問題，實現方法有不少種，如下是其中一種實現：
HTML結構：

<div class="wrapper">
        <div class="content"></div>
    </div>

CSS：

.wrapper {
      position: relative;
      width: 500px;
      height: 500px;
      background-color: #ddd;
     }
    .content{
        background-color:#6699FF;
        width:200px;
        height:200px;
        position: absolute;        //父元素須要相對定位
        top: 50%;
        left: 50%;
        margin-top:-100px ;   //二分之一的height，width
        margin-left: -100px;
    }

 

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

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

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

 

8.CSS選擇符有哪些?哪些屬性能夠繼承?優先級算法如何計算?內聯和important哪一個優先級高?

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

9.前端頁面有哪三層構成，分別是什麼?做用是什麼?

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

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

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

11.你作的頁面在哪些流覽器測試過?這些瀏覽器的內核分別是什麼?

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

十二、px和em的區別

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

1三、什麼叫優雅降級和漸進加強？

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

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

區別：

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

b. 漸進加強則是從一個很是基礎的，可以起做用的版本開始，並不斷擴充，以適應將來環境的須要

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瀏覽器。具體寫法可參照如下示例。使用中需注意如下幾點。1、該方法中必須爲須要清除浮動元素的僞對象中設置 height:0，不然該元素會比實際高出若干像素；