selecter
解析方式和效能
瀏覽器的解析方式是從右往左的
body div .class
//瀏覽器先查詢.class,再查詢對應元素是否在div元素中再去查詢是否在body元素中
名稱權重（不能進製）
important
max行間樣式
1000
id100
class | 屬性 | 偽類
10標籤 | 偽元素
1萬用字元
0這塊對於設計出身的小夥伴來說非常好理解。需要注意的地方就是在設定font-family的時候指定字型組是不要引號的
多字型fallback機制，乙個個往下找，沒有就找同類的，再沒有就有啥用啥。┑(￣д ￣)┍
fallback機制是直接面對文字的，而不是某個元素
.chinese
引入自定義字型
@font-face
.custom-font
iconfont：可以理解為做成字型的向量圖示
相關的知識點
行內元素的行高會撐起外部block，不會引起內部的變化 。
行內元素高度和字型大小有關係和line-height沒有關係。
同一塊級元素內的行內元素預設是以基線對齊的（所有內聯元素包括img都受其影響）
可以通過vertical-align修改對齊方式（基線 中線 頂線 底線）
vertical-align:0px;這樣寫的話是以基線為基礎的，正值是向上偏移
單色背景的寫法
.class
漸變色背景
.class2
background-repeat
:no-repeat; //禁止平鋪； repeat-x /repeat-y
background-position
:center center //也可以指定左上邊距
background-size
: 30px 30px;
width
:20px;
height
:20px;
background
:url(./test_bg.png) no-repeat;
background-position
: -17px -5px;//相對於容器而非背景圖
background-size
: 30px 30px;
//通過修改位置和大小來定位需要的區域
適應高清屏需要縮小來增加dpi
background
;background-repeat
: no-repeat;
轉換成base64 體積會增大大約1/3
有傳輸優勢，但是會增加瀏覽器的負載，適用於小圖
生產環境中一般交給打包框架來做
/*基礎使用方式*/
border
: 1px solid red;
border
:5px solid red;
border
:5px dotted red;
border
:5px dashed red;
border-radius
:2px;
/*邊框背景圖（九宮格、中間可復用）*/
CSS（非布局樣式總結）
css 非布局樣式 問題1.css樣式 選擇器 的優先順序 1.計算權重 2.important 級別最高 實際開發盡量不用 3.內聯樣式比外聯樣式高，在外聯樣式中，id 選擇器級別最高，其次是類選擇器，最後是元素選擇器和偽類 4.後寫的優先順序高 問題2.雪碧圖的作用 1.減少 http 請求數，...
CSS非布局樣式 字型
一 字型的分類 有兩個型別的名稱可用於分類字型 字型族名稱 family name 族類 generic family 二 多字型fallback 實現多平台下的字型的適配 css屬性font family的作用是設定一組按優先順序排序的字型列表，如果該列表中的第乙個字型未在訪問者計算機上安裝，那麼...
CSS非布局樣式背景 邊框
hsla 60,100 50 四個引數 顏色 0 360 飽和度 亮度 透明度 hsl 可以不設透明度 漸變色背景 background webkit linear gradient left,red,green background linear gradient to right,red,gre...