css使用技巧

當大家設計不夠給力的時候,如下的css 技巧可以有效的幫助你提升工做效率.

一 儘可能減小重複的代碼

　　+ 當某些值相互依賴時,須要把這種關係表示出來.

　　　　如: font-size 和line-height 之間的關係

　　　　　  em 爲單位,適用於父的字號大小,可是須要注意的一點並非全部的效果都須要跟着組件變化.

　　　　　  %爲單位,表現與父盒子之間的關係.

　　　　　  rem 爲單位,結合媒體查詢,適用於移動端適配.

　　+ 代碼易維護 VS. 代碼量, 二者不可兼得

　　　　如: { border-width: 1px 0 1px 1px } => {border-width:1px; border-left-widht:0} 後者比前者易維護,可是多一行代碼, 我更習慣用後者.

　　+ currentColor 顏色 ,

　　　　    currentColor顏色能夠保持和文本顏色一致的顏色.

　　+繼承   

　　　　   inherit 關鍵字,對於 input select button 表單元素設定和 其餘部分字體設置一致 {font-size:inherit}, inherit關鍵字基本能夠應用全部的屬性

二  數字 ≠ 視覺效果

　　+  在矩形的盒子  數字的中心並非視覺上的中心. 視覺的中心通常要偏上一點.

　　+  相同 寬度的正方形看着比圓形要打

三 響應式佈局

　　+ 濫用媒體查詢(@media) 

　　　　1 媒體查詢比較消耗性能

　　　　2 濫用媒體查詢會增長咱們的修改爲本.

　　+ 響應式網頁技巧

　　　　如: 使用百分比佈局 或者與視口相關的單位 (vw,vh,vmin,vmax——必須給body 設定寬高 100%不然可能取不到)

　　　　　 max-width 有利於適應小屏幕

　　　　　 當使用{background-size:cover}的時候,應該考慮帶寬問題, 儘可能使用合適大小的圖片,而不是使用css 吧圖片放大縮小

　　　　　 使用彈性盒{display:flex}佈局 、行內塊 {display:inline-block}、 浮動{float:left} 能更好的處理適配中的文字問題

四 合理使用簡寫

五 預處理器(less ,sass,stylus,等)

　　　預處理器寫代碼是很爽, 可是也不是一點問題沒有

　　　　1/ 預處理語言目前種類比較多,每加入一個協做者,都要進行學習和培訓

　　　　2/ 抽象泄漏法則：「全部重大的抽象機制在某種程度上都存在泄漏的狀況。」

六  calc(100%-40px)函數