摘要：前端最基礎(chǔ)的就是。類(lèi)同于標(biāo)簽將對(duì)象作為彈性伸縮盒顯示。定義了一條立方貝塞爾曲線。是，表示終止時(shí)間和終止?fàn)顟B(tài)。動(dòng)畫(huà)過(guò)渡可以理解為兩個(gè)關(guān)鍵幀的補(bǔ)間操作。往期前端培訓(xùn)初級(jí)階段后記年月日更新。參考資料引用培訓(xùn)目錄出處已備份到筆記速查視差滾動(dòng)

前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門(mén)技術(shù)就算入門(mén)，但也僅僅是入門(mén)，現(xiàn)在前端開(kāi)發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTML/CSS/JS），本著提升技術(shù)水平，打牢基礎(chǔ)知識(shí)的中心思想，我們開(kāi)課啦（每周四）。

CSS選擇器(基本、層級(jí)、屬性、偽類(lèi)、偽狀態(tài))
CSS常用樣式屬性
CSS3 過(guò)渡、變換、動(dòng)畫(huà)
CSS3 3D場(chǎng)景搭建與應(yīng)用

CSS規(guī)范級(jí)別代表 CSS 1、CSS 2.1、CSS Selectors Level 3、Selectors Level 4。

[type｜=file] 實(shí)際為 [type|=file] ，在表格中無(wú)法輸入所以改成全角。（有會(huì)輸入的可以告訴我~）

后代選擇器要注意嵌套問(wèn)題如 ul{font-size: 1.5em;}

下級(jí)選擇器一般用在只希望子元素有，不希望更深層級(jí)有。

a 標(biāo)簽使用偽類(lèi)時(shí)要注意愛(ài)恨原則（LoVe/HAte）

:active 也常用來(lái)做 tab 選擇

:focus 單擊、觸摸、tab 都可以觸發(fā)

你可能注意到第一列是雙冒號(hào)，第二列是單冒號(hào)，放心不是我寫(xiě)錯(cuò)了，規(guī)范定義的是單冒號(hào)是偽類(lèi)，雙冒號(hào)是偽元素。但是瀏覽器廠商大哥不買(mǎi)賬，嗯，目前來(lái)說(shuō)單冒號(hào)會(huì)兼容性更好。

after 和 before 需要 content: "內(nèi)容"，不然會(huì)不顯示。

placeholder 屬于 shadow DOM

上面是一些我們常用，或者說(shuō)用途比較大的選擇器。一些兼容不好，新規(guī)范，雞肋一些的我沒(méi)寫(xiě)出來(lái)。有興趣可以去 MDN 中看。

下面列表中，選擇器類(lèi)型的優(yōu)先級(jí)是遞增的：

類(lèi)型選擇器（type selectors）（例如, h1）和 偽元素（pseudo-elements）（例如, ::before）
類(lèi)選擇器（class selectors） (例如,.example)，屬性選擇器（attributes selectors）（例如,[type="radio"]），偽類(lèi)（pseudo-classes）（例如, :hover）
ID選擇器（例如, #example）

通配選擇符（universal selector）(*), 關(guān)系選擇符（combinators） (+, >, ~, " ")  和否定偽類(lèi)（negation pseudo-class）(:not()) 對(duì)優(yōu)先級(jí)沒(méi)有影響。（但是，在 :not()內(nèi)部聲明的選擇器是會(huì)影響優(yōu)先級(jí)）。
給元素添加的內(nèi)聯(lián)樣式 (例如, style="font-weight:bold") 總會(huì)覆蓋外部樣式表的任何樣式，因此可看作是具有最高的優(yōu)先級(jí)。.
當(dāng)在一個(gè)樣式聲明中使用一個(gè)!important 規(guī)則時(shí)，此聲明將覆蓋任何其他聲明。雖然技術(shù)上!important與優(yōu)先級(jí)無(wú)關(guān)，但它與它直接相關(guān)。

這個(gè)就有點(diǎn)多了啊，

px 絕對(duì)單位，像素，最常用的

em 相對(duì)單位，相對(duì)于當(dāng)前對(duì)象內(nèi)文本的font-size的倍數(shù)

rem CSS3 相對(duì)單位，相對(duì)于根元素(即html元素)的font-size的倍數(shù)

vw vh CSS3 相對(duì)單位，屏幕視口，均分一百份

vmax vmin CSS3 相對(duì)單位，屏幕視口，均分一百份，寬高最大、最小值

