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

時間 2019-11-05

標籤前端培訓初級階段简体版

原文原文鏈接

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

咱們要講什麼

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`	選擇 `<html>` 和 `<body >`	1
後代 `空格`	`ul li`	選擇祖先元素爲 <ul> 元素的全部 <li> 元素。	1
下級	`ul>li`	選擇父元素爲 <ul> 元素的全部 <li> 元素。	2
相鄰兄弟	`div+div`	選擇緊接在 <div> 元素以後的 <div> 元素。	2
兄弟	`h2~div`	選擇在 <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 中看。html

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

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

類型選擇器（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()內部聲明的選擇器是會影響優先級）。segmentfault

給元素添加的內聯樣式 (例如, 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> / 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標籤<td>（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 過渡、變換、動畫

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

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：無限循環。<number>：指定對象動畫的具體循環次數。

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 。後續整理整理代碼也發出來。

參考資料

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。