1.瀏覽器本地儲存

瀏覽器本身為js提供了兩個本地儲存的方式，一個是localstorage，一個是sessionstorage.

(1)sessionstorage是本地儲存的一段對話中的資料，只有在同一個頁面會話時才會訪問sessionstorage並且當該回    話結束以後sessionstorage也會隨之銷燬。比如經常會用到的用sessionstorage來獲取設定滾輪的位置

(2)localstorage是本地永久儲存的一段資料，除非使用者主動刪除這些資料，否則就永遠儲存在本地，最常見的就是    在google瀏覽器中，第一次登入某網頁後記住密碼，第二次就可以不用輸密碼。

2.display:none和visibility:hidden的區別

紅色、藍色、綠色三個方塊在頁面上一豎排顯示，當藍色的方塊設定display:none;時，你會看到藍色的方塊消失，並且被綠色方塊代替，藍色方塊被隱藏起來，而且它所佔的空間也隨之消失不見。當設定為visibility:hidden;時紅色綠色方塊原地不動，藍色方塊消失，藍色方塊隱藏起來，整個頁面分配給它的位置還留在這裡。也可以比喻為一列學生坐在板凳上在學校操場看戲，一個學生被display:none;，請假回家隊伍沒有他的位置，一個學生被visibility:hidden;上廁所去了可能馬上回來，隊伍裡還有他的板凳

3.link和@import區別

(1)link標籤不僅可以引入css檔案還可以引入/favorite.icon等檔案

(2)link標籤引入的css檔案，在整個頁面載入的時候同時載入樣式，而@import則是在整個頁面的html內容載入完    了以後才開始載入樣式的

(3)@import支援IE5以上的瀏覽器

(4)js在進行DOM操作改變樣式的時候只能改變用link標籤引用的css檔案

(5)link方式的樣式的權重高於@import的權重

4.html常見的相容性問題以及解決方案

(1)IE6雙倍邊距bug

      當頁面上的元素使用float浮動時，不管是向左還是向右浮動；只要該元素帶有margin畫素都會使該值乘以2，例如“margin-left:10px” 在IE6中，該值就會被解析為20px。

想要解決這個BUG就需要在該元素中加入display:inline 或 display:block 明確其元素型別即可解決雙倍邊距的BUG。

(2)IE6中3畫素問題

當元素使用float浮動後，元素與相鄰的元素之間會產生3px的間隙。詭異的是如果右側的容器沒設定高度時3px的間隙在相鄰容器的內部，當設定高度後又跑到容器的相反側了。

要解決這類BUG的話，需要使佈局在同一行的元素都加上float浮動。

(3)奇數寬高Bug

IE6中奇數的高寬顯示大小與偶數高寬顯示大小存在一定的不同。其中要問題是出在奇數高寬上。

要解決此類問題，只需要儘量將外部定位的div高寬寫成偶數即可。

(4)IE6中圖片連結的下方有間隙

IE6中圖片的下方會存在一定的間隙，尤其在圖片垂直挨著圖片的時候，即可看到這樣的間隙。

要解決此類問題，需要將img標籤定義為display:block 或定義vertical-align對應的屬性。也可以為img對應的

樣式寫入font-size:0

(5)IE6下空元素的寬高Bug

解決的方法有四種:

1.在元素的css中加入：overflow:hidden

2.在元素中插入html註釋：<!– >

3.在元素中插入html的空白符： 

4.在元素的css中加入：font-size:0

(6)重複文字Bug

在某些比較複雜的排版中，有時候浮動元素的最後一些字元會出現在clear清除元素的下面。

解決方法如下：

1.確保元素都帶有display:inline

2.在最後一個元素上使用“margin-right:-3px

3.為浮動元素的最後一個條目加上條件註釋，<!–[if !IE]>xxx<![endif]–>

4.在容器的最後元素使用一個空白的div，為這個div指定不超過容器的寬度。

5.清除浮動的技巧

(1)父級div定義height；

優點：簡單，程式碼少；

缺點：只適合高度固定的佈局，要給出精確的高度，如果高度和父級div不一樣時，會產生問題。

            (2)結尾處加空div標籤 clear:both ，新增一個空div，利用css提高的clear:both清除浮動，讓父級div能自動獲取高度

優點：簡單、程式碼少、瀏覽器支援好、不容易出現怪問題 ；

缺點：不少初學者不理解原理；如果頁面浮動佈局多，就要增加很多空div，讓人感覺很不好 

       (3)父級div定義 偽類:after 和 zoom ，IE8以上和非IE瀏覽器才支援:after，原理和方法2有點類似，zoom(IE轉有屬性)可解決ie6,ie7浮動問題

優點：瀏覽器支援好、不容易出現怪問題（目前：大型網站都有使用，如：騰迅，網易，新浪等等） ；

缺點：程式碼多、不少初學者不理解原理，要兩句程式碼結合使用才能讓主流瀏覽器都支援。 

       (4)父級div定義overflow:hidden ，必須定義width或zoom:1，同時不能定義height，使用overflow:hidden時，瀏覽   器會自動檢查浮動區域的高度 ；

優點：簡單、程式碼少、瀏覽器支援好 ；

缺點：不能和position配合使用，因為超出的尺寸的會被隱藏。 

       (5)父級div定義overflow:auto ，必須定義width或zoom:1，同時不能定義height，使用overflow:auto時，瀏覽器會   自動檢查浮動區域的高度 ；

優點：簡單、程式碼少、瀏覽器支援好 ；

缺點：內部寬高超過父級div時，會出現滾動條。