定位屬性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
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-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定位機制
在css的定位機制中，分別有如下三種 1.文件流 2.浮動 float 3.定位 position 所謂文件流，即元素排版布局過程中，元素會自動從左往右，從上到下的流式排列。脫離文件流，即將元素從普通的布局排版中拿走 打亂排列順序 其他盒子在進行定位的時候，會當做脫離文件流的元素不存在而進行定位。p...
CSS定位機制
將各個盒子進行定位 是一種預設方式，各個盒子從上到下，從左到右排列 元素分為三類，包括block inline inline block型別 display none 元素不被顯示 像影象軟體中的圖層一樣可以對每個layer能夠精確定位操作，用position屬性 相對於誰定位 進行設定 通過top...
css定位機制
每次用div css布局的時候都混亂的不行，所以決定仔細梳理一遍，加強理解和記憶 css 有三種基本的定位機制 普通流 浮動和絕對定位。除非專門指定，否則所有框都在普通流中定位。塊級框從上到下乙個接乙個地排列，框之間的垂直距離是由框的垂直外邊距計算出來。行內框在一行中水平布置。可以使用水平內邊距 邊...