資訊專(zhuān)欄INFORMATION COLUMN
摘要：前端知識(shí)點(diǎn)總結(jié)復(fù)雜選擇器兄弟選擇器兄弟元素具備相同父元素的平級(jí)元素之間稱(chēng)為兄弟元素。
前端知識(shí)點(diǎn)總結(jié)——C3 1.復(fù)雜選擇器
1.兄弟選擇器
兄弟元素：具備相同父元素的平級(jí)元素之間稱(chēng)為兄弟元素。
1.相鄰兄弟選擇器
作用：獲取緊緊挨在某元素后的兄弟元素
語(yǔ)法：選擇器1+選擇器2{}
注意：兄弟選擇器，只能向后找，不能向前找
2.通用兄弟選擇器
作用：獲取某元素后所有滿(mǎn)足條件的兄弟元素
語(yǔ)法：選擇器1~選擇器2{}
2.屬性選擇器
1.作用
允許通過(guò)元素所附帶的屬性及其值來(lái)匹配元素
type="text"
2.語(yǔ)法
1.基本語(yǔ)法
[attr] //屬性
作用：匹配頁(yè)面中所有附帶attr屬性的元素
ex：
1.[id] 匹配頁(yè)面中所有附帶id屬性的元素
2.[class] 匹配頁(yè)面中所有附帶class屬性的元素
2.elem[attr]
elem:表示任意元素
attr:表示任意屬性
作用：匹配頁(yè)面中所有附帶attr屬性的elem元素
ex:
div[id] 匹配頁(yè)面中所有帶有id屬性的div元素
input[type] 匹配頁(yè)面中所有帶有type屬性的input元素
.text[placeholder] 匹配頁(yè)面中所有帶有placeholder屬性，并有text類(lèi)選擇器的元素
3.[attr1][attr2]
作用：匹配同時(shí)附帶多個(gè)屬性的元素
ex:
div[id][class]
4.[attr=value]
作用：匹配attr屬性值為value的元素
ex:
//匹配的是第一個(gè)input元素(以下三種寫(xiě)法均可)
input[type="text"]
input[type=text]
input[type="text"]
3.偽類(lèi)選擇器
1.已學(xué)過(guò)的偽類(lèi)
鏈接偽類(lèi)：
:link(尚未訪(fǎng)問(wèn)) :visited(訪(fǎng)問(wèn)過(guò)的)
動(dòng)態(tài)偽類(lèi)：
:hover(鼠標(biāo)懸停)
:active(激活狀態(tài))
:focus(獲取焦點(diǎn))
2.目標(biāo)偽類(lèi)
作用：突出顯示活動(dòng)的HTML錨點(diǎn)元素，匹配被激活的錨點(diǎn)。
語(yǔ)法：
選擇器:target{...}
div:target{...}
#d1:target{...}
3.結(jié)構(gòu)偽類(lèi)
作用：通過(guò)元素的結(jié)構(gòu)關(guān)系來(lái)匹配元素（上下級(jí)嵌套結(jié)構(gòu)）
1.:first-child
匹配的元素屬于其父元素的第一個(gè)子元素
p1
p2
p3
ex：
p:first-child{...} //找父元素的第一個(gè)子p元素(p1)
2.:last-child
匹配的元素是屬于其父元素的最后一個(gè)子元素
ex:
p:last-child{...}//找父元素的最后一個(gè)子元素（p3）
3.:nth-child(n)
匹配的元素是屬于其父元素中第n個(gè)子元素
table tr:nth-child(2) 匹配表格第二行數(shù)據(jù)
4.:empty
匹配沒(méi)有子元素的元素
5.:only-child
匹配的元素是屬于其父元素中的唯一子元素
ppppp1
p:only-child{color:red;}//改變的是p1的顏色 4.否定偽類(lèi) 將滿(mǎn)足指定選擇器的元素給排除出去（不要了，排除） 語(yǔ)法：ppppppppp2
ssssssss
:not(selector)
ex:
table tr:not(:first-child){
font-size:24px;
}
除第一行以外所有行的文字大小變?yōu)?4px
4.偽元素選擇器
1.:first-letter或::first-letter 作用：匹配某個(gè)元素的首字符 2.:first-line 或::first-line 作用：匹配某個(gè)元素的首行（第一行） 注意：首行與首字符沖突時(shí)，以首字符為準(zhǔn) 3.::selection 匹配被用戶(hù)選取的內(nèi)容 注意：只能修改文本顏色或背景顏色2.內(nèi)容生成
1.什么是內(nèi)容生成
使用CSS動(dòng)態(tài)的向某元素中插入一段內(nèi)容
2.偽元素選擇器
1.:before或::before 作用：匹配到某元素的內(nèi)容區(qū)域之前3.彈性布局（Flexible Layout）(:before)鵝鵝鵝
2.:after或::after 作用：匹配到某元素的內(nèi)容區(qū)域之后鋤禾日當(dāng)午(:after)
3.屬性 屬性：content 作用：向匹配到的位置處增加內(nèi)容 取值： 1.字符串：用""引起來(lái)（普通文本） 2.url()：生成一副圖像 4.解決問(wèn)題 1.解決浮動(dòng)問(wèn)題 div:after{ content:""; display:block; clear:both; } 2.子元素上外邊距溢出問(wèn)題 div:before{ content:""; display:table; }
1.什么是彈性布局
彈性布局，是一種布局方式，注意解決某元素中“子元素”的布局方式，為布局提供最大的靈活性。
2.彈性布局的相關(guān)概念
1.彈性布局的容器 彈性布局的容器 簡(jiǎn)稱(chēng)為"容器"（子元素的父元素，稱(chēng)為容器） 2.彈性布局的項(xiàng)目 彈性布局的項(xiàng)目 簡(jiǎn)稱(chēng)為"項(xiàng)目"(要實(shí)現(xiàn)布局效果的子元素，稱(chēng)"項(xiàng)目") 3.主軸 項(xiàng)目們排列方向的一根軸，就稱(chēng)為主軸 如果項(xiàng)目們按x軸排列（橫向排列），那么x軸就是主軸 如果項(xiàng)目們按y軸排列（縱向排列），那么y軸就是主軸 4.交叉軸 與主軸交叉的一根軸就是交叉軸 如果主軸是x軸，那么y軸就是交叉軸 如果主軸是y軸，那么x軸就是交叉軸
3.語(yǔ)法
1.flex容器
將元素變?yōu)閒lex容器后，那么所有的子元素將變?yōu)閒lex項(xiàng)目，都允許按照彈性布局的方式排列
如何將元素變?yōu)閒lex容器？
屬性：display
取值：
1.flex:將快級(jí)元素變?yōu)槿萜? 2.inline-flex:將行內(nèi)元素變?yōu)槿萜?注意：
1.元素設(shè)置為flex容器之后，子元素的float,vertical-align,clear將失效
2.容器的text-align將失效
2.容器的屬性
1.flex-direction
作用：指定容器的主軸及其排列方向
取值：
1.row 默認(rèn)值，即主軸為x軸，起點(diǎn)在左端
2.row-reverse 主軸為x軸，起點(diǎn)在有端
3.column 主軸為y軸，起點(diǎn)在頂端
4.column-reverse 主軸為y軸,起點(diǎn)在底端
2.flex-wrap
作用：當(dāng)一個(gè)主軸排列不下所有項(xiàng)目時(shí)，指定子項(xiàng)目如何換行
取值：
1.nowrap 默認(rèn)值，即空間不夠時(shí)，也不換行，項(xiàng)目會(huì)自動(dòng)縮小
2.wrap 換行
3.wrap-reverse 換行反轉(zhuǎn)
3.flex-flow
作用：是flex-direction和flex-wrap的縮寫(xiě)形式
取值：
1.row nowrap 默認(rèn)值
2.direction wrap
4.justify-content
作用：定義項(xiàng)目在主軸上的對(duì)齊方式
取值：
1.flex-start
在主軸的起點(diǎn)對(duì)齊
2.flex-end
在主軸的終點(diǎn)對(duì)齊
3.space-between
兩端對(duì)齊（常用）
4.center
在主軸上居中對(duì)齊
5.space-around
每個(gè)項(xiàng)目?jī)啥碎g距相同
5.align-items
作用：定義項(xiàng)目在交叉軸上的對(duì)齊方式
取值：
1.flex-start
交叉軸的起點(diǎn)對(duì)齊
2.flex-end
交叉軸的終點(diǎn)對(duì)齊
3.center
交叉軸居中對(duì)齊
4.baseline
交叉軸上基線(xiàn)對(duì)齊
5.stretch
如果項(xiàng)目未設(shè)置尺寸，在交叉軸上將占滿(mǎn)所有空間
3.項(xiàng)目的屬性
該組屬性只能設(shè)置在某一項(xiàng)目元素上，只控制一個(gè)項(xiàng)目，是不影響容器以其其它項(xiàng)目的效果。
1.order
作用：定義項(xiàng)目的排列順序，值越小，越靠近起點(diǎn)，默認(rèn)值為0
取值：整數(shù)數(shù)字，無(wú)單位
2.flex-grow
作用：定義項(xiàng)目的放大比例，如果容器由足夠的剩余空間，項(xiàng)目將放大
取值：
整數(shù)數(shù)字，無(wú)單位
默認(rèn)值0，不放大
取值越大，占據(jù)的剩余空間就越多
3.flex-shrink
作用：定義項(xiàng)目的縮小比例，即容器空間不足時(shí)，項(xiàng)目該如何縮小
取值：
默認(rèn)值為1，空間不足時(shí)，則等比縮小
取值為0，則不縮小（常用）
4.align-self
作用：定義當(dāng)前項(xiàng)目在交叉軸上的對(duì)齊方式
取值：
1.flex-start
2.flex-end
3.center
4.baseline
5.stretch
6.auto (繼承自父元素的align-items屬性)
4.轉(zhuǎn)換
1.什么是轉(zhuǎn)換
改變?cè)卦陧?yè)面中的位置，大小，角度以及形狀的一種方式。 2D轉(zhuǎn)換:只在x軸和y軸上發(fā)生的轉(zhuǎn)換效果 3D轉(zhuǎn)換:增加在z軸的轉(zhuǎn)換效果
2.轉(zhuǎn)換屬性
1.轉(zhuǎn)換屬性
屬性：transform
取值：
1.none 默認(rèn)值，無(wú)任何轉(zhuǎn)換效果
2.transform-function
表示1個(gè)或多個(gè)轉(zhuǎn)換函數(shù)
如果是多個(gè)轉(zhuǎn)換函數(shù)的話(huà)，中間用空格隔開(kāi)
2.轉(zhuǎn)換原點(diǎn)
屬性：transform-origin
取值：數(shù)字/百分比/關(guān)鍵字
2個(gè)值：表示原點(diǎn)在x軸和y軸上的位置
3個(gè)值：表示原點(diǎn)在x軸,y軸,z軸上的位置
默認(rèn)的原點(diǎn)在 元素的中心位置處
(center center)
(50% 50%)
3.2D轉(zhuǎn)換
1.位移
1.什么是位移
改變?cè)卦陧?yè)面中的位置
2.語(yǔ)法
屬性：transform
取值：
1.translate(x)
指定元素在x軸上的位移距離
取值為正，元素向右移
取值為負(fù)，元素向左移
2.translate(x,y)
指定元素在x軸和y軸的位移距離
x:同上
y:取值為正，元素向下移
取值為負(fù)，元素向上移
3.translateX(x)
在x軸上的位移
4.translateY(y)
在y軸上的位移
2.縮放
1.什么是縮放
改變?cè)卦陧?yè)面中的尺寸
2.語(yǔ)法
屬性：transform
取值：
1.scale(value)
value:橫向或縱向的縮放比例
value:默認(rèn)值為1
>1: 放大
<1: 縮小
負(fù)數(shù)：放大（水平和垂直都翻轉(zhuǎn)180度）
2.scale(x,y)
x:橫向的縮放比例
y:縱向的縮放比例
3.單向縮放函數(shù)
scaleX(x)
scaleY(y)
3.旋轉(zhuǎn)
1.什么是旋轉(zhuǎn)
改變?cè)卦陧?yè)面上的角度
2.語(yǔ)法
屬性：transform
取值：
rotate(ndeg)
n：取值為正，順時(shí)針旋轉(zhuǎn)
n：取值為負(fù)，逆時(shí)針旋轉(zhuǎn)
注意：
1.轉(zhuǎn)換原點(diǎn)會(huì)影響最后的轉(zhuǎn)換效果
2.旋轉(zhuǎn)是連同坐標(biāo)軸一起旋轉(zhuǎn)的，會(huì)影響旋轉(zhuǎn)后的位移效果
2.語(yǔ)法
屬性：transform
取值：
1.skewX(xdeg)
讓元素向著x軸的方向產(chǎn)生傾斜效果，實(shí)際上改變的是y軸的傾斜角度值
x：取值為正，y軸逆時(shí)針傾斜
x：取值為負(fù)，y軸順時(shí)針傾斜
2.skewY(ydeg)
讓元素向著y軸的方向產(chǎn)生傾斜效果，實(shí)際上改變的x軸的傾斜角度值
y:取值為正，x軸順時(shí)針傾斜
y:取值為負(fù)，x軸逆時(shí)針傾斜
3.skew(x)
等同于skewX(xdeg)
4.skew(x,y)
4.3D轉(zhuǎn)換
1.透視距離
模擬人的眼睛到3D轉(zhuǎn)換元素之間的距離（z軸）
屬性：perspective
注意：該屬性要加在3D轉(zhuǎn)換元素的父元素上
2.3D旋轉(zhuǎn)
屬性：transform
取值：
1.rotateX(xdeg)
以x軸為中心軸，旋轉(zhuǎn)元素的角度
取值為正，順時(shí)針旋轉(zhuǎn)
2.rotateY(ydeg)
以y軸為中心，旋轉(zhuǎn)元素的角度
3.rotateZ(zdeg)
以z軸為中心，旋轉(zhuǎn)元素的角度
4.rotate3D(x,y,z,ndeg)
x,y,z取值大于0的數(shù)字時(shí)，表示該軸要參與旋轉(zhuǎn)，取值為0則不參與旋轉(zhuǎn)
rotate3D(1,0,0,45deg)只在x軸旋轉(zhuǎn)45度
roatate3d(1,1,1,0deg)
5.過(guò)渡
1.什么是過(guò)渡
使得css屬性值，在一段時(shí)間內(nèi)平緩變化的效果
2.過(guò)渡語(yǔ)法
1.指定過(guò)渡屬性
屬性：transition-property
取值：
1.all 能使用過(guò)渡的屬性，一律用過(guò)渡體現(xiàn)
2.具體屬性名
ex:
transition-property:background
當(dāng)背景的屬性在發(fā)生變化時(shí)用過(guò)渡給體現(xiàn)出來(lái)
transition-property:border-radius;
當(dāng)邊框倒角在發(fā)生改變時(shí)用過(guò)渡體現(xiàn)出來(lái)
transition-property:all
允許設(shè)置過(guò)渡效果的屬性：
1.顏色屬性（背景,文字,邊框顏色,陰影顏色）
2.取值為數(shù)字的屬性（高寬，內(nèi)外邊距等）
3.轉(zhuǎn)換屬性（位移，旋轉(zhuǎn)，縮放，傾斜）
4.陰影屬性
5.漸變屬性
6.visibility屬性
2.指定過(guò)渡時(shí)長(zhǎng)
作用：指定在多長(zhǎng)時(shí)間內(nèi)完成過(guò)渡操作
屬性：transition-duration
取值：
以s或ms為單位的數(shù)值
1000ms=1s
3.指定過(guò)渡速度時(shí)間曲線(xiàn)函數(shù)
屬性：transition-timing-function
取值：
1.ease 默認(rèn)值，慢速開(kāi)始，快速變快，慢速結(jié)束
2.linear 勻速
3.ease-in 慢速開(kāi)始，加速結(jié)束
4.ease-out 快速開(kāi)始，慢速結(jié)束
5.ease-in-out 慢速開(kāi)始和結(jié)束，中間先加速后減速
4.指定過(guò)渡延遲時(shí)間
屬性：transition-delay
取值：以s或ms為單位的數(shù)值
5.過(guò)渡屬性的編寫(xiě)位置
1.將過(guò)渡放在元素聲明的樣式中
既管去，又管回
2.將過(guò)渡放在觸發(fā)的操作中（hover）
只管去，不管回
6.過(guò)渡的簡(jiǎn)寫(xiě)形式
transition:property duration timing-function delay;
ex:
transition:background 2s ease,border-radius 2s;
transition:all 2s; //上面的簡(jiǎn)寫(xiě)
6.動(dòng)畫(huà)
1.什么是動(dòng)畫(huà)
使元素從一種樣式逐漸變?yōu)榱硪环N樣式 即將多個(gè)過(guò)渡效果放下一起 動(dòng)畫(huà)是通過(guò)"關(guān)鍵幀"，來(lái)控制動(dòng)畫(huà)的每一步 關(guān)鍵幀： 1.定義動(dòng)畫(huà)執(zhí)行的時(shí)間點(diǎn) 2.在該時(shí)間點(diǎn)上的樣式是什么
2.動(dòng)畫(huà)的使用步驟
1.聲明動(dòng)畫(huà)
為動(dòng)畫(huà)起名
定義關(guān)鍵幀
2.為元素調(diào)用動(dòng)畫(huà)
指定元素調(diào)用的動(dòng)畫(huà)名稱(chēng)以及各個(gè)參數(shù)屬性
3.定義動(dòng)畫(huà)（聲明動(dòng)畫(huà)）
@keyframes 動(dòng)畫(huà)名稱(chēng){
/*定義該動(dòng)畫(huà)中所有的關(guān)鍵幀*/
0%{
/*動(dòng)畫(huà)開(kāi)始時(shí)元素時(shí)的樣式*/
}
25%{
/*動(dòng)畫(huà)執(zhí)行到1/4時(shí)的樣式*/
}
50%{
/*動(dòng)畫(huà)執(zhí)行到一半時(shí)的樣式*/
}
75%{
/*動(dòng)畫(huà)執(zhí)行到3/4時(shí)的樣式*/
}
100%{
/*動(dòng)畫(huà)執(zhí)行結(jié)束時(shí)的樣式*/
}
}
4.動(dòng)畫(huà)調(diào)用（動(dòng)畫(huà)屬性）
1.animation-name
作用：指定調(diào)用動(dòng)畫(huà)的名稱(chēng)
2.animation-duration
作用：指定動(dòng)畫(huà)執(zhí)行一個(gè)周期的時(shí)長(zhǎng)
取值：以s或ms為單位的數(shù)值
3.animation-timing-function
作用：指定動(dòng)畫(huà)的速度時(shí)間曲線(xiàn)函數(shù)
取值：ease,linear,ease-in,ease-out,ease-in-out
4.animation-dealy
作用：指定動(dòng)畫(huà)的延遲時(shí)間
取值：以s或ms為單位的數(shù)值
5.animation-iteration-count
作用：指定動(dòng)畫(huà)的播放次數(shù)
取值：
1.具體數(shù)字
2.infinite 無(wú)限次數(shù)播放
6.animation-diretion
作用：指定動(dòng)畫(huà)的播放方向
取值：
1.normal
默認(rèn)值，正常播放0%-100%
2.reverse
逆向播放 100%-0%
3.alternate
輪播播放
奇數(shù)次數(shù)播放時(shí)，正向播放
偶數(shù)次數(shù)播放時(shí)，逆向播放
7.動(dòng)畫(huà)的簡(jiǎn)寫(xiě)方式
animation:name duration timing-function delay iteration-count direction;
8.animation-fill-mode
作用：規(guī)定動(dòng)畫(huà)在播放前或播放后的狀態(tài)
取值：
1.none 默認(rèn)值
2.forwards
動(dòng)畫(huà)播放完成后，將保持在最后一個(gè)幀狀態(tài)
3.backwards
動(dòng)畫(huà)播放前，延遲時(shí)間內(nèi)，動(dòng)畫(huà)保持在第一個(gè)幀的狀態(tài)上
4.both
forwards與backwards的合體
9.animation-paly-state
作用：指定動(dòng)畫(huà)處于播放還是暫停的狀態(tài)
取值：
1.paused 暫停
2.running 播放
7.CSS Hack
1.解決問(wèn)題
解決IE瀏覽器兼容性問(wèn)題 解決辦法：針對(duì)不同瀏覽器編寫(xiě)不同CSS代碼
2.CSSHack 的原理
使用CSS樣式的優(yōu)先級(jí)解決兼容性問(wèn)題
3.CSSHack的實(shí)現(xiàn)方式
1.CSS類(lèi)內(nèi)部Hack 在樣式屬性名稱(chēng)前或?qū)傩灾岛笤黾忧昂缶Y，以便于識(shí)別不同瀏覽器 +:IE6,7的前綴 -:IE6的前綴