Style

Css 的相關

基本的權重大小:!important > 行內樣式（比重1000）> ID 選擇器（比重100） > 類選擇器（比重10） > 標籤（比重1） > 通配符 > 繼承 > *瀏覽器默認屬性

全站預設值
*{
padding: 0
margin: 0
}

Element
div, p, ul, ol, li, em, header, footer, article

class & psuedo-class(偽類 & attribute（屬性選擇器）
在 html 上面會寫成 class=”box”
在 css 內長這樣 .box

id
html 上面是這樣寫的 id=”home”
css 內長這樣 #home

inline style attribute:寫在 html 行內的 style

終極大魔王
!important:的權重非常高，可以蓋過所有的權重

總結：!important > 行內樣式（inline style比重1000）> ID 選擇器（比重100） > 類選擇器（class 比重10） > 標籤（比重1） > 通配符 > 繼承 > 瀏覽器默認屬性

名稱解釋名詞
alt搜尋引擎識別;在圖像無法顯示時的替代文本
title元素的注釋信息;滑鼠移入會有元素的注釋信息

Box-sizing設定 width / height 的作用對象是哪個盒子(box)

1
box-sizing: content-box;

content-box 其實不設定時就是預設
一個物件的範圍，其實就是四個層層包裹的矩形所構成，由內而外分別是「content-box()、padding-box()、border-box()、margin-box()」

1
box-sizing: border-box;

width / height 的作用範圍就是指到 border 這個 box 的範圍了
參考資料

z-index

z-index可以設定元素的堆疊順序，
設定值越高越前面，可以為負數，例如：z-index: -1。
另外要注意的是z-index只能在有設定位（position）的元素上才會奏效。
可設定為position: static、absolute、relative、fixed。

偽類 (pseudo-classes) 是什麼？

偽類
:hover當用戶的鼠標或觸控板等設備放在元素上時，我們可以使用:hover更改元素的樣式。

:link,:visited 這兩個偽類都是用在含有 href 屬性的 < a > 元素上。
:link 可以調整使用者還未瀏覽過的連結樣式，而
:visited 則可以改變使用者已瀏覽過的連結樣式。

:disabled,:enabled按鈕元素可以設定為「禁用」狀態，
:disabled 按鈕元素可以設定為「禁用」狀態。
:enabled 可以調整按鈕在「禁用」或「非禁用」狀態時的樣式。

:first-child,:last-child
如果要在 HTML 中查找第一個或最後一個項目，可以使用
:first-child 和 :last-child。這些偽類會回傳一組兄弟元素中的第一個或最後一個元素。

偽元素 (pseudo-elements)是什麼?

::before,::after 偽元素
在元素上使用 ::before 和 ::after 偽元素，會在元素中產生一個子元素，但必須在偽元素中定義 content，這個 content 可以是任何字串，甚至可以是空字串。
::marker
使用 ::marker 可以調整列表或摘要元素 (summary) 的項目符號和編號的樣式。
::placeholder
當我們在設計表單時，會對一些元素，例如輸入框 (input)，加入提示文字，而 ::placeholder 可以用來設定這個提示文字的樣式。
::first-letter
我們經常在部落格或文章的設計中，文章的第一段的第一個字母會有特殊的樣式，以增加讀者的注意力。

CSS 盒模型 (Box Model)

有兩種， IE 盒子模型、W3C 盒子模型；
盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border)；
區 別： IE 的 content 部分把 border 和 padding 計算了進去;

垂直水平居中幾種方式?

單行文本: line-height = height
圖片: vertical-align: middle;
absolute 定位: top: 50%;left: 50%;transform: translate(-50%, -50%);
flex: display:flex;margin:auto

position的值， relative和absolute分別是相對於誰進行定位的？

relative:相對定位，相對於自己本身在正常文檔流中的位置進行定位。
absolute:生成絕對定位，相對於最近一級定位不為static的父元素進行定位。
fixed: （老版本IE不支持）生成絕對定位，相對於瀏覽器窗口或者frame進行定位。
static:默認值，沒有定位，元素出現在正常的文檔流中。
sticky:生成粘性定位的元素，容器的位置根據正常文檔流計算得出。

px像素（Pixel）的含義？

px像素:絕對單位，代表螢幕中每個「點」( pixel )

rem的含義？

rem :相對單位，每個元素透過「倍數」乘以根元素的 px 值。
通常做法是給html元素設置一個字體大小，然後其他元素的長度單位就為rem。

em的含義？

em :相對單位，每個子元素透過「倍數」乘以父元素的 px 值。
元素的width/height/padding/margin用em的話是相對於該元素的font-size

vw/vh的含義？

vw/vh :Viewport Width 和 Viewport Height，視窗的寬度和高度。
屏幕寬度和高度

% 的含義？

%:相對單位，每個子元素透過「百分比」乘以父元素的 px 值。

src vs href 的差別?

src用於替換目前元素，href用於在目前文件和引用資源之間確立聯繫。
src是source的縮寫，指向外部資源的位置，指向的內容將會嵌入到文件中目前標籤所在位置；在請求src資源時會將其指向的資源下載並套用到文件內，例如js腳本，img圖片 和frame等元素。

