CSS基礎(chǔ)

1、css樣式（選擇器）的優(yōu)先級
計算權(quán)重的確定
!important
內(nèi)聯(lián)樣式
后寫的樣式優(yōu)先級高（前提是大家的權(quán)重一樣)

2、雪碧圖的作用
減少HTTP請求次數(shù) 提高加載性能
有一些情況下可以減少圖片大小

3、自定義字體的使用場景
宣傳/品牌/banner等固定文案
字體圖標(biāo)

4、base64的使用
用于減少HTTP請求
使用于小圖片
base64的體積約為原圖4/3

5、偽類和偽元素的區(qū)別
偽類表狀態(tài)
偽元素是真的有元素
前者單冒號，后者雙冒號

6、如何美化checkbox
label[for]和id
隱藏原生input
:checked + label

css布局

1、實現(xiàn)兩欄（三欄）布局的方法
表格布局
float + margin布局
inline-block布局
flex布局
2、position:absoute/fixed有什么區(qū)別
前者相對最近的relative/absoute
后者相對于屏幕(viewport)
3、display:inline-block
原因：字符間距的間隙
解決： 消滅字符或者消滅間距
4、如何清除浮動
讓盒子負責(zé)自己的布局
overflow:hidden(auto)
::after{clear:both}
5、如何適配移動端頁面
viewport
rem/viewport/media query
設(shè)計上：隱藏、折行、自適應(yīng)

css效果

1、如何用一個div畫xxx
box-shadow無限投影
::after
::before
2、如何產(chǎn)生不占空間的邊框
box-shadow
outline
3、如何實現(xiàn)圓形（頭像）
border-radius: 50%

QQ截圖20180716150305.png

5、如何實現(xiàn)半圓、扇形等圖形
border-radius:組合
有無邊框
邊框粗細
圓角半徑

image.png

7、如何放大、平移一個元素
transform:translateX(100px)
transform:scale(2)
8、如何實現(xiàn)3D效果

image.png

css動畫

1、css實現(xiàn)動畫的方式有幾種
transiton
keyframes(animation)

image.png

3、如何實現(xiàn)逐幀動畫
使用關(guān)鍵幀動畫
補掉補間(steps)

image.png

css預(yù)處理器

常見的css預(yù)處理器有兩種：

less(Node.js)
sass(Ruby有Node版本）

image.png

image.png

image.png

Bootstrap

image.png

image.png

image.png

css工程化方案

image.png

image.png

image.png

image.png

image.png

Bootstrap

image.png

image.png

image.png

總結(jié)

css學(xué)習(xí)路徑
css工作應(yīng)用
css面試技巧

image.png

image.png

image.png

image.png