前端培訓-初級階段（5 - 8）

PAMPANG 發(fā)布于2019-08-30 15:56 / 2379人閱讀

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

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

我們要講什么

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

CSS選擇器(基本、層級、屬性、偽類、偽狀態(tài)) 基本選擇器

選擇器	例子	例子描述	CSS規(guī)范級別
ID 選擇器	#login	選擇 id="login" 的元素	1
類別選擇器	.btn	選擇 class="btn" 的所有元素	1
元素選擇器	div	選擇所有 div 標簽	1
通配選擇器	*	選擇所有標簽	2
屬性選擇器	[type]	選擇有 type 屬性的所有元素	2
屬性選擇器	[type=file]	選擇 type="file" 且全匹配的所有元素	2
屬性選擇器	[class~=file]	選擇有 class="file" 且多值匹配屬性的所有元素	2
屬性選擇器	[type｜=file]	選擇有 type 屬性且值為 file 或 file- 為前綴的所有元素	2
屬性選擇器	[type^=file]	選擇有 type 屬性且 file 開頭的所有元素	3
屬性選擇器	[type$=file]	選擇有 type 屬性且 file 結(jié)尾的所有元素	3
屬性選擇器	*[type=file]**	選擇有 type 屬性且包含 file 的所有元素	3

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

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

組合選擇器

選擇器	例子	例子描述	CSS規(guī)范級別
分組	html,body	選擇和	1
后代空格	ul li	選擇祖先元素為元素的所有元素。	1
下級	ul>li	選擇父元素為元素的所有元素。	2
相鄰兄弟	div+div	選擇緊接在元素之后的元素。	2
兄弟	h2~div	選擇在元素之后的所有元素	3

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

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

偽類選擇器

選擇器	例子	例子描述	CSS規(guī)范級別
:link	a:link	未被訪問的鏈接	1
:visited	a:visited	已被訪問的鏈接	1
:hover	a:hover	（鼠標懸浮在上面）鼠標正在上面的鏈接	1
:active	a:active	鼠標正在按下的鏈接	1
:focus	input:focus	有焦點的input	2
:first-child	div :first-child	代表父元素的第一個子元素	2
:last-child	div :last-child	代表父元素的最后一個子元素	3
:nth-child(n)	div :nth-child(2n)	代表父元素的中偶數(shù)位子元素	3
:empty	div:empty	空的 div	3
:target	:target	匹配錨點元素	3
:disabled	input:disabled	不可用的input	3
:checked	:checked	選中的 checkbox、radio、select	3
:not(selector)	div:not(:empty)	所有不為空的 div	3
:focus-within	form:focus-within	高亮獲得焦點的表單	4

a 標簽使用偽類時要注意愛恨原則（LoVe/HAte）

:active 也常用來做 tab 選擇

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

偽元素選擇器

選擇器	例子	例子描述	CSS規(guī)范級別
::after	.icon:after	在標簽里面的最后增加一個行內(nèi)元素	2
::before	.icon:before	在標簽里面的最前面增加一個行內(nèi)元素	2
::placeholder	input::placeholder	修改文本框的 placeholder 樣式	4

你可能注意到第一列是雙冒號，第二列是單冒號，放心不是我寫錯了，規(guī)范定義的是單冒號是偽類，雙冒號是偽元素。但是瀏覽器廠商大哥不買賬，嗯，目前來說單冒號會兼容性更好。

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

placeholder 屬于 shadow DOM

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

差點忘記的權(quán)重計算（優(yōu)先級）

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

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

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

2. CSS常用樣式屬性

這個就有點多了啊，

數(shù)值單位

px 絕對單位，像素，最常用的

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

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

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

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

0%/0px/0vw 可以省略單位寫為 0

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

CSS 屬性

類型	屬性
定位	position / z-index / top / right / bottom / left / clip
布局	display / float / clear / visibility / overflow / overflow-x / overflow-y
盒子-大小	width / min-width / max-width / height / min-height / max-height
盒子-外	margin / margin-top / margin-right / margin-bottom / margin-left
盒子-內(nèi)	padding / padding-top / padding-right / padding-bottom / padding-left
邊框	border / border-width / border-style / border-color / border-top / border-top-width / border-top-style / border-top-color / border-right / border-right-width / border-right-style / border-right-color / border-bottom / border-bottom-width / border-bottom-style / border-bottom-color / border-left / border-left-width / border-left-style / border-left-color / border-radius / border-top-left-radius / border-top-right-radius / border-bottom-right-radius / border-bottom-left-radius / box-shadow / border-image / border-image-source / border-image-slice / border-image-width / border-image-outset / border-image-repeat
背景	background / background-color / background-image / background-repeat / background-attachment / background-position / background-origin / background-clip / background-size
顏色	color / opacity / / Color Name / HEX / RGB / RGBA / HSL / HSLA / transparent / currentColor
變換	transform-origin / transform-style / perspective / perspective-origin / backface-visibility
過渡	transition / transition-property / transition-duration / transition-timing-function / transition-delay
動畫	animation / animation-name / animation-duration / animation-timing-function / animation-delay / animation-iteration-count / animation-direction / animation-play-state / animation-fill-mode

