css3學習階段總結

css3中經常使用知識點及常見問題

CSS在頁面中的組成css
- 首先是樣式表
  - 樣式表裏包含規則
    - 規則裏包含選擇器+聲明塊
      - 聲明塊裏包含聲明
        
        聲明裏包含css屬性+css屬性值組成的鍵值對。
瀏覽器讀取編譯css選擇器時是從右往左的順序，由於能夠有機會一次選中樣式，就算不能一次選中也能夠縮小範圍。css3
css中的優先級不是選擇器的優先級，是css聲明的優先級。web
學習css屬性時首先要記住該屬性的默認值和是否能夠繼承。瀏覽器
屬性名不須要引號，屬性值須要引號。markdown
代碼分析 #wrap li :nth-child(1):找到id爲wrap底下的全部子元素，而且選中第一個子元素，而且這個子元素必須是<li>。ide
溢出顯示省略號函數
- white-space：nowrap；
- overflow：hidden；
- text-overflow：ellipsis；（隱含條件是元素不能是被內容撐開的元素）
css全稱：cascading style sheets工具
resize是css屬性容許控制一個元素的可調整大小性。（必定要配合overflow:auto使用）默認值：佈局
- none不可繼承，元素不能被用戶縮放。
- both,容許用戶在水平和垂直方向上調整元素的大小。
- horizontal，容許用戶在水平方向上調整元素的大小。
- vertical，容許用戶在垂直方向上調整元素的大小。
當按照top和left做爲參考時，座標系是向右向下爲正，至關於說正值往裏收，負值往外擴；當按照bottom和right做爲參考時，座標系是向左向上爲正，至關因而正值往外擴，負值往裏收。學習
a.浮動提高半層，只有在浮動的狀況下，才須要考慮元素分兩層。定位元素提高一層（相對定位會在文檔流裏有殘留）b.z-index爲1怎麼都會比a高；z-index爲-1時怎麼都會比a低。

css盒模型

倒影 -webkit-box-reflect不是css3裏的是Google的，可設置圖片的方向及與原圖片的距離。
設置了box-sizing: border-box;的元素再設置padding之後，padding不會增長元素的大小，而是會往裏擠內容區的空間。
盒模型陰影
- box-shadow，以逗號分割列表來描述一個或多個陰影效果，能夠用到幾乎任何元素上。默認值none不可繼承，值：inset 默認陰影在邊框外。使用inset後，陰影在邊框內。offset-x，offset-y這是頭兩個length值，用來設置陰影偏移量。分別設置水平偏移量和垂直偏移量，能夠設成負值。若是二者都是0，那麼陰影位於元素後面。
- blur-radius值越大，模糊面積越大，陰影就越大越淡。不能爲負值，默認爲0.此時陰影邊緣銳利。spread-radius取正值時，陰影擴大；取負值時，陰影收縮，默認爲0，此時陰影與元素一樣打。color：陰影顏色，若是沒有指定，則由瀏覽器決定。
若是元素同時設置了border-radius，陰影也會有圓角效果，多個陰影時和多個text shadows規則相同。（第一個陰影在最上面）。
border-radius用來設置邊框圓角，默認值爲0不可繼承，值：
- 固定的px值定義圓形半徑或橢圓的半長軸，半短軸，不能用負值，
- 使用百分數定義圓形半徑或橢圓的半長軸，半短軸。水平半軸相對於盒模型的寬度；垂直半軸相對於盒模型的高度，不能用負值。
- 這是一個簡寫屬性，當設置一個值時，四個角同樣，當設置兩個值時，第一個值表明左上和右下，第二個值表明右上和左下。當設置三個值時，第一個值表明左上，第二個值表明右上和左下，第三個值表明右下。
border-image-source屬性定義使用一張圖片來代替邊框樣式，若是隻爲none，則仍然使用border-style定義的樣式。默認值：none不可繼承。
border-image-slice屬性會經過規範將border-image-source的圖片明確的分割爲9個區域，四個角，四邊以及中心區域。並可指定偏移量。
border-image-repeat定義圖片如何填充邊框。或爲單個值，設置全部的邊框；或爲兩個值，分別設置水平和垂直的邊框。默認值：stretch 不可繼承。值：stretch（拉伸），repeat，round（平鋪）
border-image-width：定義圖像邊框寬度。默認值：1不可繼承。
border-image-outset：屬性定義邊框圖像可超出邊框盒的大小。默認值：0 不可繼承。只能正值：可超出邊框盒的大小。

