CSS 進階

不會影響到其他元素的位置

對于行内元素無效

transform: translate(x,y)//translateX(x)//translateY(y)

50%:盒子自身寬度

水準/垂直居中

transform-origin//旋轉中心點

transform-origin:x y//50% 50%//left top

以中心點縮放（直接更改width、height向右下縮放

tranform: scale//縮放

tranform: scale(2,2)//tranform: scale(0.5,0.5)//tranform: scale(2)

同時有位移和其他屬性，要把位移放到最前面（旋轉會改變坐标軸）

transform: translate(40px, 0) scale(1.3) rotate(90deg);

定義動畫

調用動畫

動畫名稱

animation-name :xxx;

持續時間

animation-duration: 2s;

運動曲線//linear 勻速//

animation-timing-function: ease

steps(5) //分成特定幀

每兩個狀态切分

何時開始

animation-delay: 1s;

重複次數 //infinite 無限

animation-iteration-count: 2;

下一周期是否反方向播放 預設normal//反方向 alternate

animation-direction: alternate;

動畫結束後的狀态 預設是 backwards 回到起始位置//停留在結束狀态 forwards

animation-fill-mode

動畫運作或暫停 預設是running //pause

animation-play-state:pause;

簡寫 animation: xxx 2s linear 0s 1 alternate forwards//無animation-play-state

添加多個動畫

animation: xxxxxx, yyyyyyy;

animation :

動畫序列

from 和 to 相當于 0% 和 100%

移動

transform: translateZ(100px)

選擇

transform: rotateX(45deg)//左手準則

transform: rotateY(45deg)

transform: rotateZ(45deg)

transform: rotate3d(x,y,z,deg)//(x,y,z)矢量

透視

添加給父元素

perspective: 1000px;

視距

3d呈現

transform-style: preserve-3d//為子元素開辟3d空間

-moz-

-ms-

-webkit-

-o-

二倍圖

css->移動端 放大二倍 導緻模糊

準備2倍大的圖檔，再縮小1/2,放入1/2倍大的盒子中

精靈圖二倍圖

将精靈圖縮放 background-size: 40px auto;

position

IE 11或更低版本，不支援或部分支援

适用于移動端

父項屬性

flex-direction: 設定主軸方向

justify-content: 設定主軸上子元素排列方式

flex-start// 預設從頭部開始 如果主軸是x軸 則從左到右

flex-end// 從尾部開始排列

center// 在主軸居中對齊（如果主軸是x軸則 水準居中）

space-around //平分剩餘空間

space-between// 先兩邊貼邊 再平分剩餘空間

flex-wrap: 設定子元素是否換行

no-wrap 預設子元素不換行//如果裝不開，會縮小子元素寬度 放到父元素裡面

wrap //自動換行

align-items// 設定側軸上子元素排列方式（單行）

align-content// 設定側軸上子元素的排列方式（多行）

子元素出現換行時有效果 單行沒有效果

子項屬性

flex: 1;//所占剩餘空間比例//份數

flex: 20%//換行 多行顯示時

align-self 控制子項自己在側軸上的排列方式

order 屬性定義項目排列順序 預設為0

order: -1;//靠前

線性漸變

必須添加浏覽器私有字首

background: -webkit-liner-gradient(left, red, blue);//從左

background: -webkit-liner-gradient(top, left, red, blue);//從左上角

父元素字型大小

相對于html元素 字型大小

@media 針對不同的螢幕尺寸設定不同的樣式

重置浏覽器大小的過程中，頁面也會根據浏覽器的高度和寬度重新渲染頁面

mediatype

all

print

screen

關鍵字//将媒體類型或多個媒體特性連接配接到一起作為媒體查詢的條件

and

not

only

媒體特性

width

max-width

min-width

引入資源//css檔案

子元素樣式直接寫到父元素裡面

運算符兩側加空格 width: 15px + 5;

兩個數參與運算 如果隻有一個數有機關 則結果以這個機關為準

如果2個數都有機關，且不一樣 則最後結果以第一個為準

@import "common.css"/@import "common"

本文來自部落格園，作者：w0000，轉載請注明原文連結：https://www.cnblogs.com/w0000/p/15334998.html