前端面試題 -- HTML+CSS

遊蕩de蝌蚪發表於2019-03-16
前端面試題HTMLCSS

前言

貌似又到了一年一度跑路跳槽的時刻，由於個人的一些原因最近也參加了很多面試，發現有很多基礎性的東西掌握程度還是不夠，故此想總結一下最近面試遇到的問題以及個人認為比較重要的東西，留給自己消化，也分享給有需要的小夥伴

GitHub完整版面試題，歡迎小夥伴們star關注

如果文章中有出現紕漏、錯誤之處，還請看到的小夥伴多多指教，先行謝過

好了，廢話不多說，以下 ↓

HTML

1. Doctype作用，HTML5 為什麼只需要寫 <!DOCTYPE HTML>

doctype是一種標準通用標記語言的文件型別宣告，目的是告訴標準通用標記語言解析器要使用什麼樣的文件型別定義（DTD）來解析文件.<!DOCTYPE>宣告必須是HTML文件的第一行，位於html標籤之前

HTML5不基於SGML，所以不需要引用DTD。在HTML5中<!DOCTYPE>只有一種

SGML: 標準通用標記語言,是現時常用的超文字格式的最高層次標準

2. 行內元素有哪些，塊級元素有哪些，空(void)元素有那些

行內元素：a span i img input select b 等

塊級元素：div ul ol li h1~h6 p table 等

空元素：br hr link 等

3. 簡述一下你對HTML語義化的理解

簡單來說，就是合適的標籤做合適的事情，這樣具有以下好處：

  • 有助於構架良好的HTML結構，有利於搜尋引擎的建立索引、抓取，利於SEO
  • 有利於不同裝置的解析
  • 有利於構建清晰的機構，有利於團隊的開發、維護

4. 常見的瀏覽器核心有哪些，介紹一下你對瀏覽器核心的理解

Trident核心：IE

Gecko核心：NETSCAPE6及以上版本，火狐

Presto核心：Opera7及以上。[Opera核心原為：Presto，現為：Blink;]

Webkit核心：Safari，Chrome等。[Chrome的：Blink（WebKit的分支）]

瀏覽器核心又可以分成兩部分：渲染引擎和JS引擎。 渲染引擎主要負責取得網頁的內容、整理訊息、計算網頁的顯示方式等，JS引擎則是解析Javascript語言，執行javascript語言來實現網頁的動態效果。

5. html5有哪些新特性

  • 語義化標籤: header footer nav section article aside 等
  • 增強型表單：date(從一個日期選擇器選擇一個日期) email(包含 e-mail 地址的輸入域) number(數值的輸入域) range(一定範圍內數字值的輸入域) search(用於搜尋域) tel(定義輸入電話號碼欄位) 等
  • 視訊和音訊：audio video
  • Canvas繪圖 SVG繪圖
  • 地理定位：Geolocation
  • 拖放API：drag
  • web worker：是執行在後臺的 JavaScript，獨立於其他指令碼，不會影響頁面的效能
  • web storage: localStorage sessionStorage
  • WebSocket: HTML5開始提供的一種在單個 TCP 連線上進行全雙工通訊的協議

6. 描述一下 cookie，sessionStorage 和 localStorage 的區別

特性 Cookie localStorage sessionStorage
生命週期 可設定失效時間，沒有設定的話，預設是關閉瀏覽器後失效 除非被手動清除，否則將會永久儲存 僅在當前網頁會話下有效，關閉頁面或瀏覽器後就會被清除
存放資料大小 4KB左右 可以儲存5MB的資訊
http請求 每次都會攜帶在HTTP頭中，如果使用cookie儲存過多資料會帶來效能問題 僅在客戶端（即瀏覽器）中儲存，不參與和伺服器的通訊

7. 如何實現瀏覽器內多個標籤頁之間的通訊

  • 使用localStorage: localStorage.setItem(key,value)、localStorage.getItem(key)
  • websocket協議
  • webworker

多個標籤頁之間的通訊

8. HTML5的離線儲存怎麼使用，解釋一下工作原理

HTML5的離線儲存

9. src與href的區別

區別：src用於替代這個元素，而href用於建立這個標籤與外部資源之間的關係

<link href="style.css" rel="stylesheet" />瀏覽器載入到這裡的時候，html的渲染和解析不會暫停，css檔案的載入是同時進行的

<script src="script.js"></script>當瀏覽器解析到這句程式碼時，頁面的載入和解析都會暫停直到瀏覽器拿到並執行完這個js檔案

10. 表單提交中Get和Post方式的區別

  • Get一般用於從伺服器上獲取資料，Post向伺服器傳送資料
  • Get傳輸的資料是拼接在Url之後的，對使用者是可見的；Post的傳輸資料對使用者是不可見的
  • Get傳送的資料量較小，不能大於2KB。Post傳送的資料量較大，一般被預設為不受限制
  • Get安全性非常低，Post安全性較高
  • 在FORM提交的時候，如果不指定Method，則預設為Get請求

CSS

1. css盒子模型，box-sizing屬性的理解

css的盒模型由content(內容)、padding(內邊距)、border(邊框)、margin(外邊距)組成。但盒子的大小由content+padding+border這幾部分決定

box-sizing是一個CSS3屬性，與盒子模型有著密切聯絡。即決定元素的寬高如何計算，box-sizing有三個屬性：