css背景

background-image屬性用於爲一個元素設置一個或多個背景圖像，圖像在繪製時，以z軸方向堆疊的方式進行，先指定的圖像會在以後指定的圖像上面進行繪製。注意：background-image-color會在image之下進行繪製，邊框和內容會在image之上進行繪製。默認值：none。不可繼承。
background-position：制定背景位置的初始位置。默認值：0% 0% 不可繼承。值：百分比：參照尺寸爲背景圖片定位區域的大小減去背景圖片的大小。
background-attachment決定背景是在視口中固定的仍是隨包含它的區塊滾動的。默認值 scroll 不可繼承。值：fixed此關鍵字表示背景相對於視口固定。即便一個元素有滾動機制，背景也不會隨着元素的內容滾動。scroll此關鍵字表示背景相對於元素自己固定，而不是隨着它的內容滾動。
默認狀況下背景圖片是從padding box開始繪製，從border box開始剪裁。
background-origin設置背景渲染的起始位置。值：content-box，padding-box，border-box
background-clip設置背景剪裁位置。值：content-box，padding-box，border-box
-webkit-background-clip：text；能夠只給文字設置背景。
background-size設置背景圖片大小。默認值 auto auto不可繼承。值：
- 百分比:指定背景圖片相對背景區的百分比。背景區由background-origin設置，默認爲和模型的內容區與內邊距。
- auto：以背景圖片的比例縮放背景圖片。注意：單值時，這個值指定圖片的寬度，圖片的高度隱式的爲auto 。兩個值：第一個值指定圖片等寬度，第二個值指定圖片的高度。

css基本選擇器

選擇器種類
1. 通配符選擇器（*）
2. id選擇器（#）
3. 類選擇器（.）
4. 元素選擇器（元素名）
5. 後代選擇器（空格）
6. 選擇器分組（，（結合符））
7. 相鄰兄弟選擇器（+），只會匹配緊跟着的兄弟元素。
8. 通用兄弟選擇器（~），在使用~鏈接兩個元素時，他會匹配第二個元素，條件是它必須跟（不必定緊跟）在第一個元素以後，且它們都有一個共同的元素。
9. 子元素選擇器（直接後代選擇器），與後代選擇器的區別是此類選擇器只能匹配到直接後代，不能匹配到深層次的後代元素。（使用時注意屬性是否可繼承）
10. 屬性選擇器（存在和值屬性選擇器）
  - [attr]：該選擇器選擇包含 attr 屬性的全部元素，不論 attr 的值爲什麼。
  - [attr=val]：該選擇器僅選擇 attr 屬性被賦值爲 val 的全部元素。
  - [attr~=val]：表示帶有以 attr 命名的屬性的元素，而且該屬性是一個以空格做爲分隔的值列表，其中至少一個值爲val。
11. 子串值屬性選擇器
  - [attr|=val] : 選擇attr屬性的值是val（包括val）或以val-開頭的元素。
  - [attr^=val] : 選擇attr屬性的值以val開頭（包括val）的元素。
  - [attr$=val] : 選擇attr屬性的值以val結尾（包括val）的元素。
  - [attr*=val] : 選擇attr屬性的值中包含字符串val的元素。

css中的一些僞類

僞類和僞元素不存在於DOM樹中，存在的目的是爲了拿到元素的一些狀態。
錨點在定義的時候須要注意link和visited要放在hover和active的前面，由於link和visited已經把<a>標籤的全部狀態所有涵蓋住了，爲了避免讓一些設置的狀態失效，因此link和visited要放在hover和active的前面。link和visited只能在<a>標籤身上起做用。它們叫錨點僞類也叫連接僞類。
連接僞類
- 注意:link，:visited，:target是做用於連接元素的！
- :link 表示做爲超連接，並指向一個未訪問的地址的全部錨
- :visited 表示做爲超連接，並指向一個已訪問的地址的全部錨
- :target 表明一個特殊的元素，它的id是URI的片斷標識符
- 使用:target能夠實現選項卡，步驟:
  1. 將<a>標籤中的href屬性值設置爲選項卡的<div>的id。
  2. 設置<div>標籤的display：none；，在:target中設置display：block；
