一，面試基礎 HTML和CSS

ps：這倆面試答不上來的，基本就可以回去了，以下是HTML題，一般來說這地方不會出太多題，面試官也不愿意花太多時間在這上面，

1，HTML語意化，如何理解語意化？

讓人更容易懂（增加代碼的可讀性）

讓搜索引擎更容易懂，有利于爬蟲抓取

在沒有css的情況下，頁面也能更好的展現出其內容結構，代碼·結構

2，script 標簽中 defer 和 async 的區別？

script：會阻礙HTML決議，只有下載好并執行完腳本才會繼續決議HTML

async：決議HTML的程序中會異步下載腳本，下載成功后立即執行，可能會阻斷HTML的決議

defer：完全不會阻斷HTML決議，決議完成之后在按順序執行腳本

圖解 script 標簽中的 async 和 defer 屬性

3，從瀏覽器地址欄輸入 url 到請求回傳發生了什么

3.1，輸入url之后，會決議出主機，埠，路徑，協議等資訊，構造一個HTTP請求

3.2，DNS域名決議

3.3，TCP鏈接，http請求

3.4，服務器處理請求并回傳HTTP報文

3.5，瀏覽器渲染（HTML決議，css決議，js決議，render樹）

推文：從輸入 URL 開始建立前端知識體系

推文：從 URL 輸入到頁面展現到底發生什么

推文：位元組面試被虐后，是時候搞懂 DNS 了

從上到下依次閱讀

4，HTTP和HTTPS的區別

http：

- - 不安全
  - 協議對客戶端沒有狀態存盤【沒有狀態】
  - 每次請求需要TCP三次握手四次揮手，和服務器重新建立連接【沒有連接】
  - 基本的特性，由客戶端發起請求，服務端回應
  - 簡單快速、靈活
  - 使用明文、請求和回應不進行確認

https：

- - 安全
  - HTTP安全版本，通過SSL或TLS提供加密處理資料、驗證對方身份以及資料完整性保護
  - 采用混合加密技術，傳輸程序無法直接查看明文內容【傳輸加密】
  - 通過證書認證客戶端訪問的是自己的服務器【身份認證】
  - 傳輸程序防止被篡改【資料完整】

ps：以下是css的面試題，打不出來的話可能會有非常不好的印象

5，css盒子模型的介紹

css3中盒子模型有兩種，一種是W3C標準盒子模型，一種是IE盒子模型

兩種盒子模型都是由content，margin，padding，border構成，其大小都是由content，padding，border決定的，但是盒子內容卻有所不同：

- - 標準盒模型：只包含 content ，
  - IE（替代）盒模型：content + padding + border ，

可以通過 box-sizing 來改變元素的盒模型：

- - box-sizing: content-box ：標準盒模型（默認值），
  - box-sizing: border-box ：IE（替代）盒模型，

6，css選擇器

