CSS学习目录
前面的話
CSS是前端工程師的基本功，但好多執(zhí)迷于學(xué)習(xí)javascript的人的基本功并不扎實(shí)?？赡芤恍┤藦膚3school網(wǎng)站匆匆過了一遍，只是對(duì)CSS常用概念有一些表面上的理解，就一頭扎進(jìn)javascript的深坑里跳不出來。實(shí)際上，javascript中比較復(fù)雜的邏輯很有可能使用CSS幾行樣式就能解決問題，而且性能還好。
CSS之所以能成為一門優(yōu)雅的語言，以及有其對(duì)應(yīng)的重構(gòu)工程師的崗位，是因?yàn)檫@本語言本身就有很強(qiáng)的存在價(jià)值，且真正要理解它并不容易。從CSS禪意花園開始，寫CSS成為一種藝術(shù)。從CSS2.1到3再到4，CSS所涵蓋的內(nèi)容及可實(shí)現(xiàn)的功能得到了極大的豐富，使得CSS的學(xué)習(xí)成本也越來越高。再多的知識(shí)，一個(gè)知識(shí)點(diǎn)一個(gè)知識(shí)點(diǎn)去學(xué)，總能學(xué)明白。
小火柴將CSS的知識(shí)體系進(jìn)行了梳理和歸納，總結(jié)成以下目錄
?
基礎(chǔ)
基礎(chǔ)語法
引入CSS
選擇器
選擇器新用法
層疊
單位
樣式關(guān)鍵字
calc()
默認(rèn)可繼承樣式
CSS Why
變量Variable
屬性速查表
?
兼容
CSS?Hack
CSS兼容性詳解
haslayout
?
偽類偽元素
偽元素
計(jì)數(shù)器
偽類
?
規(guī)范
CSS reset
CSS命名實(shí)踐
CSS規(guī)范
命名規(guī)范
CSS編碼技巧
代碼檢查工具stylelint?
布局
盒模型
【盒子尺寸】
盒模型
四個(gè)自適應(yīng)寬高關(guān)鍵字
邊框和陰影
margin要點(diǎn)
margin負(fù)值
輪廓outline
【彈性盒模型】
彈性盒模型flex
舊版flex及兼容
flex布局應(yīng)用
【盒子顯示】
溢出overflow
裁剪clip
拉伸resize
滾動(dòng)條
可見性visibility
?
普通流
display
haslayout
BFC
視覺格式化
文本方向
?
浮動(dòng)和定位
【浮動(dòng)】
浮動(dòng)
清浮動(dòng)
【定位】
定位中的偏移
定位中的堆疊z-index
絕對(duì)定位
絕對(duì)定位應(yīng)用
相對(duì)定位和固定定位
?
布局方式
【布局系統(tǒng)】
Media媒體查詢
多列布局
grid柵格布局
移動(dòng)優(yōu)先的響應(yīng)式布局
【居中布局】
水平居中
垂直居中
水平垂直居中
【常見布局】
兩端對(duì)齊
單列定寬單列自適應(yīng)布局
兩列自適應(yīng)布局
三列布局
三欄式布局(所謂的圣杯和雙飛翼布局)
等分布局
等高布局
全屏布局
sticky-footer布局
?
渲染
字體和文本
字體
? ?基礎(chǔ)文本樣式
行高與垂直對(duì)齊
換行和空白符
文本溢出和文本陰影
?
顏色和背景
顏色模式
顏色模式轉(zhuǎn)換器
前景色和透明度
背景
光標(biāo)
?
變形和動(dòng)畫
過渡transition
變形transform(2d)
變形transform(3d)
變形transform的副作用
線性漸變
徑向漸變
動(dòng)畫animation
動(dòng)畫animation的三個(gè)應(yīng)用(漂浮的白云、旋轉(zhuǎn)的星球和正方體合成)
animate.css的使用
?
渲染屬性
混合模式
濾鏡
倒影
頁面渲染優(yōu)化屬性will-change
遮罩mask
路徑裁剪clip-path
?
效果
元素顯示隱藏的9種思路
實(shí)現(xiàn)滑動(dòng)門的3種方法
CSS以圖換字的9種方法
導(dǎo)航條Tab切換
CSS畫出的圖
紋理文本
CSS文本效果
CSS邊框效果
CSS背景效果
CSS遮罩和毛玻璃效果
轉(zhuǎn)載于:https://www.cnblogs.com/xiaohuochai/p/5249139.html
總結(jié)
- 上一篇： PHP书写格式
- 下一篇： 【14】GO语言的接口类型