動態僞類
- 注意:hover，:active基本能夠做用於全部的元素！
- :hover 表示懸浮到元素上
- :active 表示匹配被用戶激活的元素（點擊按住時）
- 因爲<a>標籤的:link和:visited能夠覆蓋了全部<a>標籤的狀態，因此當:link，:visited，:hover，:active同時出如今<a>標籤身上時 :link和:visited不能放在最後！！！
- 動態僞類和連接僞類能夠選中一個DOM節點在DOM樹之外的狀態。
隱私與:visited選擇器
- 只有下列的屬性才能被應用到已訪問連接：
  - color
  - background-color
  - border-color
表單相關僞類
- :enabled 匹配可編輯的表單
- :disable 匹配被禁用的表單
- :checked 匹配被選中的表單
- :focus 匹配獲焦的表單
結構性僞類
- index的值從1開始計數！！！！
- index能夠爲變量n(只能是n)
- index能夠爲even odd
- #wrap ele:nth-child(index) 表示匹配#wrap中第index的子元素這個子元素必須是ele
- #wrap ele:nth-of-type(index) 表示匹配#wrap中第index的ele子元素
- 除此以外:nth-child和:nth-of-type有一個很重要的區別: nth-of-type以元素爲中心！！！例如一個父標籤中有不一樣類型的子標籤，可是子標籤的class值都爲一個值，那麼調用這個值的nth-of-type（1）會給到不一樣類型的子標籤的第一個元素，而不是父標籤的第一個子標籤。因此說只要父元素中的子元素類型不一樣，最好用nth-child。
- :nth-child(index)系列
  - :first-child
  - :last-child
  - :nth-last-child(index)
  - :only-child (相對於:first-child:last-child 或者 :nth-child(1):nth-last-child(1))
- :nth-of-type(index)系列
  - :first-of-type
  - :last-of-type
  - :nth-last-type(index)
  - :only-of-type (相對於:first-of-type:last-of-type 或者 :nth-of-type(1):nth-last-of-type(1))
  - 注意：index能夠是變量n（只能是n，0到正無窮）odd：奇數，even：偶數；
  - :empty(內容必須是空的，有空格都不行，有attr不要緊)
- 給每一個元素設置一個右邊框，最後一個元素不要，能夠採用:not僞類結合:last-of-type僞類進行操做。
僞元素
- 僞元素是DOM樹之外的元素，靠css樣式生成在頁面中一個元素的不一樣類型僞元素只能有一個，設置多個相同類型的僞元素會被覆蓋。
- 種類：
  - ::after 位於一個元素以後，不可選中
  - ::before 位於一個元素以前，不可選中
  - ::firstLetter 選中第一個
  - ::firstLine 選中第一行
  - ::selection 選中時改變選中的元素樣式

自定義單選按鈕

步驟：
1. 使用幾個<input>標籤，type=「radio」，name值相同。
2. 給每一個<input>標籤包含一個<label>標籤，給<input>標籤一個兄弟元素<span>元素（在頁面中點擊<span>元素時<input>標籤也會被選中）
3. 給<label>設置樣式，首先<label>設置浮動float：left；，由於<label>標籤是內聯元素，不能指定高寬，設置浮動之後變成塊級元素，能夠指定高寬。
4. 給<label>標籤設置相對定位position：relative；，給<label>標籤的子標籤<input>標籤設置絕對定位position:absolute;此時<input>標籤的包含塊是<label>標籤。將<input>標籤的left和top設置爲負值，將<label>標籤設置overflow:hidden；（這樣就將<input>標籤的單選按鈕移出可見區域）。
5. 將<label>標籤的子標籤<span>設置絕對定位position：absolute；``left，top，right，bottom都設爲0；此時<span>標籤和<label>標籤同樣大小。
6. 使用<input>的僞類:checked再選中兄弟元素<span>(input:checked +span),在樣式裏設置相應的樣式。

css中聲明的優先級

