標籤:css
定位屬性position(相生相剋)
1 static:靜態定位
2 relative:相對定位(相對於自己原來的位置定位)
3. absolute:絕對位置(float)具有強大的破壞性,父容器管不住
4. fixed:固定定位(相對於瀏覽器定位不是相對於文檔定位)
css其他定位屬性:
1 z-index(配合absolute)對象的層疊順序,使用一個認證來定義堆疊的層次整數值越大。。
2 top
3 right
4 left
5 bottom
css相對定位position取值為relative
css的相對定位仍然會佔用原來的位置
css絕對位置position取值為absolute
css絕對位置時從文檔流中徹底刪除
【相對定位】
* 1.使用position:relative;設定元素為相對定位的元素;
* 2.定位機制
*相對於自己原來文檔流中的位置定位,當不指定top等定位值時不會改變元素位置 *相對定位元素仍會佔據原有文檔流中的位置而不會釋放
3使用top、left、right、bottom、調整位置,當left和right同時存在是,left生效,當top和bottom同時存在時,top生效。
[絕對位置]
* 1.使用position:absolute;設定元素為絕對位置元素;
* 2.定位機制:
* · 相對於第一個非static元素有定位的祖先元素(即使用了relative、absolute、fixed定位的祖先元素)
* ·如果所有祖先元素均未定位,則相對於瀏覽器左上方定位;
* ·使用absolute的元素,會從文檔流中完全刪除,原有空間釋放不再佔有;
* ·可以通過設定relative鎖住;
[固定定位]
* position: fixed;是一種特殊的絕對位置,父容器無法使用relative鎖住;
* 定位機制:永遠相對於瀏覽器定位;
[z-index屬性]:
*作用: 設定定位元素的z軸層疊順序,
* 要求:1、 必須是定位元素才能用(relative、absolute、fixed)
* 2、使用z-index需要考慮父容器的約束:
* ·如果父容器為index:auto;則子容器的z-index不受父容器的約束;
* ·如果父容器的z-index進行了設定,則子容器的層疊將以父容器的z-index為準(在同一父容器的不同子項目,能可以通過自己的z-index調整層疊關係)
* 3、 z-index預設auto & z-index:0的區別:
* z-index:auto為預設值,與z-index:0處於同一平面;
* z-index:auto,不會約束子項目的z-index層次,而z-index:0會約束子項目與父元素在同一平面
* 4 z-index相同( 處於同一平面的定位元素)的層疊關係,後來者居上;
絕對位置元素水平置中的設定方式:
1.left:50%;
2.設定margin-left為-width/2:margin-left: -50px;
[負邊距]
1.實現區塊層級元素在會計元素中水平垂直置中
2.設定子容器為定位元素;
top: 50%; margin-top: -25px;
left: 50%; margin-left: -25px;
【 css 動畫變換 】
1.聲明一個動畫(主要畫面格)
@keyframes name{
from{}
to{}
}
注意事項:階段寫法:
1.每個階段用百分比表示:從0%到100%
2.起止必須設定即從0%到100%或者from和to
2.在css選擇其中使用animation動畫屬性,調用聲明好的主要畫面格;
【animation縮寫順序】
動畫名稱,期間必須設定
animation可以同設定多個動畫,動畫時間
Animation-name 動畫名稱(@keyframes 名稱)
Animation-duration 動畫期間
Animtaion-timing-function動畫速度曲線 常選ease
Animtaion-delay 動畫延遲時間
Animation-iteration-count 播放次數,預設為1,無限次Infinite
Animation-direction 設定對象動畫在迴圈中是否反向運動 ( Alternate 逆向播放)
* animation-fill-mode 設定對象動畫時間之外的狀態(forwards: 停留在動畫結束狀態 backwards:停留在動畫開始狀態)
>>> 注意animation-name和animation-duration必須設定
>>> animation可以同時設定多個動畫 動畫之間用,分隔
animation:frame1 .3s,frame2 .5s……
transform定義變換:
常用變換: translate平移;
scale縮放;
rotate定義旋轉;
transform可同時進行多個變換,多個變換之間用空格分隔;
例如:transform:scale(1.8,3.0)translateY(0px) rotate()
translate-origion:定義變形起點:
可選值:left/center/right top/bottom/center 或者直接寫X,Y軸座標點。
例如transform:rotate(180deg)
transform-origin:right bottom;
表示從左下角旋轉180度
transition屬性:參與過度的的屬性:可以單獨指定某個css屬性,也可以all,none
過渡開始到過渡完成的時間,.3 .5 ;
過度的樣式函數 常選ease
過渡開始的延遲時間,可以省略;
transition屬性可以同時定義多個過渡效果,用逗號分隔
例如:transition:color .3 ease,border .5s linear;
加在hover上,當滑鼠離開時會瞬間停止變化。
css定位機制