0%/0px/0vw 可以省略單位寫(xiě)為 0

忘了，還有 % ，這個(gè)單位留作課后作業(yè)吧。

如上就是一些屬性，還有一些放出來(lái)，感興趣的可以去查一下。好了，下面我們簡(jiǎn)單介紹幾個(gè)常用的

none：隱藏對(duì)象。與visibility屬性的hidden值不同，其不為被隱藏的對(duì)象保留其物理空間

inline：指定對(duì)象為內(nèi)聯(lián)元素。

block：指定對(duì)象為塊元素。

inline-block：指定對(duì)象為內(nèi)聯(lián)塊元素。（CSS2）

table-cell：指定對(duì)象作為表格單元格。類(lèi)同于html標(biāo)簽（CSS2）

box：將對(duì)象作為彈性伸縮盒顯示。（伸縮盒最老版本）（CSS3）

inline-box：將對(duì)象作為內(nèi)聯(lián)塊級(jí)彈性伸縮盒顯示。（伸縮盒最老版本）（CSS3）

flexbox：將對(duì)象作為彈性伸縮盒顯示。（伸縮盒過(guò)渡版本）（CSS3）

inline-flexbox：將對(duì)象作為內(nèi)聯(lián)塊級(jí)彈性伸縮盒顯示。（伸縮盒過(guò)渡版本）（CSS3）

flex：將對(duì)象作為彈性伸縮盒顯示。（伸縮盒最新版本）（CSS3）

inline-flex：將對(duì)象作為內(nèi)聯(lián)塊級(jí)彈性伸縮盒顯示。（伸縮盒最新版本）（CSS3）

static：常規(guī)流。此時(shí)4個(gè)定位偏移屬性不會(huì)被應(yīng)用。

relative：常規(guī)流，位置不變，定位偏移屬性移動(dòng)的只是顯示效果。

absolute：脫離常規(guī)流，偏移屬性參照的是離自身最近的定位祖先元素，如果沒(méi)有定位的祖先元素，則一直回溯到body元素。盒子的偏移位置不影響常規(guī)流中的任何元素，其margin不與其他任何margin折疊。

fixed：與absolute一致，但偏移定位是以窗口為參考。當(dāng)出現(xiàn)滾動(dòng)條時(shí)，對(duì)象不會(huì)隨著滾動(dòng)。（IE、iOS 有兼容問(wèn)題）

sticky：對(duì)象在常態(tài)時(shí)遵循常規(guī)流。它就像是relative和fixed的合體，當(dāng)在屏幕中時(shí)按常規(guī)流排版，當(dāng)卷動(dòng)到屏幕外時(shí)則表現(xiàn)如fixed。該屬性的表現(xiàn)是現(xiàn)實(shí)中你見(jiàn)到的吸附效果。（CSS3）

center：與absolute一致，但偏移定位是以定位祖先元素的中心點(diǎn)為參考。盒子在其包含容器垂直水平居中。（CSS3）

page：與absolute一致。元素在分頁(yè)媒體或者區(qū)域塊內(nèi)，元素的包含塊始終是初始包含塊，否則取決于每個(gè)absolute模式。（CSS3）

上面一節(jié)已經(jīng)列出本節(jié)包含的屬性了，這節(jié)我們講一講，具體應(yīng)用。

縮寫(xiě)形式 transition：property duration timing-function delay;，下面我們來(lái)分開(kāi)說(shuō)明一下

    transition: border-color .5s ease-in .1s,
            background-color .5s ease-in .1s,
            color .5s ease-in .1s;

等同于

    transition-property: border-color, background-color, color;
    transition-duration: .5s, .5s, 1s; 
    transition-timing-function: ease-in, ease-in, ease-in; 
    transition-delay: .1s, .1s, .1s;

意思是 border-color 的變化執(zhí)行 0.5秒，使用 ease-in 曲線執(zhí)行，等待 0.1秒后開(kāi)始。
意思是 background-color 的變化執(zhí)行 0.5秒，使用 ease-in 曲線執(zhí)行，等待 0.1秒后開(kāi)始。
意思是 color 的變化執(zhí)行 1秒，使用 ease-in 曲線執(zhí)行，等待 0.1秒后開(kāi)始。

這個(gè)屬性的值比較有意思，可以做一些特別一些的動(dòng)畫(huà)。 圖片來(lái)自MDN:timing-function。