box-sizing: content-box|border-box|inherit:
  • content-box 使得元素的寬高即為內容區的寬高(預設模式)
  • border-box: 計算方式content + padding + border = 本身元素大小，即縮小了content大小
  • inherit 指定box-sizing屬性的值，應該從父元素繼承

2. 清除浮動，什麼時候需要清除浮動，清除浮動都有哪些方法

浮動的元素是脫離文件標準流的，如果我們不清楚浮動，那麼就會造成父元素高度塌陷，影響頁面佈局。

清除浮動的方式：

  • 為父元素設定高度
  • 為父元素新增overflow:hidden
  • 偽元素
.fix::after { 
     content:""; 
     display:block; 
     clear:both;
}

使用偽元素的好處：不增加冗餘的DOM節點，符合語義化

overflow:hidden可以觸發BFC機制。BFC：塊級格式化上下文，建立了 BFC的元素就是一個獨立的盒子，它規定了內部如何佈局，並且與這個獨立盒子裡的佈局不受外部影響，當然它也不會影響到外面的元素，計算BFC的高度時，浮動元素也參與計算

3. 如何讓一個不定寬高的盒子水平垂直居中

定位的方式
.father {
    position: relative;
}
.son {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}
css3屬性
.father {
    position: relative;
}
.son {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
flex佈局
.father {
    display: flex;
    justify-content: center;
    align-items: center;
}

4. px和em和rem的區別

px: 畫素，相對長度單位。畫素px是相對於顯示器螢幕解析度而言的

em的值並不是固定的，會繼承父級元素的字型大小，代表倍數

rem的值並不是固定的，始終是基於根元素 <html> 的，也代表倍數

5. position的值有哪些

static： 預設值。沒有定位，元素出現在正常的流中

relative（相對定位）：生成相對定位的元素,相對於其正常（原先本身）位置進行定位

absolute（絕對定位）：生成絕對定位的元素，相對於static定位以外的第一個父元素進行定位

fixed（固定定位）：生成絕對定位的元素，相對於瀏覽器視窗進行定位

6. display:none與visibility：hidden的區別

區別 display:none visibility：hidden的
是否佔據空間 不佔據任何空間，在文件渲染時，該元素如同不存在（但依然存在文件物件模型樹中） 該元素空間依舊存在
是否渲染 會觸發reflow（迴流），進行渲染 只會觸發repaint（重繪），因為沒有發現位置變化，不進行渲染
是否是繼承屬性 不是繼承屬性，元素及其子元素都會消失 是繼承屬性，若子元素使用了visibility:visible，則不繼承，這個子孫元素又會顯現出

7. CSS中link 和@import的區別

link屬於XHTML標籤，@import完全是CSS提供的一種方式,只能載入CSS

載入順序的差別，當一個頁面被載入的時候，link引用的CSS會同時被載入，而@import引用的CSS 會等到頁面全部被下載完再被載入

相容性的差別。由於@import是CSS2.1提出的所以老的瀏覽器不支援，而link標籤無此問題

當使用javascript控制dom去改變樣式的時候，只能使用link標籤，因為@import不是dom可以控制的

8. 什麼是響應式設計，響應式設計的基本原理是什麼

響應式網站設計是一個網站能夠相容多個終端，而不是為每一個終端做一個特定的版本。基本原理是通過媒體查詢檢測不同的裝置螢幕尺寸做處理

9. 為什麼要初始化CSS樣式

因為瀏覽器的相容問題，不同瀏覽器對有些標籤的預設值是不同的，如果沒對 CSS 初始化往往會出現瀏覽器之間的頁面顯示差異

初始化樣式會對 SEO 有一定的影響

10. CSS3有哪些新特性

  • 實現圓角border-radius，陰影box-shadow，邊框圖片border-image
  • 對文字加特效text-shadow，強制文字換行word-wrap，線性漸變linear-gradient
  • 實現旋轉transform:rotate(90deg),縮放scale(0.85,0.90),translate(0px,-30px)定位,傾斜skew(-9deg,0deg);
  • 增加了更多的CSS選擇器、多背景、rgba()
  • 唯一引入的偽元素是::selection；
  • 實現媒體查詢@media，多欄佈局flex
  • 過渡transition 動畫animation

11. ::before 和 :after中雙冒號和單冒號有什麼區別？解釋一下這2個偽元素的作用

單冒號(:)用於CSS3偽類，雙冒號(::)用於CSS3偽元素。（偽元素由雙冒號和偽元素名稱組成）,雙冒號是在當前規範中引入的，用於區分偽類和偽元素

12. CSS優化、提高效能的方法有哪些

  • 移除空的css規則（Remove empty rules）
  • 正確使用display的屬性
  • 不濫用浮動、web字型
  • 不宣告過多的font-size
  • 不在選擇符中使用ID識別符號
  • 遵守盒模型規則
  • 儘量減少頁面重排、重繪
  • 抽象提取公共樣式，減少程式碼量

13. 重繪和迴流

重繪和迴流

14. flex佈局

可以參考一下阮大大的文章 flex佈局教程--阮一峰

15. css前處理器

提供了一種css的書寫方式，常見的就是 SAAS文件 和 LESS文件

後記

面試問題會不定時更新，後面也會抽時間總結一些javaScript、框架以及小程式方面的面試題，有需要的小夥伴可以點選關注我哦，最後祝大家都能找到一份滿意的工作。

相關文章