前面的話
小柒前面已經總結了這些天的面試題，這篇文章爲部分內容給出解答。
ps: 下面的解答只是參考，有錯誤請指出~~
HTML
(1) HTML語義化的理解
- 用正確的標籤做正確的事情
- HTML語義化讓頁面結構化，內容更清晰
- 即使不使用css也容易閱讀
- 便於搜索引擎
(2) DOCTYPE的作用
- 是爲了告知瀏覽器的解析器使用什麼模式來解析頁面。有兩種類型：標準模式與怪異模式。
(3) 標準模式與怪異模式的區別
- 標準模式：以W3C的標準來解析渲染頁面
- 怪異模式：使用瀏覽器自己的模式去解析頁面
(4) 說一下文檔流
- HTML 元素分爲兩大類：塊級元素與行內元素。將窗體自上而下的分成一行一行，並在每行中按照從左至右的順序排放，即爲文檔流。（可理解爲：行內元素從左至右排列，塊級元素從上至下的排列。）
(5) 塊級元素、行內元素、行內塊級元素、空元素
- 塊級元素：div、p、ul、li、ol、h1等
- 行內元素：a、b、span、img、input等
- 行內塊級元素：input、img、textarea、select、iframe、video、object (同時也是空元素， 效果等同於塊級元素，但不能獨佔一行)
- 空元素：input、img、textarea、select、iframe、video、object
(6) HTML5 的新特性
- 標籤： nav、header、footer、article 、section等
- video、audio
- canvas
- localStorage、sessionStorage、IndexedDB
- 離線緩存
- webWorker、webSocket
(7) HTML5 的離線儲存怎麼使用，工作原理能不能解釋一下？
-
原理： HTML5 的離線存儲是基於一個新建的 .appcache 文件的緩存機制，通過這個文件上的解析清單離線存儲資源，這些資源會像 cookie 一樣被存儲下來。當網絡處於離線狀態下時，瀏覽器會通過被離線存儲的數據進行頁面展示。
-
如何使用：
1、 在頁面頭部加一個
manifest屬性：<html manifest = "cache.manifest"> ... </html>2、cache.manifest文件書寫方式如下：
CACHE MANIFEST #v0.11 CACHE: js/app.js css/style.css NETWORK: resourse/logo.png FALLBACK: / /offline.html- CACHE：表示需要離線存儲的資源列表。
- NETWORK：表示下面列出的資源只有在在線的情況下才能訪問，離線時不能訪問
- FALLBACK：表示如果訪問第一個資源失敗，那麼就使用第二個資源來替換它（這裏使用offline.html文件來替換）。
3、在離線狀態時，操作 window.applicationCache 進行需求實現。
(8) 描述 cookie，sessionStorage 和 localStorage 的區別
- 由於 HTTP 的無狀態，導致了服務端無法識別連續請求的客戶端是否是同一個客戶端。這樣就會導致： 比如：刷新瀏覽器後，購物車裏面的東西就會清空。cookie的出現就是爲了讓服務端可以識別客戶端。
- cookie 一般用來存儲驗證客戶端身份的數據。存儲大小不超過4k， 並且在第一次請求之後，瀏覽器都會在請求頭上添加cookie字段帶上cookie，發到服務端。
- localStorage 是永久存儲，大小爲5M，只有手動清除數據纔會失效。
- sessionStorage 是會話存儲，大小爲5M，當瀏覽器窗口關閉時數據失效。
(9) cookie 有哪些屬性
- Name/ Value
- Domain： 指定cookie所屬域名。
- Path： 指定URL路徑，這會路徑要出現在請求的的資源的路徑中纔可以發送cookie。
- Expires：用於設置cookie的過期時間。
- HTTPOnly ：不允許客戶端通過
document.cookie來設置或者訪問cookie，可以防止XSS攻擊 - SameSite: 可以讓cookie在跨站請求時不被髮送，可以防止
CSRF攻擊。有三個屬性值：Strict(只允許一方攜帶cookie，當前網頁的URL與請求目標的URL完全一致)、Lax（允許部分第三方請求攜帶cookie）、None（無論是否跨站都會發送cookie） - Secure: cookie只能被HTTPS協議發送的請求攜帶
(10) iframe 內嵌框架有那些缺點
iframe 一般用於包含別的頁面。
- iframe 會阻塞主頁面的 onload 事件
- 不利於搜索引擎
- iframe 和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的並行加載。
如果要使用 iframe，最好使用 JavaScript 動態給 iframe 添加 src 屬性。
(11) 說一下 WebWorker、 WebSocket
- Web Worker 的出現是爲 JavaScript 創造多線程的環境。解決主線程的一些計算密集或者高延遲的任務。主線程與Worker線程互不影響，一旦Worker線程創建成功，就會始終運行。主線程與Worker線程的最大的區別是：Worker線程不能操作DOM，這樣保證了js的單線程。
- Web Socket 是一個全新的協議，基於TCP 的全雙工通信協議（即允許服務器主動推送）且無同源限制。缺點：獨⽴與http的協議 ，使⽤複雜度⾼，必須引⼊成熟的庫，⽆法兼容低版本瀏覽器
(12) 常用的 meta 標籤
- meta標籤提供的信息對用戶不可見，但卻是文檔的基本信息。它可以提供文檔字符集、作者、關鍵字、網頁的描述等。比如：
- < meta charset=“UTF-8” > charset : 用於描述字符集
- ＜meta http-equiv=“expires” content="Wed, 20 Jun 2020 22:33:00 GMT"＞ http-equiv可以用於設置緩存過期時間。
- < meta name=“viewport” content=“width=device-width, initial-scale=1, maximum-scale=1”> viewport 可以很設置視口大小
CSS
(1) 盒模型: 標準模型與IE模型
- 盒模型都包含4個部分：content、padding、border、margin
- 標準盒模型與IE盒模型的區別在於設置width/height的範圍不同。標準盒模型的width = content ; 而IE盒模型的width = content + padding + border
- 一般來說，我們可以通過box-sizing屬性來改變元素的盒模型。box-sizing設置爲
content-box則爲標準盒模型，設置爲border-box則爲IE盒模型。
(2) css選擇符有哪些
- id選擇器、類選擇器、標籤選擇器、子選擇器(>)、兄弟選擇器(~)、相鄰兄弟選擇器（+）、屬性選擇器(比如a[href])、僞類選擇器(:hover)、僞元素選擇器(::after)、通配符選擇器(*)
(3) 權重問題
- !important > 內聯樣式 > id選擇器 > class選擇器/屬性選擇器/僞類選擇器 > 標籤選擇器/僞元素選擇器 > 通配符
(4) 僞類和僞元素的區別
- 一般來說：僞類使用單冒號表示，比如:hover 等；僞元素使用雙冒號表示，比如::after等。
- 僞類的操作對象是文檔樹中已有的元素,對已有元素的某個狀態添加樣式；而僞元素則創建了一個文檔樹以外的元素，併爲其添加樣式（雖然用戶可以看見這些文本，但實際不在文檔樹中）。
(5) css中哪些屬性可以被繼承
- 字體系列：font-family、font-size、font-weight等；
- 文本系列：text-align、color、line-height等
- 列表系列：list-style、list-style-color等；
- 光標：cursor
(6) link與@import區別
- link 是基於XHML標籤的，無兼容性；@import是css提供的， 只用IE5以上才兼容
- link 標籤引入的css是同步加載的； @import 引入的css只有等頁面加載完畢後，纔開始加載
- link 標籤不僅可以加載css文件，還可以定義RSS、rel連接屬性。
- 可以使用js操作DOM，插入link標籤；而無法使用操作DOM的方式插入@import。
(7) a標籤的4個僞類的正確順序，並解釋
- a標籤有4中狀態：鏈接訪問前(:link)、鏈接訪問後(:visited)、鼠標經過(:hover)、激活(:active)。順序：LVHA/VLHA
- 鼠標經過時：滿足:link和:hover兩種狀態，要看到顏色的變化，就要將:hover樣式放在:link樣式放在後。（否則，不管有沒有經過都是:link的樣式）
- 鼠標點擊激活時：滿足:link、:hover、:active三種狀態，要想看到a標籤被激活時的樣式，必須將:active放在:link與:hover 之後。
- :visited與:link的樣式位置沒有順序之分。
(8) 清除浮動的方式
在父元素沒有設置高度的情況下，如果子元素設置了浮動，就會出現父元素高度塌陷的現象，這樣就需要清除浮動。清除浮動的方式：
- 父元素設置高度
- 父元素設置overflow:hidden,觸發bfc
- 父元素最底部添加一個空div，並且設置clear:both
- 父元素設置僞元素::after樣式，原理與上述一樣，只不過這裏添加的是僞元素樣式，效果一樣，但不會真正出現在文檔樹中。
.clearfix::after{
content:""; /* 讓僞元素不顯示*/
display:block; /* clear:both只在塊級元素上起作用*/
clear:both; /*在左右兩側均不允許浮動元素*/
height:0;/*讓僞元素不顯示*/
visibility: hidden;/* 讓僞元素不顯示*/
}
(9) position的屬性值
- 屬性值：static、relative、absolute（脫離文檔流）、fixed（脫離文檔流）
- relative 定位的元素是相對元素本身的位置來進行定位的
- absolute 定位的元素是相對於
第一個position值不爲static的祖先元素的padding-box來定位。
(10) z-index的理解
- 可以使用z-index屬性可以設置元素的層疊順序。（ 只對脫離文檔流的元素有效）
(11) flex佈局
-
flex佈局是css3新增的一種佈局方式，我們可以給任何一個元素的
display屬性值設置爲flex，這樣這個元素就成了一個flex容器，而它的子元素都會成爲它的項目。 -
每個容器都有兩條軸：一條水平主軸，另一條垂直的交叉軸，可以通過
flex-direction來設置主軸的方向。可以使用justify-content來指定項目在主軸方向的排列方式，使用align-items來指定項目在交叉軸上的排列方式。還可以是使用flex-wrap來規定一行排列排不下時的換行方式。 -
容器中每一個項目都可以使用
order來指定項目的排列順序，還可以使用flex-grow來定義項目的放大比例，flex-shrink來定義項目的縮小比例，flex-basis來指定項目的基本空間大小。 -
父元素設爲Flex佈局後，子元素的
float、clear、vertical-align屬性將失效。
(12) BFC、觸發條件、可解決的問題
- BFC：塊級格式上下文，是css的一個佈局的概念，是一塊獨立於外界的一個區域。
- 觸發條件： 根元素(html)、float不爲none、position設置爲absolute或者fixed、overflow值不爲visible、display值爲inline-block/table-cell/tabel-caption
- 可解決的問題：清除浮動、margin塌陷問題、可做兩欄佈局自適應
(13) IFC是什麼
IFC 指行級格式上下文。其佈局規則：
- 行級上下文內部的盒子會在水平方向，一個接一個地放置
- 當一行不夠時會自動切換到下一行
- 行級上下文的高度由內部最高的內聯盒子的高度決定
(14) 瀏覽器是怎樣解析 CSS 選擇器的？
- 從右往左匹配。如果是從左往右匹配，大多時候要匹配到最後才發現是不匹配的，這樣很性能不好；而採用從右向左的方式，只要發現右邊的選擇器不匹配，就可以直接捨棄，這樣避免了很多無效的匹配。
(15) px、em、rem的區別
- px 是絕對長度單位。
- em 是相對長度單位，相對於父元素
- rem 是相對長度單位，相對於根元素
- vw：視窗寬度，1vw等於視窗寬度的1%
(16) 兩欄佈局
- float + margin
- calc
- position + margin(或者transform)
- flex
- table佈局
(17) 三欄佈局
- float + margin
- position + margin
- flex佈局
- table佈局
- 聖盃
- 雙飛翼等
(18) 如何實現水平垂直居中
(19) CSS創建一個三角形
#demo{
width: 0;
height: 0;
border: 20px solid transparent;
border-bottom-color: pink;
}
(20) CSS 動畫 與 js 動畫區別
js 動畫：
- js 控制動畫的能力強，可以在動畫的過程中對動畫進行控制：開始、暫停、回放、終止、取消都是可以做到的。
- 動畫效果比css3動畫效果豐富些
- css3有兼容性問題，js大多無兼容性問題
css動畫：
- 可以使用GPU來提高性能。
- 如果css動畫只改變transform和opacity（不會觸發重繪與迴流），那麼整個動畫在合成線程中完成；而js會在主線程中執行後，再出發合成線程進行下一步操作。
一般簡單的動畫，不需要中間控制過程，css動畫比較好；如果動畫的設計很複雜，使用js動畫更好。
(21) CSS3新特性
- 顏色 rgba
- 圓角（border-radius）
- 陰影（box-shadow）
- 動畫
- 漸變(gradient)
- 轉換（transform：translate / scale/ skew）
- flex佈局
- grid佈局
(22) CSS3新增僞類
- elem:nth-child(n) 選中父元素下的第n個子元素,並且這個子元素的標籤名爲elem
- elem:nth-last-child(n) 作用同上，不過是從後開始查找
- elem:last-child 選中最後一個子元素
- elem:only-child 如果elem是父元素下唯一的子元素，則選中
- elem:nth-of-type 選中父元素下第n個elem元素
- elem:first-of-type 選中父元素下第一個elem元素
- elem:last-of-type 選中父元素下最後一個elem元素
- elem:only-of-type 如果父元素下的子元素只有一個elem元素,則選中
- elem:target 選擇當前活動的elem元素
- :not(elem) 選擇非elem元素的每一個元素
- :enabled 選擇可用的表單元素
- :disabled 選擇禁用的表單元素
- :checked 選擇被選中的表單元素
(23) 常見的元素隱藏方式
- display: none;
- visibility: hidden;
- overflow：hidden
- opacity: 0;
- z-index: -999
- transform: scale(0,0)
- 使用定位移出視線
css 隱藏元素的8種方法
(24) 怎麼讓Chrom支持小於12px的文字
p {
font-size:10px;
-webkit-transform:scale(0.8); /*縮小比例*/
}