如上就是一些屬性，還有一些放出來，感興趣的可以去查一下。好了，下面我們簡單介紹幾個常用的

display 屬性

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

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

block：指定對象為塊元素。

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

table-cell：指定對象作為表格單元格。類同于html標簽（CSS2）

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

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

flexbox：將對象作為彈性伸縮盒顯示。（伸縮盒過渡版本）（CSS3）

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

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

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

position 屬性

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

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

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

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

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

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

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

3. CSS3 過渡、變換、動畫

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

transition 過渡

縮寫形式 transition：property duration timing-function delay;，下面我們來分開說明一下

屬性名	描述	默認值
transition-property	執(zhí)行過渡動作的屬性	all
transition-duration	動作執(zhí)行時間	0
transition-timing-function	動作執(zhí)行曲線 ease	ease
transition-delay	延遲執(zhí)行動畫的時間	0

    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秒后開始。
意思是 background-color 的變化執(zhí)行 0.5秒，使用 ease-in 曲線執(zhí)行，等待 0.1秒后開始。
意思是 color 的變化執(zhí)行 1秒，使用 ease-in 曲線執(zhí)行，等待 0.1秒后開始。

transition-timing-function 說明

這個屬性的值比較有意思，可以做一些特別一些的動畫。圖片來自MDN:timing-function。

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

變換

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

transform-origin 默認值：50% 50%。用來設(shè)置變換的基準點。

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

動畫

過渡可以理解為兩個關(guān)鍵幀的補間操作。動畫就是一連串的關(guān)鍵幀。

animation-name：動畫名稱，需要 @keyframes 來定義動畫

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

animation-duration：動畫的持續(xù)時間

animation-timing-function：動畫執(zhí)行曲線

animation-delay：延遲的時間

animation-iteration-count：循環(huán)次數(shù)。infinite：無限循環(huán)。：指定對象動畫的具體循環(huán)次數(shù)。

animation-direction：在循環(huán)中是否反向運動

    normal：正常方向(默認值)
    reverse：反方向運行
    alternate：動畫先正常運行再反方向運行，并持續(xù)交替運行
    alternate-reverse：動畫先反運行再正方向運行，并持續(xù)交替運行

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

    none：默認值。不設(shè)置對象動畫之外的狀態(tài)
    forwards：動畫結(jié)束時的狀態(tài)
    backwards：動畫開始時的狀態(tài)
    both：動畫結(jié)束或開始的狀態(tài)

animation-play-state：動畫暫停、開始狀態(tài)。running：運動。paused：暫停。

4. CSS3 3D場景搭建與應(yīng)用

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

往期

前端培訓-初級階段（1 - 4）

后記

2019年3月15日更新。

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

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

translate 和 rotate 搭配使用（坐標軸變換問題）

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

position float transfrom 之后的的層級。

...................................................早上醒來就忘了還有啥，后面如果有的話再補吧。

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

參考資料

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

MDN

CSS速查

視差滾動

GPU云服務(wù)器云服務(wù)器初級前端工程師初級前端開發(fā)工程師簡歷前端培訓前端前端前端培訓

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/117517.html

發(fā)表評論

登陸后可評論

0條評論

PAMPANG

男|高級講師

我要關(guān)注我要私信

TA的文章

前端培訓-初級階段（5 - 8）

閱讀 2380·2019-08-30 15:56
前端學習各階段分別都在哪學？

閱讀 1038·2019-08-30 15:55
前端面試每日3+1——第115天

閱讀 3202·2019-08-30 15:44
提升網(wǎng)站頁面速度的14條最佳實踐（一）

閱讀 932·2019-08-30 10:53
HTML與CSS中的顏色與單位個人分享

閱讀 1887·2019-08-29 16:33
CSS基礎(chǔ)

閱讀 2467·2019-08-29 16:13
20170601-BFC(塊級格式化上下文)

閱讀 719·2019-08-29 12:41
設(shè)置首字母大寫算法（JavaScript）

閱讀 874·2019-08-26 13:56

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

前端培訓-初級階段（5 - 8）

元素之后的所有
元素

相關(guān)文章

前端培訓-中級階段（8）- jQuery元素屬性樣式操作（2019-08-01期）

前端培訓-中級階段（8）- jQuery元素屬性樣式操作（2019-08-01期）

前端培訓-中級階段（8）- jQuery元素屬性樣式操作（2019-08-01期）

前端培訓-中級階段（11、12）- 跨域請求原理以及實現(xiàn)（2019-08-22期）

前端培訓-中級階段（10）- 同源策略（2019-08-15期）

前端培訓-中級階段（6）- jQuery的事件綁定鏈式操作及原理（2019-07-25期）

發(fā)表評論

0條評論

PAMPANG

男|高級講師

TA的文章