選擇器的特殊性
- 選擇器的特殊性由選擇器自己的組件肯定，特殊性值表述爲4個部分，如 0,0,0,0
- 一個選擇器的具體特殊性以下肯定：
  1. 對於選擇器中給定的ID屬性值，加 0,1,0,0
  2. 對於選擇器中給定的各個類屬性，屬性選擇，或僞類，加 0,0,1,0
  3. 對於選擇器中的給定的各個元素和僞元素，加0,0,0,1
  4. 通配符選擇器的特殊性爲0,0,0,0
  5. 結合符對選擇器特殊性沒有一點貢獻
  6. 內聯聲明的特殊性都是1,0,0,0
  7. 繼承沒有特殊性
- 特殊性 1,0,0,0 大於全部以0開頭的特殊性(不進位)
- 選擇器的特殊性最終都會授予給其對應的聲明
- 若是多個規則與同一個元素匹配，並且有些聲明互相沖突時，特殊性越大的越佔優點
- 注意：id選擇器和屬性選擇器 div[id="test"]（0,0,1,1）和 #test（0,1,0,0）
- 重要聲明
  - 有時某個聲明比較重要，超過了全部其餘聲明，css2.1就稱之爲重要聲明，並容許在這些聲明的結束分號以前插入 !important 來標誌必需要準確的放置 !important 不然聲明無效。
  - !important 老是要放在聲明的最後，即分號的前面
  - 標誌爲 !important的聲明並無特殊的特殊性值，不過要與非重要聲明分開考慮。
  - 實際上全部的重要聲明會被瀏覽器分爲一組，重要聲明的衝突會在其內部解決
  - 非重要聲明也會被分爲一組，非重要聲明的衝突也會在其內部解決
  - 若是一個重要聲明與非重要聲明衝突，勝出的老是重要聲明
- 繼承
  - 繼承沒有特殊性，甚至連0特殊性都沒有
  - 0特殊性要比無特殊性來的強
- 來源
  - css樣式的來源大體有三種
    - 創做人員
    - 讀者
    - 用戶代理
- 權重：
  - 讀者的重要聲明
  - 創做人員的重要聲明
  - 創做人員的正常聲明
  - 讀者的正常聲明
  - 用戶代理的聲明
- 層疊
  1. 找出全部相關的規則，這些規則都包含一個選擇器
  2. 計算聲明的優先級
    - 先按來源排序
    - 在按選擇器的特殊性排序
    - 最終按順序

css中字體，背景相關知識點

自定義字體@font-face容許網頁開發者爲其網頁指定在線字體，經過這種做者自備字體的方式，@font-face能夠消除對用戶電腦字體的依賴。
font-family所指定的字體名字將會被用於font或font-family屬性，src：字體資源。注意：不能在一個css選擇器中定義@font-face，要在style中定義。
自定義字體圖標步驟：
- 首先準備一個矢量圖
- 將矢量圖和不同的字符一一綁定
- 經過工具或網站將矢量圖和字符綁定起來的東西生成一套自定義字體
- 最終把這套字體去放到頁面中去引用。
使用字體圖標的時候，直接把要使用的元素的名字起成已經定義好的名字便可，前提是先把定義好的css樣式表引入到要操做的頁面中。若是想要改變字體圖標的樣式，最好在class中再起一個名字，而後去寫這個名字的樣式，而不要直接修改已定義好的名字的樣式。
opacity不是一個繼承屬性，可是也會影響到子元素的透明度。
背景透明文字不透明，能夠將背景設置爲rgba的格式。
文字陰影 text-shadow用來爲文字添加陰影，並且能夠添加多層，陰影值之間用逗號隔開。（多個陰影時，第一個陰影在最上邊）值：color``（選擇陰影的顏色），offset-x,offset-y（橫向，縱向偏移量）,blur-radius（陰影模糊）
浮雕文字：
- 文字顏色爲白色，
- text-shadow：black 1px 1px 1px;
文字模糊效果：
- 文字顏色爲黑色，
- transition：1s；
- 給文字添加一個:hover僞類，
- color：rgba（0,0,0,0）；
- text-shadow：black 0 0 100px；
模糊背景：
1. 父元素div包含一個子元素div，給父元素設置高寬。
2. 讓子元素和父元素的高寬相同，父元素的position：relative；子元素的position：absolute；left，top，bottom，right都爲0；讓子元素的層級z-index：-1；
3. 給子標籤添加背景圖片，爲了圖片能夠適應高寬，background-size：100% 100%；4.讓子標籤模糊，filter：blur（xx px）；
文字描邊 -webkit-text-stroke: 顏色，邊的大小。
文字排版：direction：控制文字的方向，必定要配合unicode-bidi:bidi-override;

