寫(xiě)在前面的話(huà)
1. 規(guī)范
每項(xiàng)規(guī)范從最初啟動(dòng)到最終成熟，都會(huì)經(jīng)過(guò)如下階段：
編輯草案(ED)
- 收割公開(kāi)工作草案(FRWD)
- 工作草案(WD)
- 候選推薦規(guī)范(CR)
- 提名推薦規(guī)范(PR)
- 正式推薦規(guī)范(REC)
2.css
相信你的眼睛，而不是數(shù)字
人的眼睛并不是一臺(tái)完美的輸入設(shè)備。有時(shí)候精準(zhǔn)的尺度看起來(lái)并不精準(zhǔn)蹬竖，而我們的設(shè)計(jì)需要順應(yīng)這種偏差。
看一個(gè)完美居中的物體時(shí)，會(huì)感覺(jué)它并不居中币厕。實(shí)際上列另，我們應(yīng)該把這個(gè)物體從幾何學(xué)的中心點(diǎn)再晚上稍微上挪一點(diǎn)。
寬度相同的圓形和正方形旦装，圓形會(huì)顯得小一點(diǎn)页衙。
上述視覺(jué)上的錯(cuò)覺(jué)在任何形式的視覺(jué)設(shè)計(jì)中都普遍存在，需要我們有針對(duì)性地進(jìn)行調(diào)整阴绢。
響應(yīng)式設(shè)計(jì)
避免不必要的媒介查詢(xún)
保持代碼的DRY
在軟件開(kāi)發(fā)中店乐，保持代碼的DRY 和可維護(hù)性是最大的挑戰(zhàn)之一，而這句話(huà)對(duì)CSS 也是適用的呻袭。在實(shí)踐中眨八，代碼可維護(hù)性的最大要素是盡量減少改動(dòng)時(shí)要編輯的地方
案例
多重邊框
涉及屬性：
1. box-shadow （ 設(shè)置多層純色shadow）
投影不會(huì)影響布局，不會(huì)受到box-sizing屬性的影響左电，不會(huì)影響鼠標(biāo)事件廉侧，比如懸停、點(diǎn)擊
// 因此不能用于處理項(xiàng)目中 slider熱點(diǎn)優(yōu)化
2. outline
處理兩層邊框
優(yōu)點(diǎn)： 邊框樣式靈活
偽隨機(jī)背景
知識(shí)點(diǎn)
linear-gradient(90deg, #fb3 15%,#665 0,#665 40%, #ab4 0,#ab4 65%,
hsl(20, 40%, 90%) 0);
//設(shè)置垂直漸變背景
// #fb3為[0,15%] #665為[0,40%] 以此類(lèi)推券腔，如果開(kāi)始寫(xiě)的不是0伏穆，代表從上一個(gè)結(jié)束位置開(kāi)始漸變;
注意事項(xiàng)
大的background-size 要放在后面；
蟬原則： 通過(guò)質(zhì)數(shù)來(lái)增加隨機(jī)性
條紋背景
background: linear-gradient(to right, #fb3 50%, #58a 0);
background-size: 30px 100%
// 角度靈活的斜向條紋
background: repeating-linear-gradient
//靈活的同色系條紋
background-image: repeating-linear-gradient(30deg,
hsla(0, 0%, 100%, .1 )纷纫，
hsla(0,0%,100%, .1) 15px,
transparent 0 , transparent 30px);
知識(shí)點(diǎn)
H：
Hue(色調(diào))。0(或360)表示紅色陪腌，120表示綠色辱魁，240表示藍(lán)色，也可取其他數(shù)值來(lái)指定顏色诗鸭。取值為：0 - 360
S：
Saturation(飽和度)染簇。取值為：0.0% - 100.0%
L：
Lightness(亮度)。取值為：0.0% - 100.0%
A：
Alpha透明度强岸。取值0~1之間锻弓。
半橢圓 （也是略糾結(jié)的地方，第二個(gè)圖形沒(méi)畫(huà)出來(lái)）
border-radius：可以為所有四個(gè)角提供完全不同的水平和垂直半徑
菱形
正方形圖片
transform: rotate(-45deg) scale(1.42);
插入換行
控制首個(gè)tr不換行
老套的 <br>
遇到多個(gè)dd 使用選擇器作為輔助
dt ～dt
CSS3的同級(jí)元素通用選擇器 E ~ F
匹配任何在E元素之后的同級(jí)F元素
dd + dt
毗鄰元素選擇器 E + F 匹配所有緊隨E元素之后的同級(jí)元素F
文本行斑馬條紋
華麗的 &符號(hào)（hack）
擴(kuò)大可點(diǎn)擊區(qū)域
根據(jù)兄弟元素?cái)?shù)量設(shè)置樣式
緊貼底部的頁(yè)腳
在智漁云文檔中用到蝌箍，使用flex布局
自定義復(fù)選框??
input["checkbox"]{
position: absolute;
clip: rect(0,0,0,0);
}
// label ::before 設(shè)置為不換行空格 `\a0`
