1.定位

1.定位 position

? ? ? ? ? ? ? ? ? ? 說法 ? ? 文檔流 ? 偏移位置（top left right bottom）時候的參照物 1.position:static; ? 默認(rèn)值 ? 默認(rèn)值 ? 默認(rèn) 2.position:absolute; 絕對定位 脫離 ? ? a.當(dāng)沒有父元素或者父元素沒有定位，參照物是瀏覽器窗口的第一屏b.有父元素且父元素有定位，父元素 3.position:relative; 相對定位 不脫離 ? 自己的初始位置 4.position:fixed; ? ? 固定定位 脫離 ? ? 瀏覽器當(dāng)前窗口 5.position:sticky; ? 粘性定位 可以做吸頂效果，粘性定位是css3.0新增的，兼容不好 ? 層疊順序： z-index屬性是不帶單位的，并且可以給負(fù)值，沒有設(shè)置z-index時，最后寫的對象優(yōu)先顯示在上層設(shè)置后，數(shù)值越大，層越靠上

2.相對定位

position:relative; 相對于自己原來位置偏移，偏移后可以覆蓋在別的位置，不會脫離文檔流還會再原位置占位 可以設(shè)置負(fù)值

3.絕對定位

基礎(chǔ)

position:absolute; 沒有父元素或父元素沒定位：脫離文檔流不占據(jù)原位置位置相對于瀏覽器 有父元素且父元素有定位：位置相對于父元素左上角 ? ? ? ? ? ? ? ?

深入

水平居中 外邊距：0 auto 垂直居中 定位：上面50% 左面50%再用外邊距：上面-50% 左面-50%（不能用百分比數(shù)值，只能用正數(shù)數(shù)值） ? 子元素在父元素居中的話外邊距只能設(shè)置自身的50%，不可設(shè)置為父元素的50%

4.固定位置

position:fixed; ? 會脫離文檔流，位置相對于瀏覽器一直不動

5.粘性定位

position:stycky; ? 固定在一個地方，不管網(wǎng)頁如何拉動

6.定位的層級

z-inder值越大，層級越大，越靠上顯示 ? 可以給負(fù)值，也可以給正值

7.定位和浮動的區(qū)別

浮動是半脫離，文字會形成環(huán)繞效果 定位是全脫離，不會出現(xiàn)文字環(huán)繞效

2.圖形

1.三角形

border-方位，加邊框之后隱藏其他三邊 rgba（0，0，0，0）最后一位數(shù)值控制透明度 transparent可以直接把邊框變透明，但不能調(diào)節(jié)透明度

3.錨點

錨點作用：頁面不同區(qū)域的跳轉(zhuǎn)，使用a鏈接 <a href="#錨點名字"></a> ? <div id="錨點名字"></div>

4.精靈圖

1.將導(dǎo)航背景圖片，按鈕背景圖片等有規(guī)則的合并成一張背景圖，即將多張圖片合為一張整圖，然后用background-position；來實現(xiàn)北京圖片的定位技術(shù)。 2.圖片整合的優(yōu)勢： 1)通過圖片整合來減少對服務(wù)器的請求次數(shù)，從而提高面的加載速度。 2）通過整合圖片來減小圖片的體積。 ?

5.過度動畫和時間

transition:過度時間； tranfrom:縮放；

6.幀動畫

@keyframes run {0% {top: 0;left: 0;} ?25% {top: 0;left: 400px;} ?50% {top: 400px;left: 400px;} ?75% {top: 400px;left: 0px;}100% {top: 0px;left: 0px;}} ? ? animation ? ? 動畫名稱 動畫執(zhí)行時間 動畫執(zhí)行速度曲線 動畫延遲時間 動畫執(zhí)行次數(shù) 動畫是否輪流反向運動 animation:run 2s linear 2s 2/infinite(無數(shù)次) alternate; ? 動畫名稱：run ? 動畫執(zhí)行時間：2s ? 動畫執(zhí)行速度曲線：linear 勻速 ? 動畫延遲時間：2s 動畫執(zhí)行次數(shù)：2次 ? 動畫是否輪流反向運動：1 ? 1.animation-name 動畫名稱 是定義關(guān)鍵幀是所定義的動畫名稱 ? 2.animation-duration 動畫的執(zhí)行時間 單位：s/ms ? 3.animation-timing-function 規(guī)定動畫運動的速度曲線 1.linear 相同的速度從開始到結(jié)束，也就是勻速 2.ease 默認(rèn)值 慢速度開始--速度變快--慢速度結(jié)束 3.ease-in 慢速度開始的過渡效果，也就是以低速度開始 4.ease-out 慢速度結(jié)束的過渡效果，也就是以低速結(jié)束 5.ease-in-out 以慢速度開始和結(jié)束的過渡效果 ? 4.animation-delay 定義動畫何時開始 單位：s/ms取值- 以秒或毫秒計- 默認(rèn)值是 0? 5.animation-iteration-count 動畫的執(zhí)行次數(shù) 1.n 默認(rèn)執(zhí)行動畫次數(shù)1次 2.infinite 無限次播放動畫 ? 6.animation-direction 定義是否應(yīng)該輪流反向播放動畫 1.normal 默認(rèn)值，正常播放 2.alternate 動畫輪流反向播放 3.alternate-reverse 從第一次就反向運動 ?8.animation-play-state: paused;動畫播放方式 ? 暫停取值：running:運動 paused: 暫停 ? ? ? 2D位移 語法：transform: translate()x與y之間用逗號隔開- transform: translate(x,y) 沿著x軸和y軸移動- transform: translateX(x) 沿著x軸移動- transform: translateY(y) 沿著y軸移動 ?取值: ?- px- 說明：允許負(fù)值，垂直正值向下，負(fù)值向上水平向右為正值，垂直方向向下正值 ?/* 如果只給一個值，只沿x水平方向移動 */transform: translate(-100px); ?注意:元素位移之后，原來的位置還在 ? 5設(shè)置元素的基點位置 transform-origin屬性 設(shè)置元素的基點位置 ? * transform-origin: 水平方向 垂直方向; ? * 設(shè)置元素的基點位置，設(shè)置圍繞哪個點進(jìn)行變化 ? * 取值px ?關(guān)鍵字 ?水平：left center right垂直：top center bottom ? - 說明：兩個空格隔開的值，分別表示x,y軸的原點一個值時，另一個值默認(rèn)center - 可為負(fù)數(shù) ? > 必須與transform屬性配合使用 位移不能用

總結(jié)

以上是生活随笔為你收集整理的定位、锚点、精灵图、帧动画详解的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。