CSS3

css3的選擇器：

p:nth-child(2) 選擇屬於其父元素的第二個子元素的每一個 <p> 元素。

p:after{ content:"臺詞：";}        //css3選擇器，在p標籤以後添加內容

p:before{ content：」內容」}  //css3選擇器，在p標籤以前添加內容

 

css3經常使用方法：

box-sizing：border-box；  //css3新增長，將邊框的位置算在內容裏面

服務器字體的調用：

@font-face{ 
font-family:webFont;
src:url(src/webFont.ttf);
}
h1{ font-family:webFont;}

矢量圖的調用：

1.去阿里巴巴矢量圖標庫下載圖標 https://iconfont.cn

2.經過<link rel="stylesheet" type="text/css" href="解壓的的路徑/iconfont.css"/>導入矢量圖

3.使用字體編碼（如：&#xe646;）使用

4.能夠添加iconfont的class名，而後複寫.iconfont能夠對矢量圖進行更改。

過渡屬性（Transition）

transition-timing-function:linear 勻速變換

transition 簡寫屬性，用於在一個屬性中設置四個過渡屬性。
transition-property 規定應用過渡的 CSS 屬性的名稱。
transition-duration 定義過渡效果花費的時間。
transition-timing-function 規定過渡效果的時間曲線。
transition-delay 規定過渡效果什麼時候開始。

2D效果

transform:rotate(30deg); 旋轉30度

transform:translate(100px,20px); X移動100px，Y移動20px.
transform:translateX(100px); X移動100px
transform:translateY(20px); Y移動20px.

transform:scaleX(2); 水平方向（X軸）縮放2
transform:scaleY(2); 垂直方向（Y軸）縮放2
transform:scale(2,1.5); 水平和垂直方向同時縮放（X軸和Y軸同時縮放 ）
注意：都以中心位置爲中心點，縮放基數爲1，大於1放大，小於1縮小。

transform:skewX(30deg); 水平扭曲變形30度。
transform:skewY(10deg); 垂直扭曲變形10度。
transform:skewXY(30deg,10deg); 水平和垂直同時扭曲30度，10度。

transform字面上就是變形，改變的意思。
在CSS3中transform主要的包括如下幾種：旋轉rotate、扭曲skew、縮放scale、和移動translate以及巨型變形matrix；none:表示不進行變換。

3D效果

transform轉換屬性

transform 向元素應用 2D 或 3D 轉換。
transform-origin 容許你改變被轉換元素的位置。
transform-style 規定被嵌套元素如何在 3D 空間中顯示。
perspective 規定 D 元素的透視效果。
perspective-origin 規定 3D 元素的底部位置。
backface-visibility 定義元素在不面對屏幕時是否可見。

transform-origin:x-axis y-axis;
更改中心點，值能夠是百分值，em,px，X能夠是：left,center,right，length, %;Y能夠是：top,center,bottom.

transform-style:flat 子元素將不會保留其3D位置
transform-style:preserve-3d; 子元素將保留其3D位置

perspective:none; 取值爲none或者不設置沒有3D空間
perspective:800px ~ 2000px; 通常的取值範圍，越小效果就越大

backface-visibility:visible 默認值，表示反面可見
backface-visibility:hidden 表示反面不可見

 

 

動畫

div{ainmation:aa;}

@keyframes aa{
　　from{}
　　50%{}
　　to{}
}

@keyframes 規定動畫。
animation 全部動畫屬性的簡寫屬性，除了 animation-play-state 屬性。
animation-name 規定 @keyframes 動畫的名稱。
animation-duration 規定動畫完成一個週期所花費的秒或毫秒。默認是 0。
animation-timing-function 規定動畫的速度曲線。默認是 "ease"。
animation-delay 規定動畫什麼時候開始。默認是 0。
animation-iteration-count 規定動畫被播放的次數。默認是 1。
animation-direction 規定動畫是否在下一週期逆向地播放。默認是 "normal"。
animation-play-state 規定動畫是否正在運行或暫停。默認是 "running"。
animation-fill-mode 規定對象動畫時間以外的狀態。

彈性盒
主軸(main axis):伸縮容器的主軸，主要沿着這條軸進行排列布局，不必定是水平的，主要取決於」justify-content「屬性

主軸起點（main-start）和終點（main-end） 主軸尺寸（main size）

側軸(cross axis)：垂直於主軸稱爲側軸 方向取決於主軸方向

側軸起點（cross-start）和終點（cross-end） 側軸尺寸（cross size）

display:flex 將對象做爲彈性伸縮盒顯示。

display:inline-flex 將對象做爲內聯(行內)塊級彈性伸縮盒顯示。

設置主軸起點和終點：

flex-direction:row 默認位置，主軸橫向，從左往右。

flex-direction:row-reverse;主軸方向走，起點在右側，終點在左側。