cubic-bezier() 定義了一條 立方貝塞爾曲線（cubic Béziercurve）。這些曲線是連續(xù)的，一般用于動(dòng)畫(huà)的平滑變換，也被稱為緩動(dòng)函數(shù)（easing functions）。
一條立方貝塞爾曲線需要四個(gè)點(diǎn)來(lái)定義，P0 、P1 、P2 和 P3。P0 和 P3是起點(diǎn)和終點(diǎn)，這兩個(gè)點(diǎn)被作為比例固定在坐標(biāo)系上，橫軸為時(shí)間比例，縱軸為完成狀態(tài)。P0 是 (0, 0)，表示初始時(shí)間和初始狀態(tài)。P3 是(1, 1) ，表示終止時(shí)間和終止?fàn)顟B(tài)。

transform 非常的靈魂，底層提供了 matrix()，matrix3d() 來(lái)操作，封裝了 translate 移動(dòng)、rotate 旋轉(zhuǎn) 、scale 縮放、skew 斜切扭曲。剛才說(shuō)的是 2D 的，加上 3D 就是 3D變換，如 translate3d()。有一個(gè)意外 perspective() 指定透視距離。

transform-origin 默認(rèn)值：50% 50%。用來(lái)設(shè)置變換的基準(zhǔn)點(diǎn)。

transform-style 默認(rèn)值：flat ，默認(rèn)是 2D 空間。設(shè)置為 preserve-3d 改成三維空間，元素將會(huì)創(chuàng)建局部堆疊上下文。

過(guò)渡可以理解為兩個(gè)關(guān)鍵幀的補(bǔ)間操作。動(dòng)畫(huà)就是一連串的關(guān)鍵幀。

animation-name：動(dòng)畫(huà)名稱，需要 @keyframes 來(lái)定義動(dòng)畫(huà)

@keyframes testanimations { 
    from { opacity: 1; } 
    to { opacity: 0; } 
}
.testanimations{
    animation: testanimations 1s;
}

animation-duration：動(dòng)畫(huà)的持續(xù)時(shí)間

animation-timing-function：動(dòng)畫(huà)執(zhí)行曲線

animation-delay：延遲的時(shí)間

animation-iteration-count：循環(huán)次數(shù)。infinite：無(wú)限循環(huán)。：指定對(duì)象動(dòng)畫(huà)的具體循環(huán)次數(shù)。

animation-direction：在循環(huán)中是否反向運(yùn)動(dòng)

    normal：正常方向(默認(rèn)值)
    reverse：反方向運(yùn)行
    alternate：動(dòng)畫(huà)先正常運(yùn)行再反方向運(yùn)行，并持續(xù)交替運(yùn)行
    alternate-reverse：動(dòng)畫(huà)先反運(yùn)行再正方向運(yùn)行，并持續(xù)交替運(yùn)行

animation-fill-mode：結(jié)束時(shí)候的狀態(tài)

    none：默認(rèn)值。不設(shè)置對(duì)象動(dòng)畫(huà)之外的狀態(tài)
    forwards：動(dòng)畫(huà)結(jié)束時(shí)的狀態(tài)
    backwards：動(dòng)畫(huà)開(kāi)始時(shí)的狀態(tài)
    both：動(dòng)畫(huà)結(jié)束或開(kāi)始的狀態(tài)

animation-play-state：動(dòng)畫(huà)暫停、開(kāi)始狀態(tài)。running：運(yùn)動(dòng)。paused：暫停。

主要應(yīng)用 perspective ，下面我們將要做一個(gè)視差滾動(dòng)的例子。

前端培訓(xùn)-初級(jí)階段（1 - 4）

2019年3月15日 更新。

昨天下午，主講人把這一課講了。這里記錄一下主講人文章，主講人cnblogs。順便記錄一下問(wèn)題吧，后面再補(bǔ)測(cè)試demo。

css選擇器權(quán)重以及覆蓋規(guī)則

translate 和 rotate 搭配使用（坐標(biāo)軸變換問(wèn)題）

justify-content: space-evenly; 兼容的解決方案

position float transfrom 之后的的層級(jí)。

...................................................早上醒來(lái)就忘了還有啥，后面如果有的話再補(bǔ)吧。

最近手里有點(diǎn)活，移動(dòng)端的拖動(dòng)排序，網(wǎng)頁(yè)播放 amr 。后續(xù)整理整理代碼也發(fā)出來(lái)。

(引用) 培訓(xùn)目錄出處-已備份到筆記

MDN

CSS速查

視差滾動(dòng)