1 Canvas和SVG圖形的區別是什麼

1.1 Canvas

通過js繪製2D圖形
逐像素進行渲染
位置發生改變會重新進行繪製

1.2 SVG

一種使用XML描述的2D圖形的語言
SVG繼續XML意味着SVG DOM中的每個元素都是可用的，可以爲某個元素附加js事件處理器
在 SVG 中，每個被繪製的圖形均被視爲對象。如果 SVG 對象的屬性發生變化，那麼瀏覽器能夠自動重現圖形。

1.3 區別

Canvas依賴分辨率，SVG不依賴
Canvas不支持事件處理器，SVG支持
Canvas弱的文本渲染能力，SVG適合帶有大型渲染區域的應用程序（比如谷歌地圖）
Canvas最適合圖像密集型的遊戲，其中的許多對象會被頻繁重繪 SVG不適合遊戲應用
Canvas能夠以 .png 或 .jpg 格式保存結果圖像
SVG複雜度高會減慢渲染速度（任何過度使用 DOM 的應用都不快）

2 Css如何實現水平居中

1、行內元素水平居中：text-align: center；
2、固定寬塊狀元素水平居中：margin：0 auto；
3、不固定寬塊狀元素水平居中：
（1）設置display：inline 然後給父元素設置text-align：center
（2）絕對定位讓元素向右偏移50%，然後向左偏移自身的50%

（3）彈性佈局1

（4）彈性佈局2
CSS3的fit-content配合左右margin爲auto實現水平居中方法

3 清除浮動的幾種方法

1、在浮動元素下方加空div，設置clear：both

2、給浮動元素的父元素設置高度

3、以浮制浮（父元素同時浮動）缺點：浮動多了容易出問題

4、結尾處加br 設置clear：both

5、給父級添加overflow:hidden

6、給父元素加overflow：auto

7、給父元素定義display：table

8、父級div定義僞類 :after和zoom
使用 zoom:1觸發 hasLayout

4 img標籤上alt和title的區別

alt是圖片不顯示時顯示的文字
title是鼠標放在圖片上提示的文字

5 絕對定位和相對定位的區別

1、參照物不同，絕對定位的參照物是父元素，相對定位的參照物是元素本身
2、絕對定位將元素脫離文檔流，因此不佔空間。相對定位不破壞正常文檔流順序，依然佔用空間

6 三欄佈局（左右定寬，中間自適應）

左右兩邊固定寬度300px，中間自適應寬度

6.1 浮動

左右兩邊浮動，使元素脫離文檔流，中間元素正常在文檔流中
缺點：順序問題，中間元素必須放在最後。當瀏覽器窗口很小時，右邊元素會被擠到下一行

6.2 絕對定位

三塊都加display：absolute;
然後左右加寬高left：0/right：0;
中間加left:300px; right:300px;

6.3 flex佈局

給父元素設置 display：flex;
左右設置寬高，中間設置 flex：1;

6.4 表格佈局

給父元素設置 display：table;
三塊都加上display: table-cell;

6.5 網格佈局

給父元素設置

display：grid; 
grid-template-rows: 100px; 
grid-template-columns: 300px auto 300px;

7 動效

讓頁面更加生動
爲什麼要用：簡單說就是爲了有趣、美觀。

7.1 原理

動效是元素的移動、形狀大小等隨時間的變化

7.2 動效能解決什麼問題

1、流暢
用動畫效果可以使app、手機產品等操作更平滑，用戶體驗效果更好
2、高效反饋
讓用戶有操縱感、知道當前app的瀏覽狀態是等待加載還是正在下載或其他變化，通過各種動效給用戶做出及時的反饋
3、引導作用
通過動效指導用戶，使用戶快速熟練應用app
4、層級顯示
一款APP無論是簡單還是複雜，都有自己的邏輯架構和邏輯層級，那當邏輯比較多的時候、層級比較深的時候，我們就需要讓用戶在APP使用過程當中不迷路，能夠讓用戶知道自己處於哪一個層級，這個頁面和下一個頁面是什麼層級關係。也可以通過動效的方法來展現。
5、增強操作
模擬現實，不需要提示，增強用戶代入感
6、創新體驗
在可用性良好的情況下，增加一些細節
7、吸引用戶注意力

7.3 Css3動效

transition： 對元素設置transition時間（單位s）。

transform：
	1、translate(0px,0px) 元素位置左右或者上下移動
	2、rotate(30deg)元素在自身的位置上逆時針或者順時針旋轉
	3、scale(2) 元素本身縮小放大的效果   （常用）
	4、skew以x、y軸爲中心旋轉

下面是transform的四個栗子：

7.4 動畫（animation）

動畫屬性可以逐漸地從一個值變化到另一個值，比如尺寸大小、數量、百分比和顏色

7.5 多列

8 僞類的使用

CSS僞類是用來添加一些選擇器的特殊效果。

僞類的語法：
	selector:pseudo-class {property:value;}
常用僞類：
	:link               	未訪問
	:visited   　　　　		已訪問
	:hover               	鼠標懸停
	:active              	鼠標按下
	:not(s)              	匹配不含s選擇器的元素
	:frist-child           	父元素的第一個元素
	:last-child            	父元素的最後一個元素
	:only-child            	父元素的唯一一個元素
	:checked              	選中 :checked+僞元素

Css3 常見技術面試題（二）

Css3常見技術面試題