前端實習遇到的面試題及答案(一)

阿新 • • 發佈：2019-01-18

1.請你描述一下什麼是盒模型，以及如何在 CSS 中告訴瀏覽器使用不同的盒模型來渲染你的佈局。

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

盒模型主要分為兩類：W3C標準盒子模型和IE盒子模型，在編寫頁面程式碼的時候應該儘量使用標準的W3C盒子模型，可在頁面中宣告DOCTYPE型別，將頁面設定為"標準模式"(解決相容性最簡潔和值得推薦的方式)，在頁面開頭加上：

<!DOCTYPE html>

標準模型-width與height按照content寬高計算，而IE模型-width與height則按照content+padding+border計算；

* {
    box-sizing：content-box; // 標準盒模型
    box-sizing：border-box;  // IE盒模型
}

2.請描述cookies、sessionStorage和localStorage的區別（每次筆試都能遇到）

①.資料儲存大小限制不同。
cookies：資料始終在同源的http請求中攜帶，即cookie能在伺服器和瀏覽器間回傳。故儲存的資料大小最小，一般為4096B。
sessionStorage：資料儲存在本地，不會自動發給伺服器。所以一般5M或者更大。
localStorage：資料儲存在本地，不會自動發給伺服器。所以一般5M或者更大。
②.資料有效期不同
cookies：資料在cookie設定的有效期之前都有效，即使視窗和瀏覽器關閉。
sessionStorage：資料在關閉瀏覽器視窗後自動清除。儲存的資料僅在同源視窗內有效，即使在不同瀏覽器相同頁面也是無效的。一般用於儲存會話資料。
localStorage：始終有效，因此用作持久資料。
③.資料作用域不同
cookies、localStorage：在所有同源視窗敏感詞享。

sessionStorage：不在不同瀏覽器視窗敏感詞享。

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.如何居中一個浮動元素？

.content{
            height: 任意px;
            width: 任意px;
            border: 1px solid red;
            /*垂直居中*/
            display: table-cell;
            vertical-align: middle;
        }
        .left{
            height:Npx;
            width: Npx;
            border: 1px dashed blue;
            /*水平居中，但設定浮動後失效
            margin: 0 auto;*/
            float: left;
            /*水平居中*/
            margin-left: 50%;
            position: relative;
            left: -(N/2)px;
        }

5.'data-屬性'的作用是什麼？

data-屬性為html5推出的一個新功能，前端開發者可以利用其設定需要的自定義屬性，來進行一些資料的存放。當然，在高階瀏覽器下可通過JS指令碼進行定義和資料的存取。

6.iframe有什麼作用？優缺點？

iframe被稱作嵌入式框架，用於設定文字或圖形的浮動圖文框或容器；

優點有：

①.iframe能夠原封不動的把嵌入的網頁展現出來。

②.如果有多個網頁引用iframe，那麼只需要修改iframe的內容，就可以實現呼叫的每一個頁面內容的更改，方便快捷。

③.網頁如果為了統一風格，頭部和版本都是一樣的，就可以寫成一個頁面，用iframe來巢狀，可以增加程式碼的可重用性。

④.可以解決第三方內容如圖示和廣告載入緩慢的問題。

⑤.過載頁面時不需要過載整個頁面，只需要過載頁面中的一個框架頁，減少了資料的傳輸，增加了網頁下載速度

缺點有：

①.頁面樣式除錯麻煩，會出現多個滾動條，併產生多個頁面，不容易列印；

②.瀏覽器的後退按鈕不可用；

③.若有過多iframe標籤會增加伺服器的HTTP的請求；

④.小型的移動裝置無法完全顯示框架，即裝置相容性差；

⑤.程式碼複雜，某些搜尋引擎無法解讀。

7.你如何對網站的檔案和資源進行優化？

檔案合併、檔案壓縮、使用cdn(內容分發網路)託管您的資源、使用快取、優化meta標籤、啟用Gzip壓縮css/js檔案

將css/js檔案放在外部檔案中，避免寫在同一頁面中，引用時將css放在最上面，js放在最下面等

8.常見的瀏覽器的的相容問題？你使用過哪些瀏覽器除錯你的專案？它們的核心分別是？

①不同瀏覽器的標籤預設的外補丁( margin )和內補丁(padding)不同；
②圖片之間預設有間距；
③邊距重疊問題；當相鄰兩個元素都設定了margin 邊距時，margin 將取最大值，捨棄最小值；
④兩個塊級元素，父元素設定了overflow:auto；子元素設定了position:relative ;且高度大於父元素，在IE6、IE7會被隱藏而不是溢位；
⑤IE9以下版本瀏覽器不能使用opacity；
⑥當標籤的高度設定小於10px，在IE6、IE7中會超出自己設定的高度；

⑦IE6雙邊距問題；在 IE6中設定了float , 同時又設定margin , 就會出現邊距問題。

用過Google Chrome、QQ瀏覽器以及Firefox瀏覽器，它們的核心分別是Webkit、webkit和IE的核以及Gecko核心

前端實習遇到的面試題及答案(一)

前端實習遇到的面試題及答案(一)

經典的一套SQL面試題及答案

近5年常考Java面試題及答案整理（一）

面試第一家公司的面試題及答案（一）

2018最新Web前端經典面試題及答案

2018年web前端經典面試題及答案

通往 BATJ 的 160 道 Java 面試題及答案（一）

前端十個基礎面試題及答案

PHP面試題及答案解析(8)—PHP綜合應用題

100+經典Java面試題及答案解析

JavaScript基本的面試題及答案

史上最全Java多線程面試題及答案

Linux必問面試題，雲計算面試題及答案

15個頂級Java多線程面試題及答案

軟件測試面試題及答案【匯總】

關於H5的20道面試題及答案

C# 面試題及答案31-60

C#經典面試題及答案

Java 多執行緒面試題及答案（非常全面）

華為的JAVA面試題及答案（部分）

前端實習遇到的面試題及答案(一)

相關推薦