漸變相關知識

線性漸變(圖片類型)：爲了建立一個線性漸變，須要設置一個起始點和一個方向（指定爲一個角度）。還要定義終止色。終止色就是你想讓瀏覽器去平滑的過滾過去，而且必須指定至少兩種，固然也會能夠指定更多的顏色去建立更復雜的漸變效果。默認從上到下發生漸變
- 語法：linear-gradient（顏色，顏色，...）
- 改變漸變方向（top\buttom\left\right）：linear-gradient（to 結束的方向，顏色，顏色）
- 改變漸變角度：linear-gradient（角度，顏色，顏色）
- 顏色節點的分佈（第一個不寫爲0%，最後一個不寫爲100%）:linear-gradient（顏色長度或者百分比，顏色長度或者百分比);
- 垂直漸變：repeating-linear-gradient
radial-gradient（）函數建立一個<image>,用來展現由原點（漸變中心）輻射開的顏色漸變。
- 默認均勻分佈radial-gradient（顏色，顏色）。
- 不均勻分佈 radial-gradient（顏色百分比，顏色百分比，...）。
- 改變漸變的形狀radial-gradient（形狀，顏色，顏色）（默認是橢圓ellipse，可選值circle）。
- 改變漸變形狀的大小radial-gradient（要改變的大小形狀，顏色，顏色）``closest-side最近邊，farthest-side最遠邊，closest-comer最近角，farthest-comer最遠角。
改變圓心 radial-gradient（要改變的大小形狀 at px px，顏色，顏色）默認值最遠角。

css動畫

css transition提供了一種在更改css屬性時控制動畫速度的方法。其可讓屬性變化成爲一個持續一段時間的過程，而不是當即生效的。
transition-property默認值爲all，表示全部可被動畫的屬性都表現出過渡動畫。能夠指定多個property。
- 屬性值：
  - none沒有過分動畫。
  - all全部可被動畫的屬性都表現出過渡動畫。
  - IDENT屬性名稱（能夠指定多個）
transition-duration屬性以秒或毫秒爲單位指定過渡動畫所需的時間。默認值爲0s，表示不出現過渡動畫。能夠指定多個時長，每一個時長都會被應用到由transition-prorerty指定的對應屬性上。若是指定的時長個數小於屬性個數，那麼時長列表會重複，若是時長列表更長，那麼該列表會被裁減，兩種狀況下，屬性列表都保持不變。屬性值，以毫秒或秒爲單位的數值。不接受負值，必定要加單位！
css屬性受到transition的影響，會產生不斷變化的中間值，而css transition-timing-function屬性用來描述這個中間值是怎樣計算的，實質上，經過這個函數會創建一條加速度曲線，所以在整個transition變化過程當中，變化速度能夠不斷改變。默認值：ease
- 能夠規定多個timing function，經過使用transition-property屬性，能夠根據主列表的列表給每一個css屬性應用相應的timing function
  - 若是timing function的個數比主列中數量少，缺乏的值被設置爲初始值。
  - 若是timing function比主列更多，timing function函數列表會被截斷至適合的大小，這兩種狀況下聲明的css屬性都是有效的。
- 屬性值：
  - ease默認值，（加速而後減速）
  - linear（勻速）
  - ease-in（加速）
  - ease-out（減速）
  - ease-in-out（加速而後減速）
  - cubic-bezier:貝塞爾曲線。
  - step-start：等同於steps（1，start）
  - step-end：等同於steps（1，end）。
  - steps（步數，每一步的值發生變化的時間點默認是end）
transition-delay屬性規定了在過渡效果開始做用以前須要等待的時間。默認值0s。
- 能夠指定多個延遲時間，每一個延遲將會分別做用於所指定的相符合的css屬性
  - 若是指定的時長個數小於屬性個數，那麼時長列表會重複，
  - 若是時長列表更長，那麼該列表會被裁減。
  - 兩種狀況下，屬性列表都保持不變。