當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源載入、編譯、執行完畢，圖片和框架等元素也如此，類似於將所指向資源嵌入目前標籤內。 這也是為什麼將js腳本放在底部而不是頭部。

href是Hypertext Reference的縮寫，指向網絡資源所在位置，建立和當前元素（錨點）或當前文檔（鏈接）之間的鏈接，如果我們在文檔中添加

那麼瀏覽器會識別該文件為css文件，就會並行下載資源並且不會停止目前文件的處理。 這也是為什麼建議使用link方式來載入css，而不是使用@import方式。

defer和 async 的差別？

defer 是 Deferred 的縮寫，代表 延遲。
作用與 async 相同，同樣會在背景執行，差別在於 defer 會等到 DOM 都解析完成後才執行（DOMContentLoaded 之前）。在 JS 檔有多個相依性、且要等 DOM 準備好才使用的情況下，defer 是很棒的選擇。

async 是 asynchronous 的縮寫，代表 非同步。
也就是說不用等待資源執行完畢就可以繼續跑下面的程式，添加 async 的 < script > 會在背景持續下載，一旦下載完成後會暫停解析 DOM，因為沒辦法確定 DOM 的狀況，所以通常會用在 GA 或是其他廣告的追蹤碼。

HTML 語義化優點?

1.對機器友好，帶有語義的文字表現力豐富，更適合搜尋引擎的爬蟲爬取有效訊息，有利於SEO。 除此之外，語意類別也支援讀屏軟體，根據文章可以自動產生目錄；
2.對開發者友好，使用語意類標籤增強了可讀性，結構更加清晰，開發者能清晰的看出網頁的結構，便於團隊的開發與維護。

css display 屬性,display 的值

CSS 的 display 屬性用來決定一個元素會擁有塊狀 block 或是行內 inline 的特性;會決定這個元素中的子元素會如何排列。
display 的值有:block、inline、inline-block、none、flex、grid 和 table

display:inline-block, block, inline 的區別及差別?

inline-block:會以 block 的方式呈現，可以在同一列 inline 水平並列，它可以設定元素的寬高/margin/padding。
block:每個 block 都是新的一行，可以設定元素的寬高/margin/padding，。
inline，為行內元素，多個相鄰的行內元素排在同一行裡，如果頁面一行排列不下，才會換新的一行;元素的寬高/margin/padding 接不可以改變，。

CSS Modules VS. styled-components

CSS Modules 就是為了解決這種場景而生的，它加入了局部作用域和模組依賴，可以確保某個元件的樣式不會影響到其他元件。 具體而言，CSS Modules 透過工程化的方法，可以將類別名稱編譯為雜湊字串，從而使得每個類別名稱都是獨一無二的，不會與其他的選擇器重名，由此可以產生局部作用域 。
原生 CSS 因為缺乏變量、函數這等方法，導致程式碼的維護性不高而且無法復用。除此之外，原生 CSS 還會造成全局汙染的問題，同樣名稱的選擇器會造成樣式覆蓋等等問題。因此出現 CSS Module 和 CSS-in-JS 的解決方法，兩者的特點如下：

原生 CSS 因為缺乏變量、函數這等方法，導致程式碼的維護性不高而且無法復用。除此之外，原生 CSS 還會造成全局汙染的問題，同樣名稱的選擇器會造成樣式覆蓋等等問題。因此出現 CSS Module 和 CSS-in-JS 的解決方法，兩者的特點如下
CSS Modules

利用文件名來產生 hash className 來解決命名衝突的問題
然後搭配 Sass 或是 Less 來增加變量、函數等特性來增加維護性

styled-components 則是 CSS-in-JS 其中一種
可讀性佳，好維護因為相關的 css 會在同一個區塊
樣式是和 JS 文件打包在一起，所以會拖慢 JS 文件加載時間
沒有單獨 CSS 文件所以無法緩存

什麼是 postProcessor (後處理器)

後處理器就是讓開發者依然撰寫 CSS，再經過擴充功能（plugin）的後製處理，將特定功能轉成瀏覽器能懂的指令。

請描述SVG,PNG,GIF,JPEG,WebP描述圖片的差異以及網站使用時機？

jpeg/jpg (靜態影像格式，點陣圖，不透明，不支援動態呈現);有壓縮，破壞性資料壓縮;被壓縮後還能最接近原本色彩飽和。
png (靜態影像格式，點陣圖，支援透明，不支援動態呈現);有壓縮，非破壞性資料壓縮;優勢:邊緣上處理比jpeg/jpg 較優勢;圖片色彩豐富飽和。
WebP 比jpeg/jpg檔案更小，換句話說能傳輸的更快。
svg (靜態影像格式，向量);可被縮放，縮放不影響品質。

如何寫Rwd ?

媒體查詢
viewport 設定

JS 數據類型有哪些 ?

數據類型主要包括兩部分：
基本數據類型： Undefined、Null、Boolean、Number 和 String
引用數據類型： Object 、Function、symbol

