3. 固定定位

1. 固定定位脫離標(biāo)準(zhǔn)流,不會(huì)占用標(biāo)準(zhǔn)流中的空間
2. 固定定位不區(qū)分塊級(jí),行內(nèi)和行內(nèi)塊級(jí)元素
3. 固定定位會(huì)讓元素不隨著滾動(dòng)條滾動(dòng)
4. IE6不支持固定定位

4. 靜態(tài)定位(不學(xué)習(xí))

5. z-index

默認(rèn)情況下所有的元素都有一個(gè)默認(rèn)的z-index屬性,取值為0,z-index是用來(lái)控制定位流元素的覆蓋關(guān)系的,想使用z-index必須設(shè)置定位屬性

1. 默認(rèn)情況下,定位流元素是會(huì)覆蓋標(biāo)準(zhǔn)流的元素的
2. 默認(rèn)情況下,定位流元素后面編寫的會(huì)蓋住前面編寫的
3. 如果定位流元素設(shè)置了z-index屬性,那么誰(shuí)的z-index屬性比較大,誰(shuí)就顯示在上面

注意:從父現(xiàn)象

如果兩個(gè)元素的父元素都沒(méi)有設(shè)置z-index屬性,那么誰(shuí)的z-index屬性大,誰(shuí)就在上面
如果兩個(gè)元素的父元素都設(shè)置有z-index屬性,那么子元素的z-index屬性就會(huì)失效,誰(shuí)的父元素z-index屬性大,誰(shuí)就在上面

二、a標(biāo)簽的偽類選擇器

a標(biāo)簽的偽類選擇器是專門用來(lái)修改a標(biāo)簽不同狀態(tài)時(shí)的樣式
a:link{ }:用來(lái)修改a標(biāo)簽從未被訪問(wèn)過(guò)的樣式
a:hover{ }:用來(lái)修改a標(biāo)簽鼠標(biāo)懸停時(shí)的樣式
a:active{ }:用來(lái)修改a標(biāo)簽點(diǎn)擊時(shí)的樣式
a:visited{ }:用來(lái)修改a標(biāo)簽被訪問(wèn)過(guò)的樣式

注意:

1. a標(biāo)簽的偽類選擇器可以單獨(dú)出現(xiàn)
2. a標(biāo)簽的偽類選擇器如果一起出現(xiàn),要遵循嚴(yán)格的順序:link>visited>hover>actived(愛(ài)恨原則:love hate)
3. 連寫:a{ }可以同時(shí)控制link和visited的顏色
4. 在企業(yè)開(kāi)發(fā)中編寫a標(biāo)簽的偽類選擇器最好寫在標(biāo)簽選擇器的后面
5. 在企業(yè)開(kāi)發(fā)中和a標(biāo)簽盒子相關(guān)的屬性都寫在標(biāo)簽選擇器中(顯示模式/寬高/padding/margin)
6. 在企業(yè)開(kāi)發(fā)中和a標(biāo)簽文字/背景相關(guān)的都寫在偽類選擇器中
7. :hover{ }這個(gè)偽類選擇器可以用在任何標(biāo)簽里

三、過(guò)渡模塊

transition-property: 屬性1, 屬性2;:告訴系統(tǒng)哪個(gè)屬性需要執(zhí)行過(guò)渡效果
transition-duration: 時(shí)長(zhǎng)1, 時(shí)長(zhǎng)2;:告訴系統(tǒng)屬性需要執(zhí)行過(guò)渡效果
transition-delay: 時(shí)長(zhǎng)1, 時(shí)長(zhǎng)2;:規(guī)定過(guò)渡效果何時(shí)開(kāi)始,默認(rèn)值是0
transition-timing-function: linear(勻速), ease(逐漸慢下來(lái)), ease-in(加速), ease-out(減速), ease-in-out(先加速后減速);:規(guī)定過(guò)渡效果的運(yùn)動(dòng)速度,默認(rèn)為linear勻速
連寫:transition: property duration timing-function delay, property duration timing-function delay;

必備三要素:

1. 必須要有屬性發(fā)生變化
2. 必須告訴系統(tǒng)哪個(gè)屬性需要執(zhí)行過(guò)渡效果
3. 必須告訴系統(tǒng)執(zhí)行過(guò)渡效果持續(xù)時(shí)長(zhǎng)

注意:

1. 連寫時(shí)可以同時(shí)設(shè)置多個(gè)屬性,中間用空格隔開(kāi)
2. 連寫的時(shí)候可以省略后面的兩個(gè)參數(shù)
3. 如果多個(gè)屬性運(yùn)動(dòng)的數(shù)值都一樣,可以簡(jiǎn)寫為transition: all duration;

編寫過(guò)渡模塊的套路:

1. 先編寫基本的界面
2. 修改需要修改的屬性
3. 回過(guò)頭給被修改屬性的那個(gè)元素添加過(guò)渡效果

四、2D轉(zhuǎn)換模塊

transform: rotate(ndeg);:控制元素旋轉(zhuǎn),deg角度,默認(rèn)情況下元素都是以自己的中心點(diǎn)作為參考來(lái)旋轉(zhuǎn),可以通過(guò)形變中心點(diǎn)屬性來(lái)修改參考點(diǎn)
transform-origin: npx npx/50% 50%/center center:第一個(gè)參數(shù):水平方向,第二個(gè)參數(shù):垂直方向,取值可以為具體像素,百分比和特殊關(guān)鍵字,兩方向取值一樣時(shí)可以只寫一個(gè)
transform: rotateX/Y/Z(ndeg);:想圍繞哪個(gè)軸轉(zhuǎn)就寫上哪個(gè)軸,默認(rèn)圍繞Z軸

坐標(biāo)系

近大遠(yuǎn)小

transform: translate(npx, npx);:控制元素平移,第一個(gè)參數(shù):水平方向,第二個(gè)參數(shù):垂直方向
transform: scale(n, n);:控制元素縮放,第一個(gè)參數(shù):水平方向,第二個(gè)參數(shù):垂直方向,如果取值等于1,代表不變.如果取值大于1,代表放大.如果取值小于1,代表縮小.
連寫:transform: rotate(ndeg) translate(npx, npx) scale(n, n);:連寫時(shí)各屬性用空格隔開(kāi)
盒子陰影:box-shadow: 水平偏移 垂直偏移 模糊度 陰影擴(kuò)展 陰影顏色 內(nèi)外陰影;,默認(rèn)為外陰影,默認(rèn)陰影顏色為內(nèi)容的顏色,快速添加陰影只需編寫三個(gè)參數(shù)即可(水平偏移 垂直偏移 模糊度)
文字陰影:text-shadow: 水平偏移 垂直偏移 模糊度 陰影擴(kuò)展;,也可以只寫三個(gè)元素
不透明級(jí)別:opacity:0-1;設(shè)置元素的不透明級(jí)別,0為透明,1為不透明