- 屬性值值以秒或毫秒爲單位，代表動畫過分效果將在什麼時候開始，取值爲正時會延遲一段時間來響應過渡效果，取值爲負時會致使過渡當即開始。
當屬性值的列表長度不一致時
- 超出的狀況下是會被所有裁減的
- 不夠的時候，
  - 關於時間的會重複列表，
  - transition-timing-function的時候使用的是默認值ease。
檢測過渡是否完成，當過渡完成時觸發一個事件，在符合標準的瀏覽器下，這個事件是transitionend，在webkit下是webkitTransitionEnd。（每個擁有過渡的屬性在其完成過渡時都會觸發一次transitionend事件）在transition完成前設置display：none，事件一樣不會被觸發。
transition在元素首次渲染尚未結束的狀況下是不會被觸發的。
transition簡寫屬性，css過渡由簡寫屬性transition定義是最好的方式，能夠避免屬性值列表長度不一，節省調試時間。注意：在transition屬性中，各個值的書寫順序是很重要的：
- 第一個能夠解析爲時間的值會被賦值給transition-duration，
- 第二個能夠解析爲時間的值會被賦值給transition-delay。
transform屬性容許修改css視覺格式模型的座標空間。transform屬性只對block級元素生效。
- 可選值：
  - rotate（旋轉角度）
  - translate（平移）
    - x方向平移：transform：translateX（距離）；
    - y方向平移：transform：translateY（距離）；
  - 二維平移transform：translate（距離，距離）若是距離沒有指定，它的默認值爲0.可設單值，也可設雙值。正數表示xy軸正向位移，負數爲反向位移，設單值表示只x軸位移，y軸座標不變。
transform：skew，與translate差很少。
- 正值，拉正斜槓方向的兩個角。
- 負值：拉反斜槓方向的兩個角。
transform：scale（）
- 要縮小設0.01-0.99之間的值，
- 要放大設超過1的值。
- 正值：縮放的程度。
- 負值：不推薦使用（有旋轉效果）
基點的變換transform-origin, css屬性能夠更改一個元素變形的基點。對平移不會產生影響。
矩陣（matrix）：
- 旋轉matrix（cos θ，sinθ，-sinθ，cosθ，0,0）;
- 平移matrix（1,0,0,1，x,y）;
- 傾斜matrix（1,tanα,tanβ,1,0,0）;
變換組合的順序不同結果也會不同，由於底層的原理是經過矩陣進行變換，矩陣的運算是不可逆的，不知足交換律。變換組合時計算方向是從右往左計算的。
在絕大部分變換樣式切換時，若是變換函數的位置個數不相同也不會觸發過渡。
過渡只關係元素的初始狀態和結束狀態，沒有方法能夠獲取元素在過渡中每一幀的狀態。
景深是指相機焦點先後相對清晰的成像範圍。
- 簡單理解就是咱們的肉眼距離顯示器的距離，景深越大，元素離咱們越遠，效果就很差
- 在css3中，perspective用於激活一個3D空間，屬性值就是景深大小。（默認none無景深）
- 應用景深的元素稱爲「舞臺元素」，舞臺元素的全部後代元素都會受影響。（若是後代元素中也添加了perspective屬性，效果會疊加而不是覆蓋）
- transform：perspective（depth） depth的默認值是none，能夠設置爲一個長度值，這個長度是沿着z軸距離座標原點的距離。
- 1000px被認爲是一個正常值，若使用perspective（）函數，那麼它必須被放置在transform屬性的首位，若是放在其餘函數以後，則會被忽略。
通常來講寫3d樣式的元素要有一個包裹的元素稱爲「舞臺」，景深要加在舞臺上。
rotate3d（x,y,z,angle）x,y,z分別接受一個數值，用來計算矢量方向，矢量方向是三維空間中的一條線，從座標系原點到x,y,z肯定的那個點，元素圍繞這條線旋轉angle指定的值。
3D平移transform：translateZ（length）是3D Transform特有的，它不能使百分比值；那樣的移動是沒有意義的。transform：translate3d（translateX,translateY,translateZ）；
3D縮放transform：scaleZ(),transform：scale3d（scaleX,scaleY，scaleZ）;若是隻設置scaleZ（），元素並無被擴大或者壓縮，scaleZ（）須要和translateZ（）配合使用，number乘以length獲得的值，使元素沿z軸移動的距離，從而使得感受被擴大或壓縮。
景深：讓3D場景有近大遠小的效果（咱們肉眼距離屏幕的距離），是一個不可繼承屬性，但他能夠做用於後代元素（不是做用於自己的）
景深的原理：景深越大，滅點越遠，元素變形更小；景深越小，滅點越近，元素變形更大。
景深基點：用來控制基點的位置。perspective-origin默認值50%,50%參照於盒模型。
transform-style 營造層級的3d舞臺。是一個不可繼承屬性，它做用於子元素。
景深疊加，儘可能避免景深疊加問題。
backface-visibility屬性用來設置是否顯示元素的背面，默認是顯示的。有兩個值hidden和visible，默認值是visible。

