CSS定位機制

css定位機制和css動畫變換

 

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上，當滑鼠離開時會瞬間停止變化。

本文轉自xsster51CTO部落格，原文連結：http://blog.51cto.com/12945177/1930149 ，如需轉載請自行聯絡原作者