一衷恭、層疊樣式表（ CCS）
發(fā)明人：李爵士的挪威同事---賴先生腾夯。
層疊的含義：樣式層疊校套、選擇器層疊价脾、文件層疊。
使用最廣泛的版本（IE支持）：CSS2.1（2004~2011）笛匙。
現(xiàn)代版本（分模塊侨把，IE8部分支持）：CSS3（1999年開始起草）。
CSS特性瀏覽器支持查詢網(wǎng)站：Can I use... Support tables for HTML5, CSS3, etc
CSS學(xué)習(xí)方法：
1.CSS是一門藝術(shù)妹孙，學(xué)好需要想象力秋柄。
2.不要問【為什么會(huì)這樣】，只管做蠢正，記住【原來是這樣】骇笔。
3.只要效果好，代碼爛一些無所謂嚣崭。
4.COPY+RUN+MODIFY -----CRM （抄笨触、運(yùn)行、修改）
語法一：樣式語法
選擇器 {
屬性名：屬性值雹舀；
/*注釋*/
}
語法二：@語法
@charset "UTF-8"
@import url(2.css);
@media (min-width:100px) and (max-width:200px){}
二旭旭、瀏覽器渲染原理
渲染流程：
1.根據(jù)HTML構(gòu)建HTML樹（DOM）；
2.根據(jù)CSS構(gòu)建CSS樹（CSSDOM）源梭；
3.將兩棵樹合并成一顆渲染樹（render?tree）娱俺；
4.Layout布局（文檔流、盒模型废麻、計(jì)算大小和位置）荠卷；
5.Paint?繪制（將邊框顏色、文字顏色烛愧、陰影等畫出來）油宜；
6.Compese合成（根據(jù)層疊關(guān)系展示畫面）；
三種更新方式：
更新流程觸發(fā)檢測(cè)：CSS Triggers
三怜姿、CSS 動(dòng)畫的兩種做法（transition 和 animation）
transition（過渡）
*作用：補(bǔ)充中間幀
*語法：
transition:屬性名?時(shí)長(zhǎng)?過渡方式?延遲
transition:left 200ms linear
可用逗號(hào)分隔兩個(gè)不同屬性:? ? transition: left 200ms,top 400ms
可用all代表所有屬性：? ? transition: all 200ms
過渡方式有：linear |?ease |?ease-in | ease-out | ease-in-out |?cubic-bezier |?step-start | step-end | steps
*注意
#并非所有屬性都能過渡慎冤，例如：
display:none => block?無法過渡
一般需改成visibility:hidden=>visible
background顏色可以過渡，opacity透明度也可以過渡
【display: none與visibility: hidden的區(qū)別】
display與元素的隱藏
如果給一個(gè)元素設(shè)置了display: none沧卢，那么該元素以及它的所有后代元素都會(huì)隱藏蚁堤，它是前端開發(fā)人員使用頻率最高的一種隱藏方式。隱藏后的元素?zé)o法點(diǎn)擊但狭，無法使用屏幕閱讀器等輔助設(shè)備訪問披诗，占據(jù)的空間消失撬即。
visibility與元素的隱藏
給元素設(shè)置visibility: hidden也可以隱藏這個(gè)元素，但是隱藏元素仍需占用與未隱藏時(shí)一樣的空間呈队，也就是說雖然元素不可見了剥槐，但是仍然會(huì)影響頁面布局。
很多前端的同學(xué)認(rèn)為visibility: hidden和display: none的區(qū)別僅僅在于display: none隱藏后的元素不占據(jù)任何空間宪摧，而visibility: hidden隱藏后的元素空間依舊保留 粒竖，實(shí)際上沒那么簡(jiǎn)單，visibility是一個(gè)非常有故事性的屬性
1绍刮、visibility具有繼承性温圆，給父元素設(shè)置visibility:hidden;子元素也會(huì)繼承這個(gè)屬性。但是如果重新給子元素設(shè)置visibility: visible,則子元素又會(huì)顯示出來孩革。這個(gè)和display: none有著質(zhì)的區(qū)別岁歉；
2、visibility: hidden不會(huì)影響計(jì)數(shù)器的計(jì)數(shù)膝蜈，如圖所示锅移，visibility: hidden雖然讓一個(gè)元素不見了，但是其計(jì)數(shù)器仍在運(yùn)行饱搏。這和display: none完全不一樣非剃；
3、CSS3的transition支持visibility屬性推沸，但是并不支持display备绽，由于transition可以延遲執(zhí)行，因此可以配合visibility使用純css實(shí)現(xiàn)hover延時(shí)顯示效果鬓催。提高用戶體驗(yàn)肺素。
*過渡必須要有起始，一般只有一次動(dòng)畫或者兩次宇驾，比如hover和非hover狀態(tài)的過渡倍靡。如果除了起始，還有中間课舍，怎么辦塌西？
*兩種方法：
1.使用兩次transform?
.a===transform===>.b
.b===transform===>.c
*如何知道中間點(diǎn)呢？用setTimeout或者監(jiān)聽transitionend事件筝尾。
animation的使用
*聲明關(guān)鍵幀
? @keyframes XXX {?
form{
? ? ? ?transform:translateX(0%);
}
to{
? ? transform:translateX(100%)
}
}
@keyframes YYY{
0%{}
30%{}
68%,72%{}
100%{}
}
*添加動(dòng)畫 {animation xxx 1s;}
*讓動(dòng)畫停在最后一幀捡需，加上"forward"。
