1、【CSS進(jìn)階】CSS 顏色體系詳解

　　知識(shí)點(diǎn)梳理：

　　　　a、顏色關(guān)鍵字錯(cuò)誤時(shí)，該條CSS屬性將無(wú)效，而不是使用currentColor替代

　　　　b、CSS3之前，transparent只能用于border-color、background-color，CSS3中transparent則作為一個(gè)顏色值使用

　　　　c、transparent的妙用：1、繪制三角形；2、增大可點(diǎn)擊區(qū)域

　　　　d、rgb與hsl的定義及轉(zhuǎn)換

?2、CSS常見(jiàn)居中討論

　　　知識(shí)點(diǎn)梳理：

　　　　a、左右居中常用text-align和margin: 0 auto

　　　　b、上下居中常用：

　　　　　　　　1、借助table-cell；

　　　　　　　　2、top: 50%和margin-top/translate(0, -50%)結(jié)合，左右居中也可以使用該方法

　　　　c、position: absolute和margin: auto結(jié)合，達(dá)到上下左右居中

　　　　d、b1與c兼容ie8+、chrome，但ie7不行

3、判斷鼠標(biāo)移入移出元素時(shí)的方向

　　　知識(shí)點(diǎn)梳理：

　　　　a、CSS3屬性：transition的靈活使用

　　　　b、調(diào)用DOM元素的offsetWidth屬性，會(huì)立即觸發(fā)頁(yè)面重繪（正常情況下，在js線程閑置時(shí)頁(yè)面才會(huì)重繪）

　　　　c、注意mouseenter、mouseleave與mouseover、mouseout的不同

　　　　d、通過(guò)方法getBoundingClientRect()可以獲取當(dāng)前元素的坐標(biāo)區(qū)域，通過(guò)斜率判斷移動(dòng)的方向

4、【CSS進(jìn)階】偽元素的妙用--單標(biāo)簽之美

　　　知識(shí)點(diǎn)梳理：

　　　　a、偽元素::before、::after可以使一個(gè)標(biāo)簽當(dāng)三個(gè)標(biāo)簽使用，可以消除多余元素，極大增強(qiáng)html的語(yǔ)義性

　　　　b、ie7及以下不支持befor等偽元素，ie8+、chrome均支持

　　　　c、使用after偽類可以清理浮動(dòng)，詳細(xì)介紹：用after偽類清除浮動(dòng)

　　　　　　　　.container:after{content:''; display:block; clear:both} .container{*zoom:1} ? ? ?此樣式更為簡(jiǎn)潔

　　　　d、ie7及以下兼容（*），而ie8+、chrome不兼容，c 中即可以使用該hack

　　　　e、使用偽元素可以解決css sprites圖標(biāo)間距的問(wèn)題

?5、文件各種上傳，離不開(kāi)的表單

　　待實(shí)踐，注意文章后面的引用，另外，一篇關(guān)于文件下載的文章：文件下載之?dāng)帱c(diǎn)續(xù)傳（客戶端與服務(wù)端的實(shí)現(xiàn)）

?

轉(zhuǎn)載于:https://www.cnblogs.com/MattCheng/p/5707227.html

總結(jié)

以上是生活随笔為你收集整理的精品文章收藏的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。