===」、「 ==」的區別？

==，（當且僅當兩個運算數相等時，它返回 true）即不檢查數據類型
===，（只有在無需類型轉換運算數就相等的情況下，才返回 true）需要檢查數據類型

var、let、const 區別？

var 存在變量提升，全局作用域或（若在塊級區域宣告，仍然可以在塊級區塊之外拿取，可重新聲明），可以修改，初始化
let 只能在區塊作用域內訪問，不可重新聲明，可以修改。
const 不變的常量，必須初始化，不可重新聲明，不能修改

Vue優化

1.v-for 與v-if避免同時使用:設置唯一Key值。
2.函數式元件。
3.區分computed 與watch使用場景。
4.v-if與v-show使用場景。
5.長列表 Object freeed 凍結。
6.使用keep alive組件。
7.路由懶加載。
8.開啟Gzip壓縮。
9.第三方插件指引入需要的
10.壓縮圖片
11.緩存靜態文件
12.Time Slicing 時間切割技術
13.非響應數據
14.Deferred 組件延時分批宣染
15.虛擬滾動組件

為伺服器傳送給使用者瀏覽器的一個小片段資料。
大小約 4kb
每次 request 時都會帶上
每次都會攜帶在Http 保存過多會帶來效能問題
比較常用的場景就是判斷用戶是否登錄
帳號登入、購物車、遊戲分數，或任何其他伺服器應該記住的資訊
記錄並分析使用者行為

LocalStorage

使用 key / value pair 的方式 給值或取值
大小預設有 5mb
每次 request 不會帶上
不會過期，除非手動清除
僅在劉覽器保存不參與 server 溝通
存入
localStorage.setItem(‘Name’,lara);
localStorage.setItem(‘User’,JSON.stringify(數據));
取出
localStorage.getItem(‘Name’);
JSON.parse(localStorage.getItem(‘User’));
刪除單一
localStorage.removeItem(‘Name’);
刪除所有
localStorage.clear();

SessionStorage

使用 key / value pair 的方式 給值或取值
大小預設有 5mb
每次 request 不會帶上
每次分頁或瀏覽器關掉後就會清除
僅在劉覽器保存不參與 server 溝通
如果遇到一些內容特別多的表單，為了提升用戶體驗，可能要把表單頁面拆分成多個子頁面，然後按照步驟引導用戶

什麼是閉包？

函式以及該函式被宣告時所在的作用域環境的組合。

什麼是Promise？

非同步（異步操作）執行流程語法。
建立Promise處理成功或是失敗

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function requestData(url) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (url === "explainthis.io") {
        resolve("hello welcome to explainthis");
      } else {
        reject("it is not explainthis");
      }
    }, 3000);
  });
}

// 1. 請求成功
requestData("explainthis.io").then((res) => {
  console.log(res); //hello welcome to explainthis
});

//2. 請求失敗
requestData("explainthis.com").catch((e) => console.log(e)); //it is not explainthis

Vue2 與Vue3 差異

  1. 生命週期變化
    Vue2:beforeCreate and Create
    Vue3:setup
  2. 渲染策略
    Vue2:提供類似Html模板編譯渲染函數返回DOM
    Vue3:DOM數級別，編譯靜態節點;元件級別
  3. Diff算法的提升
    Vue2:小於Vue3
    Vue3:大於Vue2
  4. 打包體積變化
    Vue2:未使用的文件代碼都被打包
    Vue3:模板編譯器生成對樹抖動友好的代碼，只有在模板使用時才導入該特性
  5. Ａpi類型不同
    Vue2:選項型Api（Option Api)
    Vue3:組合型Api （Composition Api）
  6. typeScript 支持
    Vue2:TypeScript 不友善
    Vue3:組合型Api （Composition Api）
  7. 雙向資料綁定原理不同
    Vue2:ES5的一个APIObject.definePropert()
    Vue3:ES6的Proxy API對數據代理
  8. 是否支援碎片
    Vue2:不支援碎片
    Vue3:支援碎片，多個根節點
  9. 定義資料變數和方法不同
    Vue2:資料放入data中，在vue2中定義資料變數是data(){} ，建立的方法要在methods:{} 中
    Vue3:使用一個新的setup()方法 ：引入reactive;reactive() 方法來聲明資料為響應性資料;使用setup()方法來傳回我們的響應性數據，從而template可以取得這些響應性數據

Vue3

利用新的語言特性(es6)
解決架構問題
速度更快:重寫了虛擬Dom實作,編譯模板的最佳化,更有效率的元件初始化,undate效能提升1.32倍,SSR速度提升了23倍
體積減少:對開發人員:實現更多其他的功能;對使用者:打包出來的包體積變小了
更易於維護:靈活的邏輯組合與復用;Vue3模組可以和其他框架搭配使用
更接近原生:VUE3是基於typescipt編寫的，可以享受到自動的類型定義提示;可以自訂渲染 API
更容易使用:響應式 Api 暴露出來;在 Vue3.x 中，元件現在支援有多個根節點