web前端面試官會問什么?這個也要分人分基礎，如果你是應屆生的話，面試官可能會問一些偏重書本上的知識，如果你有工作經驗，面試官可能會問一些與項目結合的問題來了解你的技術水平、邏輯思維以及學習狀態。

　　1.什么是盒子模型?盒子模型有哪些類型?如何計算?

　　css中所有的html元素都可以看成一個盒子，盒子模型包括margin border padding content

　　盒子模型分為兩類：W3C盒子模型和IE盒子模型。

　　W3C盒子計算：margin+border+padding+width

　　IE盒子計算： margin+width

　　2.描述cookies、sessionStorage和localStorage的區別

　　(1)數據存儲大小限制不同。

　　cookies：數據始終攜帶在同源https請求中，即cookies可以在服務器和瀏覽器之間傳回。所以存儲的數據量最小，一般為4096B。

　　sessionStorage：數據存儲在本地，不會自動發送到服務器。一般5M以上

　　localStorage：數據存儲在本地，不會自動發送到服務器。一般5M以上

　　(2)數據有效期不同。

　　Cookies：數據在 cookie 設置的過期日期之前有效，即使窗口和瀏覽器已關閉。

　　sessionStorage：關閉瀏覽器窗口后自動清除數據。存儲的數據只在同一個源窗口有效，即使在不同瀏覽器的同一個頁面也是無效的，一般用于session數據的存儲

　　localStorage：一直有效，所以作為持久化數據使用

　　(3)數據范圍不同。

　　cookies、localStorage：在所有同源窗口之間敏感共享

　　sessionStorage：不再在不同瀏覽器窗口之間共享

　　同源窗口共享是一款連接PC和移動設備的軟件。使用同源窗口共享，您可以輕松地在 PC 和移動設備之間共享屏幕內容和數據。

　　3.什么是內聯元素?什么是塊級元素?什么是空(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。

　　4. 'data-attribute' 的目的是什么?

　　data-attribute是html5引入的新特性。前端開發者可以使用它來設置需要的自定義屬性來存儲一些數據。當然，在高級瀏覽器中，可以通過 JS 腳本進行定義和數據訪問。

　　5.iframe 有什么作用?的優點和缺點?

　　iframe稱為內嵌框架，用于為文本或圖形設置浮動框架或容器;

　　優點是：

　?、?iframe可以完整顯示嵌入的網頁。

　?、?如果有多個網頁引用了iframe，只需要修改iframe的內容就可以改變每個被調用頁面的內容，方便快捷。

　?、?。如果網頁為了統一樣式而有相同的header和version，可以寫成一個page，用iframe嵌套，這樣可以增加代碼的復用性。

　?、?可以解決圖標、廣告等第三方內容加載緩慢的問題。

　?、荨Ｖ匦录虞d頁面時，不需要重新加載整個頁面，只需要重新加載頁面中的一幀頁面，減少了數據的傳輸，提高了網頁的下載速度

　　缺點是：

　?、?。頁面樣式調試比較麻煩，會有多個滾動條，而且會生成多個頁面，不好打印;

　?、?瀏覽器的返回按鈕不可用;

　?、邸Ｈ绻?iframe 標簽過多，會增加服務器的 HTTP 請求;

　?、?小型移動設備無法充分顯示邊框，即設備兼容性差;

　?、?代碼復雜，部分搜索引擎無法解析。

　　6.您如何優化您的網站文件和資源?

　　文件合并、文件壓縮、使用cdn(內容分發網絡)托管您的資產、使用緩存、優化元標記、啟用css/js文件的Gzip壓縮

　　將css/js文件放在外部文件中，避免寫在同一個頁面，引用時把css放在最上面，把js放在最下面等等。

　　7.常見的瀏覽器兼容性問題?您使用哪些瀏覽器來調試您的項目?他們的核心是什么?

　　①不同瀏覽器的標簽默認的外補丁(margin)和內補丁(padding)是不同的;

　　②圖片之間有默認間距;

　?、圻吘嘀丿B問題;當相鄰的兩個元素都設置了邊距時，邊距取最大值，舍棄最小值;

　?、軆蓚€塊級元素，父元素設置為overflow:auto;子元素設置為位置：相對;并且高度大于父元素，在IE6、IE7中會隱藏而不是溢出;

　?、軮E9以下的瀏覽器不能使用不透明度;

　?、蕻敇撕灥母叨仍O置為小于10px時，會超過自己在IE中設置的高度6、IE7;

　　⑦IE6雙邊距問題;如果在IE6中設置了float，同時設置了margin，就會出現margin問題。

　　使用谷歌瀏覽器、QQ瀏覽器、火狐瀏覽器，內核分別為Webkit、webkit和IE內核、Gecko內核

　　8.javascript 數據類型：

　　值類型(基本類型)：String、Number、Boolean、Null、Undefined、Symbol。

　　參考數據類型：對象(Object)、數組(Array)、函數(Function)。

　　9.js中var和let與const的區別

　　var聲明的變量屬于函數作用域，let和const聲明的變量屬于塊作用域;

　　Var有變量提升的現象，而let和const則沒有;

　　var變量可以重復聲明，而在同一個塊級作用域內，let變量不能重新聲明，const變量不能修改。

　　10.有哪些方法可以清除浮標?

　　(1)父div定義overflow：隱藏

　　(2)在clear末尾添加一個空div標簽：both

　　(3)父div定義height

　　(4)父div定義overf：auto

　　(5)使用偽元素，父div定義偽類：after(必須設置內容)

　　上述知識列舉了一些常見的web前端面試官會問什么的問題，供大家參考，實際面試時可能被問到的問題比這要多得多，同學們還是要多看多積累。更多關于“web前端培訓”的問題，歡迎咨詢千鋒教育在線名師。千鋒教育多年辦學，課程大綱緊跟企業需求，更科學更嚴謹，每年培養泛IT人才近2萬人。不論你是零基礎還是想提升，都可以找到適合的班型，千鋒教育隨時歡迎你來試聽。