flex-direction:column;主軸縱向，從上往下。

flex-direction:column-reverse;主軸反向，從下往上。

設置和檢索伸縮盒子元素超出父容器是否換行：

flex-wrap:nowrap 子元素超出父容器不換行。

flex-wrap:wrap 超出自動換行。

flex-wrap:wrap-reverse 反轉wrap排列。


設置或檢索彈性盒子元素在主軸方向的對齊方式。

justify-content:flex-start 行起始位置對齊。

justify-content:flex-end 行結束位置對齊。

justify-content:center 行中間位置對齊。

justify-content:space-between 盒子元素平均分佈在行內。

justify-content:space-around 彈性盒子元素平均分佈在行裏，兩端保留子元素於子元素之間間距大小的一半。

設置或檢索彈性盒子元素在側軸方向的對齊方式。

align-items:flex-start 彈性盒子元素的側軸起始位置的邊界緊靠住該行的側軸起始邊界。

align-items:flex-end 彈性盒子元素的側軸起始位置的邊界緊靠住該行的側軸結束邊界。

align-items:center 彈性盒子元素在該行的側軸上居中放置。（若是該行的尺寸小於彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度）。

align-items:baseline 將文字對齊；

align-items:stretch 若是未設置寬高，那麼將元素默認拉伸爲父元素高度（默認值）。

設置各行的對齊(相似於justify-content)

align-content:flex-start 各行向彈性盒容器的起始位置堆疊。

align-content:flex-end 各行向彈性盒容器的結束位置堆疊。

align-content:center 各行向彈性盒容器的中間位置堆疊。

align-content:space-between 各行在彈性盒容器中平均分佈。

align-content:space-around 各行在彈性盒容器中平均分佈，兩端保留子元素與間間距大小的一半。

align-content:stretch 各行將會伸展以佔用剩餘的空間(默認值)。

flex-grow:<number>(default 0); 根據彈性盒子元素設置做爲比率分配空間，<number>用數值定義，不容許負值，默認值是0，沒有擁有分配空間權力。

flex-shrink:<number>(default 1); 分配超出的空間，默認值爲1，若是沒有定義該屬性，將會自動按照默認值1在全部因子加起來計算比率來進行空間收縮。爲0不收縮

設置或檢索彈性盒伸縮基準值
flex-basis:<length>; 用長度來定義寬度，負值 
flex-basis:auto; 無特定寬度值，取決於其餘屬性值
flex-basis:50%; 百分比來定義寬度，不容許負值。

 

 

複合屬性：

flex:1; 用於合併指定flex-grow和flex-shrink和flex-basis屬性，默認值爲0 1 auto。縮寫爲1：1 1 0；auto：1 1 auto；nome：0 0 auto。

【flex-grow】：定義彈性盒子元素的擴展比率。
【flex-shrink】：定義彈性盒子元素的收縮比率。
【flex-basis】：定義彈性盒子元素的默認基準值。


order:1 更改盒模型對象的子元素出現的順序，數值最小在前面，能夠爲負數。

align-self

說明：用於設置彈性元素自身在側軸方向上的對齊方式。(注意，他和上面的語句區別在於，用於單個定義某元素)
auto：若是align-self的值爲’auto'，則其計算值爲元素的父元素的‘align-items'值，若是其沒有父元素，則計算值爲stretch'。
flex-start：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。
flex-end：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。
center：彈性盒子元素在該行的側軸（縱軸）上居中放置。（若是該行的尺寸小於彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度）。
baseline：如彈性盒子元素的行內軸與側軸爲同一條，則該值與flex-start'等效。其它狀況下，該值將參與基線對齊。
stretch：若是指定側軸大小的屬性值爲’auto'，則其值會使項目的邊距盒的尺寸儘量接近所在行的尺寸，但同時會遵守min/ max-width/height'屬性的限制。

 

媒體查詢

@media screen and(min-width:1024px){} 當屏幕小於1024px，發生的事

語法一：
@media mediatype and|not|only(media feature){
CSS-Code;
}

語法二：
針對不一樣的媒體使用不一樣stylesheets

<link rel="stylesheet" media="mediatype and|not|only(media feature)" href="mystylesheet.css">

media query語法格式中支持設備以下：

all 適用於全部的設備
aural適用於語音和音頻合成器
braille 適用於觸覺反饋設備
embossed 適用於凸點文字（盲文）和刷設備
handheld 適用於小型或者手提設備
print適用於打印機
projection 適用於投影圖像，如幻燈片
sceen 適用於計算機顯示器（最經常使用的一個）
tty適用於使用固定間距字符格的設備如電傳打字機和終端
tv適用於電視類設備

 

適配移動端佈局使用rem單位，使用時只須要給HTML根標籤設一個值，而後給其餘元素設rem值，在進行調整時，rem單位會參考HTML的值。