選擇器	權重	使用示例
!important	1111	* {color: '#00f' !important}
行內	1000	<span style={color:'#00f'} />
id	0100	#id{color:'#00f}
class	0010	.calssName{color:'#00f}
標簽	0001	div{color:'#00f}
子選擇	0001	div > span{color:'#00f}
偽類	0001	a:hover {color:'#00f}>

優先級的計算規則：

相信每位寫過CSS的朋友都知道，CSS選擇器的優先級關系是: 行內 > ID選擇器 > 類選擇器 > 標簽選擇器

但是，瀏覽器具體的優先級演算法是怎樣的？可能還有些人不知道，《CSS REFACTORING》中提到了演算法的程序

A specificity is determined by plugging numbers into (a, b, c, d):

If the styles are applied via the style attribute, a=1; otherwise, a=0.
b is equal to the number of ID selectors present.
c is equal to the number of class selectors, attribute selectors, and pseudoclasses present.
d is equal to the number of type selectors and pseudoelements present.

　　簡單來說就是通過，A,B,C,D四個值來確定，具體的規則如下：

如果存在行內樣式，那么 A = 1，否則 A = 0 ；
B 的值等于 ID選擇器（#id）出現的次數；
C 的值等于類選擇器（.class）和屬性選擇器（a[href="https://example.org"]）和偽類（:first-child）出現的總次數；
D 的值等于標簽選擇器（h1,a,div）和偽元素（::before,::after）出現的總次數，

而比較規則是: 從左往右依次進行比較，較大者勝出，如果相等，則繼續往右移動一位進行比較，如果4位全部相等，則后面的會覆寫前面的

舉個栗子：

<div class="nav-list" id="nav-list">
    <div class="item">nav1</div>
    <div class="item">nav2</div>
</div>

#nav-list .item {
    color: #f00;
}

.nav-list .item {
    color: #0f0;
}

上邊代碼，算出 #nav-list .item 的優先級是（0，1，1，0）算出 .nav-list .item 的優先級是（0，0，2，0）

首先比較第一位都是0，相等，往右邊找第二位，#nav-list .item的優先級第二位是1，.nav-list .item 優先級的第二位是0，所以#nav-list .item的優先級大于.nav-list .item

推薦：深入理解 CSS 選擇器優先級

7，重排（reflow）和重繪（repaint）的區別

兩種概念：

- - 重排：無論通過什么方式影響了元素的幾何資訊(元素在視口內的位置和尺寸大小)，瀏覽器需要重新計算元素在視口內的幾何屬性，這個程序叫做重排，
  - 重繪：：通過構造渲染樹和重排（回流）階段，我們知道了哪些節點是可見的，以及可見節點的樣式和具體的幾何資訊(元素在視口內的位置和尺寸大小)，接下來就可以將渲染樹的每個節點都轉換為螢屏上的實際像素，這個階段就叫做重繪，

如何減少重排和重繪

最小化重繪和重排，比如樣式集中改變，使用添加新樣式類名 .class 或 cssText

批量操作 DOM，比如讀取某元素 offsetWidth 屬性存到一個臨時變數，再去使用，而不是頻繁使用這個計算屬性；又比如利用 document.createDocumentFragment() 來添加要被添加的節點，處理完之后再插入到實際 DOM 中

使用 **absolute** 或 **fixed** 使元素脫離檔案流，這在制作復雜的影片時對性能的影響比較明顯

開啟 GPU 加速，利用 css 屬性 transform 、will-change 等，比如改變元素位置，我們使用 translate 會比使用絕對定位改變其 left 、top 等來的高效，因為它不會觸發重排或重繪，transform 使瀏覽器為元素創建?個 GPU 圖層，這使得影片元素在一個獨立的層中進行渲染，當元素的內容沒有發生改變，就沒有必要進行重繪作者：vortesnail

瀏覽器渲染的程序

決議HTML生成DOM樹，決議CSS生成CSSOM樹
將DOM樹和CSSOM樹結合，生成渲染樹（Render Tree）
Layout(回流):根據生成的渲染樹，進行回流(Layout)，得到節點的幾何資訊（位置，大小）
Painting(重繪):根據渲染樹以及回流得到的幾何資訊，得到節點的絕對像素
Display:將像素發送給GPU，展示在頁面上，

為了構建渲染樹，瀏覽器主要完成了以下作業：

從DOM樹的根部開始遍歷出每個可見的節點（不可見的節點有：script、meta、link等，還有一些通過css進行隱藏的節點，比如display:none）
對每個可見的節點，找到CSSOM樹上對應的規則，并應用他們
根據每個可見節點以及其對應的樣式，組合生成渲染樹

注意：渲染樹只包含可見的節點

注意，利用visibility和opacity隱藏的節點，還是會顯示在渲染樹上的，只有display:none的節點才不會顯示在渲染樹上

從上邊的例子我們可以看到span標簽的樣式有一個display:none，它最終并沒有在渲染樹上

回流（Layout）

我們通過構造渲染樹，將可見DOM節點以及它對應的樣式結合起來，可是我們還需要計算它們在設備視口(viewport)內的確切位置和大小，這個計算的階段就是回流

為了弄清每個物件在網站上的確切大小和位置，瀏覽器從渲染樹的根節點開始遍歷，舉個栗子：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Critial Path: Hello world!</title>
  </head>
  <body>
    <div style="width: 50%">
      <div style="width: 50%">Hello world!</div>
    </div>
  </body>
</html>

我們可以看到，第一個div將節點的顯示尺寸設定為視口寬度的50%，第二個div將其尺寸設定為父節點的50%

而在回流這個階段，我們就需要根據視口具體的寬度，將其轉為實際的像素值

重繪（Painting）

最終，我們通過構造渲染樹和回流階段，知道了那些元素是可見的，以及可見節點的樣式和具體的幾何影像資訊（也就是在頁面上的位置，大小）那么我們就可以將渲染樹的每個節點都轉換為螢屏上的實際像素，這個階段就叫做重繪節點

何時會發生回流重繪？

既然前邊我們都知道了，回流這一階段主要是計算節點的位置和幾何資訊，那么當頁面布局和幾何資訊發生變化的時候，就需要回流，舉幾個栗子：

- - - 添加或洗掉可見的DOM元素
    - 元素的位置發生變化
    - 元素的尺寸發生變化（包括外邊距、內邊框、邊框大小、高度和寬度等）
    - 內容發生變化，比如文本變化或圖片被另一個不同尺寸的圖片所替代，
    - 頁面一開始渲染的時候（這肯定避免不了）
    - 瀏覽器的視窗尺寸變化（因為回流是根據視口的大小來計算元素的位置和大小的）

注意：回流一定會觸發重繪，而重繪不一定會回流

根據改變的范圍和程度，渲染樹中或大或小的部分需要重新計算，有些改變會觸發整個頁面的重排，比如，滾動條出現的時候或者修改了根節點

推薦騰訊 IVWEB 團隊的這篇文章：你真的了解回流和重繪嗎

8，對BFC的理解

全程 block format contex 塊級格式背景關系，就是一塊獨立渲染區域，不影響檔案流

創建 BFC 的方式：

- - 絕對定位元素（position 為 absolute 或 fixed ），
  - 行內塊元素，即 display 為 inline-block ，
  - overflow 的值不為 visible ，

推薦文章：可能是最好的 BFC 決議了...

9，實作兩欄布局（左側固定，右側自適應）

DOM結構：

<div class="outer">
  <div class="left">左側</div>
  <div class="right">右側</div>
</div>

方法一：

利用浮動，左邊元素寬度固定，右邊元素的margin-left固定，注意：右邊元素的width是auto，跟隨父級自動撐滿

.outer {
  height: 100px;
}
.left {
  float: left;
  width: 200px;
  height: 100%;
  background: lightcoral;
}
.right {
  margin-left: 200px;
  height: 100%;
  background: lightseagreen;
}

方法二：

同樣利用浮動，將左邊元素寬度固定，然后給右邊元素加上overflow：hidden，這樣就觸發了 BFC ，BFC的區域不會與浮動元素發生重疊，所以兩側就不會發生重疊

.outer {
  height: 100px;
}
.left {
  float: left;
  width: 200px;
  height: 100%;
  background: lightcoral;
}
.right {
  overflow: hidden;
  height: 100%;
  background: lightseagreen;
}

方法三：

利用 flex布局，左邊元素固定寬度，右邊的元素設定 flex: 1

.outer {
  display: flex;
  height: 100px;
}
.left {
  width: 200px;
  height: 100%;
  background: lightcoral;
}
.right {
  flex: 1;
  height: 100%;
  background: lightseagreen;
}

方法四：

利用定位，給父級元素相對定位，給左邊元素絕對定位，固定左邊元素的寬度，右邊元素margin-left 留出位置

.outer {
  position: relative;
  height: 100px;
}
.left {
  position: absolute;
  width: 200px;
  height: 100%;
  background: lightcoral;
}
.right {
  margin-left: 200px;
  height: 100%;
  background: lightseagreen;
}

方法五：

也是定位，給右邊元素絕對定位，給父級相對定位，然后固定左邊元素的寬度，給右邊元素設定 left 留出位置，剩余的全為0

.outer { position: relative; height: 100px; } .left { width: 200px; height: 100%; background: lightcoral; } .right { position: absolute; left: 200px; top: 0; right: 0; bottom: 0; height: 100%; background: lightseagreen; }

10，實作圣杯布局和雙飛翼布局（經典的三欄布局）

詢問圣杯布局和雙飛翼布局的目的：

三欄布局，中間的內容一定要優先渲染（內容最重要）
兩邊固定，中間的隨著頁面自適應
用于pc端頁面

技術總結：

使用 float 布局
兩側使用 margin 負值，以便和中間內容橫向重疊
防止中間內容被兩側覆寫，圣杯布局用 padding ，雙飛翼布局用 margin

圣杯布局：

<div id="container" class="clearfix">
  <p class="center">我是中間</p>
  <p class="left">我是左邊</p>
  <p class="right">我是右邊</p>
</div>

css樣式：

#container {
  padding-left: 200px;
  padding-right: 150px;
  overflow: auto;
}
#container p {
  float: left;
}
.center {
  width: 100%;
  background-color: lightcoral;
}
.left {
  width: 200px;
  position: relative;
  left: -200px;
  margin-left: -100%;
  background-color: lightcyan;
}
.right {
  width: 150px;
  margin-right: -150px;
  background-color: lightgreen;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

雙飛翼布局：

<div id="main" class="float">
  <div id="main-wrap">main</div>
</div>
<div id="left" class="float">left</div>
<div id="right" class="float">right</div>

css樣式：

.float {
  float: left;
}
#main {
  width: 100%;
  height: 200px;
  background-color: lightpink;
}
#main-wrap {
  margin: 0 190px 0 190px;
}
#left {
  width: 190px;
  height: 200px;
  background-color: lightsalmon;
  margin-left: -100%;
}
#right {
  width: 190px;
  height: 200px;
  background-color: lightskyblue;
  margin-left: -190px;
}

