3. 固定定位
- 固定定位脫離標(biāo)準(zhǔn)流,不會占用標(biāo)準(zhǔn)流中的空間
- 固定定位不區(qū)分塊級,行內(nèi)和行內(nèi)塊級元素
- 固定定位會讓元素不隨著滾動條滾動
- IE6不支持固定定位
4. 靜態(tài)定位(不學(xué)習(xí))
5. z-index
默認(rèn)情況下所有的元素都有一個默認(rèn)的z-index屬性,取值為0,z-index是用來控制定位流元素的覆蓋關(guān)系的,想使用z-index必須設(shè)置定位屬性
- 默認(rèn)情況下,定位流元素是會覆蓋標(biāo)準(zhǔn)流的元素的
- 默認(rèn)情況下,定位流元素后面編寫的會蓋住前面編寫的
- 如果定位流元素設(shè)置了z-index屬性,那么誰的z-index屬性比較大,誰就顯示在上面
注意:從父現(xiàn)象
如果兩個元素的父元素都沒有設(shè)置z-index屬性,那么誰的z-index屬性大,誰就在上面
如果兩個元素的父元素都設(shè)置有z-index屬性,那么子元素的z-index屬性就會失效,誰的父元素z-index屬性大,誰就在上面
二傀蚌、a標(biāo)簽的偽類選擇器
a標(biāo)簽的偽類選擇器是專門用來修改a標(biāo)簽不同狀態(tài)時的樣式
a:link{ }:用來修改a標(biāo)簽從未被訪問過的樣式
a:hover{ }:用來修改a標(biāo)簽鼠標(biāo)懸停時的樣式
a:active{ }:用來修改a標(biāo)簽點(diǎn)擊時的樣式
a:visited{ }:用來修改a標(biāo)簽被訪問過的樣式
注意:
- a標(biāo)簽的偽類選擇器可以單獨(dú)出現(xiàn)
- a標(biāo)簽的偽類選擇器如果一起出現(xiàn),要遵循嚴(yán)格的順序:link>visited>hover>actived(愛恨原則:love hate)
- 連寫:
a{ }可以同時控制link和visited的顏色 - 在企業(yè)開發(fā)中編寫a標(biāo)簽的偽類選擇器最好寫在標(biāo)簽選擇器的后面
- 在企業(yè)開發(fā)中和a標(biāo)簽盒子相關(guān)的屬性都寫在標(biāo)簽選擇器中(顯示模式/寬高/padding/margin)
- 在企業(yè)開發(fā)中和a標(biāo)簽文字/背景相關(guān)的都寫在偽類選擇器中
-
:hover{ }這個偽類選擇器可以用在任何標(biāo)簽里
三智末、過渡模塊
transition-property: 屬性1, 屬性2;:告訴系統(tǒng)哪個屬性需要執(zhí)行過渡效果
transition-duration: 時長1, 時長2;:告訴系統(tǒng)屬性需要執(zhí)行過渡效果
transition-delay: 時長1, 時長2;:規(guī)定過渡效果何時開始,默認(rèn)值是0
transition-timing-function: linear(勻速), ease(逐漸慢下來), ease-in(加速), ease-out(減速), ease-in-out(先加速后減速);:規(guī)定過渡效果的運(yùn)動速度,默認(rèn)為linear勻速
連寫:transition: property duration timing-function delay, property duration timing-function delay;
必備三要素:
- 必須要有屬性發(fā)生變化
- 必須告訴系統(tǒng)哪個屬性需要執(zhí)行過渡效果
- 必須告訴系統(tǒng)執(zhí)行過渡效果持續(xù)時長
注意:
- 連寫時可以同時設(shè)置多個屬性,中間用空格隔開
- 連寫的時候可以省略后面的兩個參數(shù)
- 如果多個屬性運(yùn)動的數(shù)值都一樣,可以簡寫為
transition: all duration;
編寫過渡模塊的套路:
- 先編寫基本的界面
- 修改需要修改的屬性
- 回過頭給被修改屬性的那個元素添加過渡效果
四罩润、2D轉(zhuǎn)換模塊
transform: rotate(ndeg);:控制元素旋轉(zhuǎn),deg角度,默認(rèn)情況下元素都是以自己的中心點(diǎn)作為參考來旋轉(zhuǎn),可以通過形變中心點(diǎn)屬性來修改參考點(diǎn)
transform-origin: npx npx/50% 50%/center center:第一個參數(shù):水平方向,第二個參數(shù):垂直方向,取值可以為具體像素,百分比和特殊關(guān)鍵字,兩方向取值一樣時可以只寫一個
transform: rotateX/Y/Z(ndeg);:想圍繞哪個軸轉(zhuǎn)就寫上哪個軸,默認(rèn)圍繞Z軸
perspective: npx;:透視屬性控制近大遠(yuǎn)小效果,值為距離元素的距離,一定要添加到它的父元素上面
transform: translate(npx, npx);:控制元素平移,第一個參數(shù):水平方向,第二個參數(shù):垂直方向
transform: scale(n, n);:控制元素縮放,第一個參數(shù):水平方向,第二個參數(shù):垂直方向,如果取值等于1,代表不變.如果取值大于1,代表放大.如果取值小于1,代表縮小.
連寫:transform: rotate(ndeg) translate(npx, npx) scale(n, n);:連寫時各屬性用空格隔開
盒子陰影:box-shadow: 水平偏移 垂直偏移 模糊度 陰影擴(kuò)展 陰影顏色 內(nèi)外陰影;,默認(rèn)為外陰影,默認(rèn)陰影顏色為內(nèi)容的顏色,快速添加陰影只需編寫三個參數(shù)即可(水平偏移 垂直偏移 模糊度)
文字陰影:text-shadow: 水平偏移 垂直偏移 模糊度 陰影擴(kuò)展;,也可以只寫三個元素
不透明級別:opacity:0-1;設(shè)置元素的不透明級別,0為透明,1為不透明