動畫內的屬性

animation-name屬性指定應用的一系列動畫，每一個名稱表明一個動畫序列。值：none（特殊關鍵字，表示無關鍵幀）。keyframename標識動畫的字符串。
animation-duration指定一個動畫週期的時長。默認值爲0s，表示無動畫，值無單位無效，注意，負值無效。
animation-timing-function動畫的默認效果，由慢變快再變慢。
animation-direction定義了動畫執行的方向。（一共有四個方向）值：reverse（反轉）反轉的也是關鍵幀和animation-timing-function

動畫外的屬性

animation-delay定義動畫開始前等待的時間，以秒或毫秒爲單位。

只做用於動畫內的屬性

animation-iteration-count定義了動畫執行的次數（屬於動畫內的範疇）重複的是關鍵幀

元素在動畫外的狀態

animation-fill-mode，值backwards：from以前的狀態與form的狀態保持一致。forwards，通以後的狀態與to的狀態保持一致。both：backwards+forwards
animation-timing-function：做用於一個關鍵幀週期而非整個動畫週期
animation-play-state定義了動畫執行的運行和暫停。
關鍵幀語法： @keyframes animiationName{ keyframes-selector{ css-style } } animiationName必寫項，定義動畫的名稱。keyframes-selector：必寫項，動畫持續時間的百分比。from：0% to ：100% css-style：css聲明
關鍵幀控制的是動畫的週期，animation-timing-function控制的是關鍵幀的每一個週期。
一個元素分兩面，但並不意味元素有厚度。在一個狀態下，元素只能展示本身的一面

css3中的彈性盒子

css3中的彈性盒子分老版本（box）和新版本（flex），
flex不等同於浮動，同時老版本的flex和新版本的flex是有區別的
分清flex的容器和項目，項目永遠在主軸的正方向上排列
容器的佈局方向
- 老版本（box）-webkit-box-orient屬性本質上肯定了主軸是哪個，值:horizontal（x軸），vertical（y軸）
- 新版本（flex）flex-direction屬性本質上肯定了主軸和側軸分別是哪個，值row（x軸），column（y軸）
容器的排列方向
- 老版本（box）-webkit-box-direction 控制主軸方向，值normal（正方向，默認），reverse（取反）
- 新版本（flex）flex-direction，值row-reverse（x軸取反），column-reverse（y軸取反）
富裕空間管理（主軸）
- 老版本（box）
  - start（富裕空間在右邊（x軸），下邊（y軸）） end（富裕空間在左邊（x軸），上邊（y軸）） center（富裕空間在兩邊） justify（富裕空間在項目之間）四個值
  - -webkit-box-pack不會給項目區分配空間，只是肯定富裕空間的位置。
- 新版本（flex）
  - justify-content:flex-start（富裕空間在主軸的正方向）,flex-end（富裕空間在主軸的反方向）,center（富裕空間在兩邊）,space-between（富裕空間在項目之間）,space-around(box沒有的，富裕空間在項目兩邊)
富裕空間管理（側軸）
- 老版本（box）
  - start （富裕空間在上邊) end（富裕空間在下邊） center（富裕空間在兩邊），-webkit-box-align不會給項目區分配空間，只是肯定富裕空間的位置
