前端知識點總結——C3
1.複雜選擇器
1.兄弟選擇器
兄弟元素：具備相同父元素的平級元素之間稱為兄弟元素。
1.相鄰兄弟選擇器
作用：獲取緊緊挨在某元素後的兄弟元素
語法：選擇器1+選擇器2{}
注意：兄弟選擇器，只能向後找，不能向前找
2.通用兄弟選擇器
作用：獲取某元素後所有滿足條件的兄弟元素
語法：選擇器1~選擇器2{}
2.屬性選擇器
<input type="text" name="uname" value="" placeholder="">
1.作用
允許通過元素所附帶的屬性及其值來匹配元素
type="text"
2.語法
1.基本語法
[attr] //屬性
作用：匹配頁面中所有附帶attr屬性的元素
ex：
1.[id] 匹配頁面中所有附帶id屬性的元素
2.[class] 匹配頁面中所有附帶class屬性的元素
2.elem[attr]
elem:表示任意元素
attr:表示任意屬性
作用：匹配頁面中所有附帶attr屬性的elem元素
ex:
div[id] 匹配頁面中所有帶有id屬性的div元素
input[type] 匹配頁面中所有帶有type屬性的input元素
.text[placeholder] 匹配頁面中所有帶有placeholder屬性，並有text類選擇器的元素
3.[attr1][attr2]
作用：匹配同時附帶多個屬性的元素
ex:
div[id][class]
4.[attr=value]
作用：匹配attr屬性值為value的元素
ex:
<input type="text">
<input type="password">
//匹配的是第一個input元素(以下三種寫法均可)
input[type="text"]
input[type=text]
input[type=`text`]
3.偽類選擇器
1.已學過的偽類
連結偽類：
:link(尚未訪問) :visited(訪問過的)
動態偽類：
:hover(滑鼠懸停)
:active(啟用狀態)
:focus(獲取焦點)
2.目標偽類
作用：突出顯示活動的HTML錨點元素，匹配被啟用的錨點。
語法：
選擇器:target{...}
div:target{...}
#d1:target{...}
3.結構偽類
作用：通過元素的結構關係來匹配元素（上下級巢狀結構）
1.:first-child
匹配的元素屬於其父元素的第一個子元素
<div>
<p>p1</p>
<p>p2</p>
<p>p3</p>
</div>
ex：
p:first-child{...} //找父元素的第一個子p元素(p1)
2.:last-child
匹配的元素是屬於其父元素的最後一個子元素
ex:
p:last-child{...}//找父元素的最後一個子元素（p3）
3.:nth-child(n)
匹配的元素是屬於其父元素中第n個子元素
table tr:nth-child(2) 匹配表格第二行資料
4.:empty
匹配沒有子元素的元素
<div></div>
5.:only-child
匹配的元素是屬於其父元素中的唯一子元素<div>
<p id="p1">ppppp1</p>
</div>
<div>
<p id="p2">ppppppppp2</p>
<span>ssssssss</span>
</div>
p:only-child{color:red;}//改變的是p1的顏色
4.否定偽類
將滿足指定選擇器的元素給排除出去（不要了，排除）
語法： :not(selector)
ex:
table tr:not(:first-child){
font-size:24px;
}
除第一行以外所有行的文字大小變為24px
4.偽元素選擇器
1.:first-letter或::first-letter
作用：匹配某個元素的首字元
2.:first-line 或::first-line
作用：匹配某個元素的首行（第一行）
注意：首行與首字元衝突時，以首字元為準
3.::selection
匹配被使用者選取的內容
注意：只能修改文字顏色或背景顏色
2.內容生成
1.什麼是內容生成
使用CSS動態的向某元素中插入一段內容2.偽元素選擇器
1.:before或::before
作用：匹配到某元素的內容區域之前
<p>(:before)鵝鵝鵝</p>
2.:after或::after
作用：匹配到某元素的內容區域之後
<p>鋤禾日當午(:after)</p>
3.屬性
屬性：content
作用：向匹配到的位置處增加內容
取值：
1.字串：用""引起來（普通文字）
2.url()：生成一副影像
4.解決問題
1.解決浮動問題
div:after{
content:"";
display:block;
clear:both;
}
2.子元素上外邊距溢位問題
div:before{
content:"";
display:table;
}
3.彈性佈局（Flexible Layout）
1.什麼是彈性佈局
彈性佈局，是一種佈局方式，注意解決某元素中“子元素”的佈局方式，為佈局提供最大的靈活性。
2.彈性佈局的相關概念
1.彈性佈局的容器
彈性佈局的容器 簡稱為"容器"（子元素的父元素，稱為容器）
2.彈性佈局的專案
彈性佈局的專案 簡稱為"專案"(要實現佈局效果的子元素，稱"專案")
3.主軸
專案們排列方向的一根軸，就稱為主軸
如果專案們按x軸排列（橫向排列），那麼x軸就是主軸
如果專案們按y軸排列（縱向排列），那麼y軸就是主軸
4.交叉軸
與主軸交叉的一根軸就是交叉軸
如果主軸是x軸，那麼y軸就是交叉軸
如果主軸是y軸，那麼x軸就是交叉軸
3.語法
1.flex容器
將元素變為flex容器後，那麼所有的子元素將變為flex專案，都允許按照彈性佈局的方式排列
如何將元素變為flex容器？
屬性：display
取值：
1.flex:將快級元素變為容器
2.inline-flex:將行內元素變為容器
注意：
1.元素設定為flex容器之後，子元素的float,vertical-align,clear將失效
2.容器的text-align將失效
2.容器的屬性
1.flex-direction
作用：指定容器的主軸及其排列方向
取值：
1.row 預設值，即主軸為x軸，起點在左端
2.row-reverse 主軸為x軸，起點在有端
3.column 主軸為y軸，起點在頂端
4.column-reverse 主軸為y軸,起點在底端
2.flex-wrap
作用：當一個主軸排列不下所有專案時，指定子專案如何換行
取值：
1.nowrap 預設值，即空間不夠時，也不換行，專案會自動縮小
2.wrap 換行
3.wrap-reverse 換行反轉
3.flex-flow
作用：是flex-direction和flex-wrap的縮寫形式
取值：
1.row nowrap 預設值
2.direction wrap
4.justify-content
作用：定義專案在主軸上的對齊方式
取值：
1.flex-start
在主軸的起點對齊
2.flex-end
在主軸的終點對齊
3.space-between
兩端對齊（常用）
4.center
在主軸上居中對齊
5.space-around
每個專案兩端間距相同
5.align-items
作用：定義專案在交叉軸上的對齊方式
取值：
1.flex-start
交叉軸的起點對齊
2.flex-end
交叉軸的終點對齊
3.center
交叉軸居中對齊
4.baseline
交叉軸上基線對齊
5.stretch
如果專案未設定尺寸，在交叉軸上將佔滿所有空間
3.專案的屬性
該組屬性只能設定在某一專案元素上，只控制一個專案，是不影響容器以其其它專案的效果。
1.order
作用：定義專案的排列順序，值越小，越靠近起點，預設值為0
取值：整數數字，無單位
2.flex-grow
作用：定義專案的放大比例，如果容器由足夠的剩餘空間，專案將放大
取值：
整數數字，無單位
預設值0，不放大
取值越大，佔據的剩餘空間就越多
3.flex-shrink
作用：定義專案的縮小比例，即容器空間不足時，專案該如何縮小
取值：
預設值為1，空間不足時，則等比縮小
取值為0，則不縮小（常用）
4.align-self
作用：定義當前專案在交叉軸上的對齊方式
取值：
1.flex-start
2.flex-end
3.center
4.baseline
5.stretch
6.auto (繼承自父元素的align-items屬性)
4.轉換
1.什麼是轉換
改變元素在頁面中的位置，大小，角度以及形狀的一種方式。
2D轉換:只在x軸和y軸上發生的轉換效果
3D轉換:增加在z軸的轉換效果2.轉換屬性
1.轉換屬性
屬性：transform
取值：
1.none 預設值，無任何轉換效果
2.transform-function
表示1個或多個轉換函式
如果是多個轉換函式的話，中間用空格隔開
2.轉換原點
屬性：transform-origin
取值：數字/百分比/關鍵字
2個值：表示原點在x軸和y軸上的位置
3個值：表示原點在x軸,y軸,z軸上的位置
預設的原點在 元素的中心位置處
(center center)
(50% 50%)
3.2D轉換
1.位移
1.什麼是位移
改變元素在頁面中的位置
2.語法
屬性：transform
取值：
1.translate(x)
指定元素在x軸上的位移距離
取值為正，元素向右移
取值為負，元素向左移
2.translate(x,y)
指定元素在x軸和y軸的位移距離
x:同上
y:取值為正，元素向下移
取值為負，元素向上移
3.translateX(x)
在x軸上的位移
4.translateY(y)
在y軸上的位移
2.縮放
1.什麼是縮放
改變元素在頁面中的尺寸
2.語法
屬性：transform
取值：
1.scale(value)
value:橫向或縱向的縮放比例
value:預設值為1
>1: 放大
<1: 縮小
負數：放大（水平和垂直都翻轉180度）
2.scale(x,y)
x:橫向的縮放比例
y:縱向的縮放比例
3.單向縮放函式
scaleX(x)
scaleY(y)
3.旋轉
1.什麼是旋轉
改變元素在頁面上的角度
2.語法
屬性：transform
取值：
rotate(ndeg)
n：取值為正，順時針旋轉
n：取值為負，逆時針旋轉
注意：
1.轉換原點會影響最後的轉換效果
2.旋轉是連同座標軸一起旋轉的，會影響旋轉後的位移效果
2.語法
屬性：transform
取值：
1.skewX(xdeg)
讓元素向著x軸的方向產生傾斜效果，實際上改變的是y軸的傾斜角度值
x：取值為正，y軸逆時針傾斜
x：取值為負，y軸順時針傾斜
2.skewY(ydeg)
讓元素向著y軸的方向產生傾斜效果，實際上改變的x軸的傾斜角度值
y:取值為正，x軸順時針傾斜
y:取值為負，x軸逆時針傾斜
3.skew(x)
等同於skewX(xdeg)
4.skew(x,y)
4.3D轉換
1.透視距離
模擬人的眼睛到3D轉換元素之間的距離（z軸）
屬性：perspective
注意：該屬性要加在3D轉換元素的父元素上
2.3D旋轉
屬性：transform
取值：
1.rotateX(xdeg)
以x軸為中心軸，旋轉元素的角度
取值為正，順時針旋轉
2.rotateY(ydeg)
以y軸為中心，旋轉元素的角度
3.rotateZ(zdeg)
以z軸為中心，旋轉元素的角度
4.rotate3D(x,y,z,ndeg)
x,y,z取值大於0的數字時，表示該軸要參與旋轉，取值為0則不參與旋轉
rotate3D(1,0,0,45deg)只在x軸旋轉45度
roatate3d(1,1,1,0deg)
5.過渡
1.什麼是過渡
使得css屬性值，在一段時間內平緩變化的效果2.過渡語法
1.指定過渡屬性
屬性：transition-property
取值：
1.all 能使用過渡的屬性，一律用過渡體現
2.具體屬性名
ex:
transition-property:background
當背景的屬性在發生變化時用過渡給體現出來
transition-property:border-radius;
當邊框倒角在發生改變時用過渡體現出來
transition-property:all
允許設定過渡效果的屬性：
1.顏色屬性（背景,文字,邊框顏色,陰影顏色）
2.取值為數字的屬性（高寬，內外邊距等）
3.轉換屬性（位移，旋轉，縮放，傾斜）
4.陰影屬性
5.漸變屬性
6.visibility屬性
2.指定過渡時長
作用：指定在多長時間內完成過渡操作
屬性：transition-duration
取值：
以s或ms為單位的數值
1000ms=1s
3.指定過渡速度時間曲線函式
屬性：transition-timing-function
取值：
1.ease 預設值，慢速開始，快速變快，慢速結束
2.linear 勻速
3.ease-in 慢速開始，加速結束
4.ease-out 快速開始，慢速結束
5.ease-in-out 慢速開始和結束，中間先加速後減速
4.指定過渡延遲時間
屬性：transition-delay
取值：以s或ms為單位的數值
5.過渡屬性的編寫位置
1.將過渡放在元素宣告的樣式中
既管去，又管回
2.將過渡放在觸發的操作中（hover）
只管去，不管回
6.過渡的簡寫形式
transition:property duration timing-function delay;
ex:
transition:background 2s ease,border-radius 2s;
transition:all 2s; //上面的簡寫
6.動畫
1.什麼是動畫
使元素從一種樣式逐漸變為另一種樣式
即將多個過渡效果放下一起
動畫是通過"關鍵幀"，來控制動畫的每一步
關鍵幀：
1.定義動畫執行的時間點
2.在該時間點上的樣式是什麼2.動畫的使用步驟
1.宣告動畫
為動畫起名
定義關鍵幀
2.為元素呼叫動畫
指定元素呼叫的動畫名稱以及各個引數屬性
3.定義動畫（宣告動畫）
@keyframes 動畫名稱{
/*定義該動畫中所有的關鍵幀*/
0%{
/*動畫開始時元素時的樣式*/
}
25%{
/*動畫執行到1/4時的樣式*/
}
50%{
/*動畫執行到一半時的樣式*/
}
75%{
/*動畫執行到3/4時的樣式*/
}
100%{
/*動畫執行結束時的樣式*/
}
}
4.動畫呼叫（動畫屬性）
1.animation-name
作用：指定呼叫動畫的名稱
2.animation-duration
作用：指定動畫執行一個週期的時長
取值：以s或ms為單位的數值
3.animation-timing-function
作用：指定動畫的速度時間曲線函式
取值：ease,linear,ease-in,ease-out,ease-in-out
4.animation-dealy
作用：指定動畫的延遲時間
取值：以s或ms為單位的數值
5.animation-iteration-count
作用：指定動畫的播放次數
取值：
1.具體數字
2.infinite 無限次數播放
6.animation-diretion
作用：指定動畫的播放方向
取值：
1.normal
預設值，正常播放0%-100%
2.reverse
逆向播放 100%-0%
3.alternate
輪播播放
奇數次數播放時，正向播放
偶數次數播放時，逆向播放
7.動畫的簡寫方式
animation:name duration timing-function delay iteration-count direction;
8.animation-fill-mode
作用：規定動畫在播放前或播放後的狀態
取值：
1.none 預設值
2.forwards
動畫播放完成後，將保持在最後一個幀狀態
3.backwards
動畫播放前，延遲時間內，動畫保持在第一個幀的狀態上
4.both
forwards與backwards的合體
9.animation-paly-state
作用：指定動畫處於播放還是暫停的狀態
取值：
1.paused 暫停
2.running 播放
7.CSS Hack
1.解決問題
解決IE瀏覽器相容性問題
解決辦法：針對不同瀏覽器編寫不同CSS程式碼2.CSSHack 的原理
使用CSS樣式的優先順序解決相容性問題3.CSSHack的實現方式
1.CSS類內部Hack
在樣式屬性名稱前或屬性值後增加前字尾，以便於識別不同瀏覽器
+:IE6,7的字首
-:IE6的字首
:IE8,9,10的字尾
9 :IE9,10的字尾
2.CSS選擇器Hack
在選擇器前增加字首以便識別不同的瀏覽器
*:識別IE6
*+：識別IE7
div~div{}
*div~div{IE6識別}
*+div~div{IE7識別}
3.HTML頭部引用Hack
使用IE條件註釋來判斷瀏覽器的版本，從而執行不同的程式碼
語法：
<!--[if 條件 IE 版本號]>
滿足條件要執行的HTML程式碼
<![endif]-->
版本號：6-10
條件：
1.gt
只有在大於指定版本的瀏覽器中執行程式碼
ex:
<!--[if gt IE 6]>
該段內容只顯示在IE6以上版本的瀏覽器中
<![endif]-->
2.gte
大於等於
3.lte
小於等於
4.lt
小於
5.！
在指定條件以外版本的瀏覽器中執行操作
6.省略條件
只在指定版本的瀏覽器中執行操作
判斷是否為IE瀏覽器或IE的指定版本