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

gaosboy 發布于2019-08-02 14:29 / 2666人閱讀

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

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

我們要講什么

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

CSS常用樣式屬性

CSS3 過渡、變換、動畫

CSS3 3D場景搭建與應用

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

選擇器	例子	例子描述	CSS規范級別
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 結尾的所有元素	3
屬性選擇器	*[type=file]**	選擇有 type 屬性且包含 file 的所有元素	3

CSS規范級別代表 CSS 1、CSS 2.1、CSS Selectors Level 3、Selectors Level 4。

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

組合選擇器

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

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

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

偽類選擇器

選擇器	例子	例子描述	CSS規范級別
: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)	代表父元素的中偶數位子元素	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 都可以觸發

偽元素選擇器

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

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

after 和 before 需要 content: "內容"，不然會不顯示。

placeholder 屬于 shadow DOM

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

差點忘記的權重計算（優先級）

下面列表中，選擇器類型的優先級是遞增的：

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

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

2. CSS常用樣式屬性

這個就有點多了啊，

數值單位

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

em 相對單位，相對于當前對象內文本的font-size的倍數

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

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

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

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

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

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
盒子-內	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：指定對象為內聯元素。

block：指定對象為塊元素。

inline-block：指定對象為內聯塊元素。（CSS2）

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

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

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

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

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

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

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

position 屬性

static：常規流。此時4個定位偏移屬性不會被應用。

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

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

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

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

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

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

3. CSS3 過渡、變換、動畫

上面一節已經列出本節包含的屬性了，這節我們講一講，具體應用。

transition 過渡

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

屬性名	描述	默認值
transition-property	執行過渡動作的屬性	all
transition-duration	動作執行時間	0
transition-timing-function	動作執行曲線 ease	ease
transition-delay	延遲執行動畫的時間	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 的變化執行 0.5秒，使用 ease-in 曲線執行，等待 0.1秒后開始。
意思是 background-color 的變化執行 0.5秒，使用 ease-in 曲線執行，等待 0.1秒后開始。
意思是 color 的變化執行 1秒，使用 ease-in 曲線執行，等待 0.1秒后開始。

transition-timing-function 說明

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

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

變換

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

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

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

動畫

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

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

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

animation-duration：動畫的持續時間

animation-timing-function：動畫執行曲線

animation-delay：延遲的時間

animation-iteration-count：循環次數。infinite：無限循環。：指定對象動畫的具體循環次數。

animation-direction：在循環中是否反向運動

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

animation-fill-mode：結束時候的狀態

    none：默認值。不設置對象動畫之外的狀態
    forwards：動畫結束時的狀態
    backwards：動畫開始時的狀態
    both：動畫結束或開始的狀態

animation-play-state：動畫暫停、開始狀態。running：運動。paused：暫停。

4. CSS3 3D場景搭建與應用

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

往期

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

后記

2019年3月15日更新。

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

css選擇器權重以及覆蓋規則

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

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

position float transfrom 之后的的層級。

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

最近手里有點活，移動端的拖動排序，網頁播放 amr 。后續整理整理代碼也發出來。

參考資料

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

MDN

CSS速查

視差滾動

GPU云服務器云服務器初級前端工程師初級前端開發工程師簡歷前端培訓前端前端前端培訓

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53841.html

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

摘要：前端最基礎的就是。對應，是標簽的屬性。獲取匹配元素相對父元素的偏移。返回的對象包含兩個整型屬性和。一組包含作為動畫屬性和終值的樣式屬性和及其值的集合動畫的額外選項。指示是否在效果隊列中放置動畫。前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本著提升技術水平，...

everfly 2019-08-02 15:30 評論0 收藏0
前端培訓-中級階段（8）- jQuery元素屬性樣式操作（2019-08-01期）

摘要：前端最基礎的就是。對應，是標簽的屬性。獲取匹配元素相對父元素的偏移。返回的對象包含兩個整型屬性和。一組包含作為動畫屬性和終值的樣式屬性和及其值的集合動畫的額外選項。指示是否在效果隊列中放置動畫。前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本著提升技術水平，...

james 2019-08-23 18:34 評論0 收藏0
前端培訓-中級階段（8）- jQuery元素屬性樣式操作（2019-08-01期）

摘要：前端最基礎的就是。對應，是標簽的屬性。獲取匹配元素相對父元素的偏移。返回的對象包含兩個整型屬性和。一組包含作為動畫屬性和終值的樣式屬性和及其值的集合動畫的額外選項。指示是否在效果隊列中放置動畫。前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本著提升技術水平，...

bang590 2019-08-30 11:21 評論0 收藏0
前端培訓-中級階段（11、12）- 跨域請求原理以及實現（2019-08-22期）

摘要：上節我們講了同源策略，這節我們講講如何跨域。當這些從的腳本執行出錯，因為違背了同源策略為了保證用戶信息不被泄露，錯誤信息不會顯示出來，取而代之只會返回一個。前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本著提升技術水平，打牢基礎知識的中心思想，我們開課啦（每...

binaryTree 2019-08-26 10:21 評論0 收藏0
前端培訓-中級階段（10）- 同源策略（2019-08-15期）

摘要：同源策略是什么同源策略是瀏覽器的一個安全功能，不同源的數據禁止訪問。或許你可以說驗證，在瀏覽器沒有同源策略的情況下這些都可以繞過去。總結同源策略是蠻好的，防御了大部分的攻擊。前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本著提升技術水平，打牢基礎知識的中心思...

heartFollower 2019-08-26 10:12 評論0 收藏0
前端培訓-中級階段（6）- jQuery的事件綁定鏈式操作及原理（2019-07-25期）

摘要：前端最基礎的就是。幫助從舊的事件方法轉換，和。方法移除用綁定的事件處理程序。特定的事件處理程序可以被移除元素上提供事件名稱，命名空間，處理函數。用于過濾器的觸發事件的選擇器元素的后代。事件觸發模擬觸發原生使用觸發。前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS）...

Airy 2019-08-02 15:25 評論0 收藏0