經常被問到的面試題1
行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？
CSS規範規定，每個元素都有display屬性，確定該元素的型別，每個元素都有預設的display值，如div的display預設值為“block”，則為“塊級”元素；span預設display屬性值為“inline”，是“行內”元素。
（1）行內元素有：a b span img input select strong（強調的語氣）
（2）塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
（3）常見的空元素：
    <br> <hr> <img> <input> <link> <meta>

頁面匯入樣式時，使用link和@import有什麼區別？
 

（1）link屬於XHTML標籤，除了載入CSS外，還能用於定義RSS, 定義rel連線屬性等作用；而@import是CSS提供的，只能用於載入CSS;
（2）頁面被載入的時，link會同時被載入，而@import引用的CSS會等到頁面被載入完再載入;
（3）import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標籤，無相容問題;

介紹一下你對瀏覽器核心的理解？
主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
渲染引擎：負責取得網頁的內容（HTML、XML、影象等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，然後會輸出至顯示器或印表機。瀏覽器的核心的不同對於網頁的語法解釋會有不同，所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網路內容的應用程式都需要核心。
JS引擎則：解析和執行javascript來實現網頁的動態效果。
最開始渲染引擎和JS引擎並沒有區分的很明確，後來JS引擎越來越獨立，核心就傾向於只指渲染引擎。

常見的瀏覽器核心有哪些？
 

Trident核心：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]
Gecko核心：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto核心：Opera7及以上。 [Opera核心原為：Presto，現為：Blink;]
Webkit核心：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]



瀏覽器是怎麼對HTML5的離線儲存資源進行管理和載入的呢？
線上的情況下，瀏覽器發現html頭部有manifest屬性，它會請求manifest檔案，如果是第一次訪問app，那麼瀏覽器就會根據manifest檔案的內容下載相應的資源並且進行離線儲存。如果已經訪問過app並且資源已經離線儲存了，那麼瀏覽器就會使用離線的資源載入頁面，然後瀏覽器會對比新的manifest檔案與舊的manifest檔案，如果檔案沒有發生改變，就不做任何操作，如果檔案改變了，那麼就會重新下載檔案中的資源並進行離線儲存。
離線的情況下，瀏覽器就直接使用離線儲存的資源。

請描述一下 cookies，sessionStorage 和 localStorage 的區別？
 

cookie是網站為了標示使用者身份而儲存在使用者本地終端（Client Side）上的資料（通常經過加密）。
cookie資料始終在同源的http請求中攜帶（即使不需要），記會在瀏覽器和伺服器間來回傳遞。
sessionStorage和localStorage不會自動把資料發給伺服器，僅在本地儲存。

儲存大小：
cookie資料大小不能超過4k。
sessionStorage和localStorage 雖然也有儲存大小的限制，但比cookie大得多，可以達到5M或更大。

有期時間：
localStorage 儲存持久資料，瀏覽器關閉後資料不丟失除非主動刪除資料；
sessionStorage 資料在當前瀏覽器視窗關閉後自動刪除。
cookie 設定的cookie過期時間之前一直有效，即使視窗或瀏覽器關閉


iframe有那些缺點？
*iframe會阻塞主頁面的Onload事件；
*搜尋引擎的檢索程式無法解讀這種頁面，不利於SEO;
*iframe和主頁面共享連線池，而瀏覽器對相同域的連線有限制，所以會影響頁面的並行載入。
使用iframe之前需要考慮這兩個缺點。如果需要使用iframe，最好是通過javascript
動態給iframe新增src屬性值，這樣可以可以繞開以上兩個問題。


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


如何居中div?如何居中一個浮動元素?(浮動元素導致display:block)
給div設定一個寬度，然後新增margin:0 auto屬性
div{
width:200px;
margin:0 auto;
}

列出display的值，說明他們的作用。position的值， relative和absolute定位原點是？
1.
block 象塊型別元素一樣顯示。
none 預設值。象行內元素型別一樣顯示。
inline-block 象行內元素一樣顯示，但其內容象塊型別元素一樣顯示。
list-item 象塊型別元素一樣顯示，並新增樣式列表標記。

2.
*absolute
生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。

*fixed （老IE不支援）
生成絕對定位的元素，相對於瀏覽器視窗進行定位。

*relative
生成相對定位的元素，相對於其正常位置進行定位。

* static 預設值。沒有定位，元素出現在正常的流中
*（忽略 top, bottom, left, right z-index 宣告）。

* inherit 規定從父元素繼承 position 屬性的值。

window.onload的執行時間？
必須等待網頁中所有內容載入完畢之後(包括圖片)才能執行


使用display:none和visibility:hidden隱藏的區別

display:none隱藏後不佔位，但取消隱藏後頁面會產生迴流;

visibility:hidden佔位，不會產生迴流