前端知識點總結——C3
前端知識點總結——C3
1.複雜選擇器
1.兄弟選擇器css
兄弟元素：具有相同父元素的平級元素之間稱爲兄弟元素。
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.僞元素選擇器flex
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.彈性佈局的相關概念url
1.彈性佈局的容器 彈性佈局的容器 簡稱爲"容器"（子元素的父元素，稱爲容器） 2.彈性佈局的項目 彈性佈局的項目 簡稱爲"項目"(要實現佈局效果的子元素，稱"項目") 3.主軸 項目們排列方向的一根軸，就稱爲主軸 若是項目們按x軸排列（橫向排列），那麼x軸就是主軸 若是項目們按y軸排列（縱向排列），那麼y軸就是主軸 4.交叉軸 與主軸交叉的一根軸就是交叉軸 若是主軸是x軸，那麼y軸就是交叉軸 若是主軸是y軸，那麼x軸就是交叉軸
3.語法spa
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.什麼是轉換3d
改變元素在頁面中的位置，大小，角度以及形狀的一種方式。 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的前綴
\0:IE8,9,10的後綴
\9\0: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的指定版本
相關文章
- 1. 前端知識點總結
- 2. 前端知識點 總結
- 3. 前端知識點學習總結
- 4. 2018前端學習知識點總結
- 5. 前端知識點總結（一）
- 6. 前端知識點總結——HTML
- 7. 前端知識點總結—-響應式
- 8. 前端學習知識點總結
- 9. 前端知識點細節總結(二)
- 10. 前端開發知識點總結
- 更多相關文章...
- • 與傳輸層有關的基本知識 - TCP/IP教程
- • Docker 資源彙總 - Docker教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • 算法總結-雙指針
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 前端知識點總結
- 2. 前端知識點 總結
- 3. 前端知識點學習總結
- 4. 2018前端學習知識點總結
- 5. 前端知識點總結（一）
- 6. 前端知識點總結——HTML
- 7. 前端知識點總結—-響應式
- 8. 前端學習知識點總結
- 9. 前端知識點細節總結(二)
- 10. 前端開發知識點總結