- 新版本（flex）
  - align-items，值stretch(box沒有的，等高佈局，不能有高度）,flex-start（富裕空間在側軸的正方向）,flex-end（富裕空間在側軸的反方向）,center（富裕空間在側軸的兩邊）,baseline(box沒有的，按基線對齊)，
彈性空間的管理：將主軸上的富裕空間按比例分配到各個項目的width/height上。-webkit-box-flex:1; 默認值：0不可繼承。
控制側軸的方向：flex-wrap屬性控制了容器爲單行/列仍是多行/列，而且定義了側軸的方向，新行/列將沿側軸方向堆砌。值：nowrap(不換行)，wrap-reverse（換行）
控制多行多列時，富裕空間的管理，會把全部行，列當作一個總體。align-content屬性定義彈性容器的側軸方向上有額外空間時，如何排佈局每一行/列，當彈性容器只有一行/列時無做用。默認值stretch不可繼承。
flex-basis：伸縮規則計算的基準值（默認拿width或height的值）
order屬性規定了彈性容器中的可伸縮項目在佈局時的順序，元素按照order屬性的值的增序進行佈局。擁有相同order屬性值的元素按照他們在源代碼中出現的順序進行佈局。
align-self會對其當前flex行中的flex元素，並覆蓋align-items的值，若是任何flex元素的側軸方向margin值設置爲auto，則會忽略align-self。默認值auto，不可繼承。
老版本-webkit-box-flex:彈性因子（默認值爲0）
新版本flex-grow屬性定義彈性盒子項（flex item）的拉伸因子。
可用空間=（容器大小-全部相鄰項目flex-basis的總和）
可擴展空間=（可用空間/全部相鄰項目flex-grow的總和）
每項伸縮大小=（伸縮基準值+（可擴展空間*flex-grow值））
flex-shrink起做用的前提是flex-wrap：nowrap；``flex-shrink的默認值是1.（收縮因子）
flex-shrink：每項flex收縮大小=伸展基準值-(收縮比例/收縮比例總和*溢出的空間) -->並非
- 1.計算收縮因子與基準值乘的總和 var a= 每一項flex-shrink*flex-basis之和
- 2.計算收縮因數，收縮因數=（項目的收縮因子*項目基準值）/第一步計算總和 var b =(flex-shrink*flex-basis)/a
- 3.移出空間的計算移出空間=項目收縮因數*負溢出的空間 var c = b*溢出的空間
側軸富裕空間的管理
- 單行單列
  - align-items，align-self（優先級高）
- 多行多列
  - align-content
flex簡寫屬性是一個語法糖，flex：1；表示flex-grow：1；flex-shrink：1；flex-basis：0%；

響應式佈局核心

CSS3媒體查詢選擇器,語法： @media 媒體類型 and(關鍵字) 帶條件的媒體屬性 and 帶條件的媒體屬性 { //規則 }
媒體類型
- all 全部媒體（默認值）
- screen 彩色屏幕
- print 打印預覽
- projection 手持設備
- tv 電視
- braille 盲文觸覺設備
- embossed 盲文打印機
- speech 「聽覺」相似的媒體設備
- tty 不適用像素的設備
媒體屬性
- width：瀏覽器的窗口尺寸
- device-width：設備尺寸
- device-pixel-ratio（必須加-webkit-前綴）：像素比
---以上三個媒體屬性可加 min 和 max 前綴
- min：最小值爲誰
- max：最大值爲誰
橫豎屏切換
- orientation：landscape（橫屏）
- orientation：portrait （豎屏）
關鍵字
- only：處理瀏覽器兼容問題，防止老舊的瀏覽器，不支持帶媒體屬性的查詢而應用到給定的樣式。（讓老版本的瀏覽器失效）
- @media only screen and (min-width:800px ){ 規則；規則 }
- @media screen and (min-width:800px ){ 規則；規則 }
- 在老款的瀏覽器下
  - @media only ---> 由於沒有only這種設備規則被忽略
  - @media screen ---> 由於有screen這種設備並且老瀏覽器會忽略帶媒體屬性的查詢
建議在每次抒寫media query的時候帶上only
- and：鏈接一條查詢規則，鏈接媒體屬性、鏈接媒體類型
  - 對於全部的鏈接選項都要匹配成功才能應用規則
- ,：鏈接多條查詢規則，和and類似
  - 對於全部的鏈接選項只要匹配成功一個就能應用規則
- not：取反

多列布局（分欄佈局）

欄目寬度：column-width指定每一欄的寬度（這是多列布局的第一種分法）
欄目列數：column-count指定要多少欄（這是多列布局的第二種分法）
欄目距離：column-gap
欄目分割線：column-rule