定位屬性position（相生相克）
1 static：靜態(tài)定位
2 relative：相對(duì)定位（相對(duì)于自己原來(lái)的位置定位）
3. absolute：絕對(duì)定位（float）具有強(qiáng)大的破壞性，父容器管不住
4. fixed:固定定位（相對(duì)于瀏覽器定位不是相對(duì)于文檔定位）
css其他定位屬性：
1 z-index（配合absolute）對(duì)象的層疊順序，使用一個(gè)證書來(lái)定義堆疊的層次整數(shù)值越大。。
2 top
3 right
4 left
5 bottom
css相對(duì)定位position取值為relative
css的相對(duì)定位仍然會(huì)占用原來(lái)的位置
css絕對(duì)定位position取值為absolute
css絕對(duì)定位時(shí)從文檔流中徹底刪除
【相對(duì)定位】
* 1.使用position：relative;設(shè)置元素為相對(duì)定位的元素；
* 2.定位機(jī)制
*相對(duì)于自己原來(lái)文檔流中的位置定位，當(dāng)不指定top等定位值時(shí)不會(huì)改變?cè)匚恢?nbsp; *相對(duì)定位元素仍會(huì)占據(jù)原有文檔流中的位置而不會(huì)釋放
3使用top、left、right、bottom、調(diào)整位置，當(dāng)left和right同時(shí)存在是，left生效，當(dāng)top和bottom同時(shí)存在時(shí)，top生效。
[絕對(duì)定位]
* 1.使用position：absolute；設(shè)置元素為絕對(duì)定位元素;
* 2.定位機(jī)制：
* · 相對(duì)于第一個(gè)非static元素有定位的祖先元素（即使用了relative、absolute、fixed定位的祖先元素）
* ·如果所有祖先元素均未定位，則相對(duì)于瀏覽器左上角定位；
* ·使用absolute的元素，會(huì)從文檔流中完全刪除，原有空間釋放不再占有；
* ·可以通過設(shè)置relative鎖?。?/p>
[固定定位]
* position: fixed;是一種特殊的絕對(duì)定位，父容器無(wú)法使用relative鎖??；
* 定位機(jī)制：永遠(yuǎn)相對(duì)于瀏覽器定位；
[z-index屬性]:
*作用： 設(shè)置定位元素的z軸層疊順序，
* 要求：1、 必須是定位元素才能用（relative、absolute、fixed）
* 2、使用z-index需要考慮父容器的約束：
* ·如果父容器為index：auto；則子容器的z-index不受父容器的約束；
* ·如果父容器的z-index進(jìn)行了設(shè)置，則子容器的層疊將以父容器的z-index為準(zhǔn)（在同一父容器的不同子元素，能可以通過自己的z-index調(diào)整層疊關(guān)系）
* 3、 z-index默認(rèn)auto & z-index：0的區(qū)別：
* z-index：auto為默認(rèn)值，與z-index：0處于同一平面；
* z-index：auto，不會(huì)約束子元素的z-index層次，而z-index：0會(huì)約束子元素與父元素在同一平面
* 4 z-index相同（ 處于同一平面的定位元素）的層疊關(guān)系，后來(lái)者居上；
絕對(duì)定位元素水平居中的設(shè)置方式：
1.left：50%；
2.設(shè)置margin-left為-width/2：margin-left: -50px;
[負(fù)邊距]
1.實(shí)現(xiàn)塊級(jí)元素在會(huì)計(jì)元素中水平垂直居中
2.設(shè)置子容器為定位元素；
top: 50%; margin-top: -25px;
left: 50%; margin-left: -25px;
【 css 動(dòng)畫變換 】
1.聲明一個(gè)動(dòng)畫（關(guān)鍵幀）
@keyframes name{
from{}
to{}
}
注意事項(xiàng)：階段寫法：
1.每個(gè)階段用百分比表示：從0%到100%
2.起止必須設(shè)置即從0%到100%或者from和to
2.在css選擇其中使用animation動(dòng)畫屬性，調(diào)用聲明好的關(guān)鍵幀；
【animation縮寫順序】
動(dòng)畫名稱，持續(xù)時(shí)間必須設(shè)置
animation可以同設(shè)置多個(gè)動(dòng)畫，動(dòng)畫時(shí)間
Animation-name 動(dòng)畫名稱(@keyframes 名稱)
Animation-duration 動(dòng)畫持續(xù)時(shí)間
Animtaion-timing-function動(dòng)畫速度曲線 常選ease
Animtaion-delay 動(dòng)畫延遲時(shí)間
Animation-iteration-count 播放次數(shù)，默認(rèn)為1，無(wú)限次Infinite
Animation-direction 設(shè)置對(duì)象動(dòng)畫在循環(huán)中是否反向運(yùn)動(dòng) （ Alternate 逆向播放）
* animation-fill-mode 設(shè)置對(duì)象動(dòng)畫時(shí)間之外的狀態(tài)（forwards： 停留在動(dòng)畫結(jié)束狀態(tài) backwards:停留在動(dòng)畫開始狀態(tài)）
>>> 注意animation-name和animation-duration必須設(shè)置
>>> animation可以同時(shí)設(shè)置多個(gè)動(dòng)畫 動(dòng)畫之間用,分隔
animation:frame1 .3s,frame2 .5s……
transform定義變換：
常用變換： translate平移；
scale縮放；
rotate定義旋轉(zhuǎn)；
transform可同時(shí)進(jìn)行多個(gè)變換，多個(gè)變換之間用空格分隔；
例如：transform：scale（1.8,3.0）translateY(0px) rotate()
translate-origion:定義變形起點(diǎn)：
可選值：left/center/right top/bottom/center 或者直接寫X，Y軸坐標(biāo)點(diǎn)。
例如transform:rotate(180deg)
transform-origin:right bottom;
表示從左下角旋轉(zhuǎn)180度
transition屬性：參與過度的的屬性：可以單獨(dú)指定某個(gè)css屬性，也可以all，none
過渡開始到過渡完成的時(shí)間，.3 .5 ;
過度的樣式函數(shù) 常選ease
過渡開始的延遲時(shí)間，可以省略；
transition屬性可以同時(shí)定義多個(gè)過渡效果，用逗號(hào)分隔
例如：transition：color .3 ease,border .5s linear;
加在hover上，當(dāng)鼠標(biāo)離開時(shí)會(huì)瞬間停止變化。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
重慶分公司
重慶分公司
