CSS基礎(chǔ)
1奄妨、css樣式(選擇器)的優(yōu)先級(jí)
計(jì)算權(quán)重的確定
!important
內(nèi)聯(lián)樣式
后寫的樣式優(yōu)先級(jí)高(前提是大家的權(quán)重一樣)
2炊琉、雪碧圖的作用
減少HTTP請(qǐng)求次數(shù) 提高加載性能
有一些情況下可以減少圖片大小
3苔咪、自定義字體的使用場(chǎng)景
宣傳/品牌/banner等固定文案
字體圖標(biāo)
4团赏、base64的使用
用于減少HTTP請(qǐng)求
使用于小圖片
base64的體積約為原圖4/3
5耐薯、偽類和偽元素的區(qū)別
偽類表狀態(tài)
偽元素是真的有元素
前者單冒號(hào)曲初,后者雙冒號(hào)
6、如何美化checkbox
label[for]和id
隱藏原生input
:checked + label
css布局
1抒痒、實(shí)現(xiàn)兩欄(三欄)布局的方法
表格布局
float + margin布局
inline-block布局
flex布局
2故响、position:absoute/fixed有什么區(qū)別
前者相對(duì)最近的relative/absoute
后者相對(duì)于屏幕(viewport)
3彩届、display:inline-block
原因:字符間距的間隙
解決: 消滅字符或者消滅間距
4誓酒、如何清除浮動(dòng)
讓盒子負(fù)責(zé)自己的布局
overflow:hidden(auto)
::after{clear:both}
5、如何適配移動(dòng)端頁(yè)面
viewport
rem/viewport/media query
設(shè)計(jì)上:隱藏寂汇、折行骄瓣、自適應(yīng)
css效果
1耍攘、如何用一個(gè)div畫xxx
box-shadow無(wú)限投影
::after
::before
2蕾各、如何產(chǎn)生不占空間的邊框
box-shadow
outline
3式曲、如何實(shí)現(xiàn)圓形(頭像)
border-radius: 50%
5吝羞、如何實(shí)現(xiàn)半圓钧排、扇形等圖形
border-radius:組合
有無(wú)邊框
邊框粗細(xì)
圓角半徑
7恨溜、如何放大糟袁、平移一個(gè)元素
transform:translateX(100px)
transform:scale(2)
8项戴、如何實(shí)現(xiàn)3D效果
css動(dòng)畫
1肯尺、css實(shí)現(xiàn)動(dòng)畫的方式有幾種
transiton
keyframes(animation)
3槐臀、如何實(shí)現(xiàn)逐幀動(dòng)畫
使用關(guān)鍵幀動(dòng)畫
補(bǔ)掉補(bǔ)間(steps)
css預(yù)處理器
常見(jiàn)的css預(yù)處理器有兩種:
less(Node.js)
sass(Ruby有Node版本)
Bootstrap
css工程化方案
Bootstrap
總結(jié)
css學(xué)習(xí)路徑
css工作應(yīng)用
css面試技巧