11，水平垂直居中

方法一：flex 布局

.box{
  display: flex;
  justify-content: center;
  align-items: center;
}

方法二：利用絕對定位，left：50% top：50% 然后再通過 margin-left 和 margin-top 設定負值實作

.father {
  position: relative;
}
.son {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 200px;
  height: 200px;
  margin-left: -100px;
  margin-top: -100px;
}

方法三：和上邊的方法差不多，但用了css3新增的屬性 translate 來實作

.father {
  position: relative;
}
.son {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

方法四：利用絕對定位，子元素所有方向都為 0 ，將 margin 設定為 auto ，由于寬高固定，對應方向實作平分，注意：該方法必須盒子有寬高

.father {
  position: relative;
}
.son {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0px;
  margin: auto;
  height: 100px;
  width: 100px;
}

關于div居中的方法還有很多這里推薦一篇：面試官：你能實作多少種水平垂直居中的布局（定寬高和不定寬高）

12，flex布局

Flex 是 Flexible Box 的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性，任何一個容器都可以指定為 Flex 布局

13，line-height 如何繼承？

- - 父元素的 line-height 寫了具體數值，比如 30px，則子元素 line-height 繼承該值
  - 父元素的 line-height 寫了比例，比如 1.5 或 2，則子元素 line-height 也是繼承該比例
  - 父元素的 line-height 寫了百分比，比如 200%，則子元素 line-height 繼承的是父元素 font-size * 200% 計算出來的值

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/527878.html

標籤：Html/Css

上一篇：python模擬CSR證書請求

下一篇：JS 探索 this 指向問題

前端面試HTML和CSS總結，這一篇就夠了！