前端開發常見筆試/面試題總結 -- HTML / CSS篇

時間 2019-11-16

標籤前端開發常見筆試面試總結 html css 欄目快樂工作简体版

原文原文鏈接

室友同爲前端開發，最近在他找工做的時候，討論到了常見的前端筆試題和麪試題，今天就來總結一下以前校招和社招時頻繁遇到的面試題。css

iframe 有哪些缺點?

頁面看起來較雜亂，不易管理，佈局不佳，易分散用戶注意力
搜索引擎的檢索程序沒法解讀這種頁面，不利於SEO
移動設備兼容性差
會增長http請求，對服務器形成負擔
會阻塞主頁面的Onload事件
和主頁面共享鏈接池，而瀏覽器對相同域的鏈接有限制，因此會影響頁面並行加載

cookie和localStorage、seesionStorage的區別是什麼？

共同點是都保存在瀏覽器端，區別以下：html

cookies是爲了標識用戶身份而存儲在本地的數據，會隨http請求一同發送到服務器，而localStorage和sessionStorage僅在本地保存，不會自動把數據發給服務器
cookie保存的數據不超過4k，而localStorage和sessionStorage保存的數據可達到5M
cookie在過時以前一直有效，即便窗口或者瀏覽器關閉。localStorage始終有效，窗口和瀏覽器關閉也一直保存，用做長久數據保存，sessionStorage僅在瀏覽器窗口關閉以前有效。
cookie數據在全部同源窗口都共享。localStorage也是在全部同源窗口都共享，而sessionStorage不在不一樣的瀏覽器共享，即便同一頁面

多個標籤頁如何實現通訊？

localStorage：在window全局對象上添加監聽事件 window.onstorage = (e) => { console.log(e); }
webSocket協議
SharedWorker：webWorker只針對當前頁面，而SharedWorker則是多個標籤共享的worker

HTML5如何實現文件離線儲存？

在head中加入manifest屬性，它會請求manifest文件，第一次訪問時，瀏覽器會根據manifest文件的內容下載相應的資源，並進行離線存儲。若是已經訪問過而且資源已經離線存儲了，那麼瀏覽器就會使用離線的資源加載頁面。前端

實現不使用 border 畫出 1px 高的線

爲了在不一樣瀏覽器的標準模式與怪異模式下都能保持一致，可用如下方法：
一、使用divweb

<div style="width: 100%; height: 1px; background-color: black" />

二、使用hr，不建議直接使用size屬性，由於新的標準裏已經廢棄直接使用標準的方式面試

<hr style="height: 1px" />

如何實現垂直居中？

絕對定位：瀏覽器

main {
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate( -50%, -50% );
   }

flexbox佈局：服務器

display: flex, justify-content: center, align-items: center

box佈局:cookie
```
box-align: center; box-pack: center
```

什麼是標準模式和怪異模式？如何應對？

標準模式又稱嚴格模式，瀏覽器使用 W3C 的標準解析渲染頁面
怪異模式又稱混雜模式，瀏覽器都按照本身的方式解析渲染頁面，在不一樣的瀏覽器網頁會顯示不一樣的樣式session

最好的方法就是添加了文檔類型聲明，好比<!DOCTYPE html>，瀏覽器會用W3C的標準來渲染網頁佈局

如何解決兩個元素的重疊問題(外邊距合併)？

外邊距合併(疊加)：當兩個垂直(不包含水平)外邊距相遇時，它們將造成一個外邊距。合併後的外邊距的高度取外邊距高度中的較大者。

一上一下會合並；
一內一外也會合並；
自身(沒有邊框或填充時)的margin-top和margin-bottom也會合並

方法：能夠用BFC的方式解決，所謂的BFC就是css佈局的一個概念，是一塊區域，一個環境。

margin穿透：能夠將父級元素設置爲一個獨立的BFC，子級元素的margin值就不會溢出父級，咱們這裏對父級元素應用樣式overflow: hidden
margin重疊：也就是兩個平級的元素髮生重疊的情形，咱們能夠將兩個div套上一個BFC的外殼，這樣兩個BFC的內部元素就不會互相影響了

在頁面上實現一個圓形的可點擊區域

SVG方式：同理相似的用<area>的方式也能夠
CSS方式：border-radius: 50%
JS方式：先繪製一個正方形，js檢測鼠標位置是否在圓上

常見的SEO方法有哪些？

頁面佈局，重要的東西要提早。
文章關鍵詞的分佈（在麪包屑以及側邊欄適當的調用文章標題來提升關鍵詞密度）
文章內容能夠在源碼中寫在側邊欄的前面，以後用float: right浮動到右邊便可
圖片處理（圖片作壓縮，調用圖片用div + css來調用，同時添加alt屬性。）
圖片添加alt屬性，（搜索引擎蜘蛛沒法抓取圖片內容）
頁面的大小控制
將腳本放在底部

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。