定位(position)
如果，說浮動， 關鍵在一個 “浮” 字上面， 那麼 我們的定位，關鍵在於一個 “位” 上。
元素的定位屬性
元素的定位屬性主要包括定位模式和邊偏移兩部分。
1、邊偏移
| 邊偏移屬性 | 描述 |
|---|---|
| top | 頂端偏移量，定義元素相對於其父元素上邊線的距離 |
| bottom | 底部偏移量，定義元素相對於其父元素下邊線的距離 |
| left | 左側偏移量，定義元素相對於其父元素左邊線的距離 |
| right | 右側偏移量，定義元素相對於其父元素右邊線的距離 |
也就說，以後定位要和這邊偏移搭配使用了， 比如 top: 100px; left: 30px; 等等
2、定位模式
在CSS中，position屬性用於定義元素的定位模式，其基本語法格式如下：
選擇器{position:屬性值;}
position屬性的常用值
| 值 | 描述 |
|---|---|
| static | 自動定位（默認定位方式） |
| relative | 相對定位，相對於其原文檔流的位置進行定位 |
| absolute | 絕對定位，相對於其上一個已經定位的父元素進行定位 |
| fixed | 固定定位，相對於瀏覽器窗口進行定位 |
靜態定位(static)
靜態定位是所有元素的默認定位方式，當position屬性的取值爲static時，可以將元素定位於靜態位置。 所謂靜態位置就是各個元素在HTML文檔流中默認的位置。
網頁中所有元素都默認的是靜態定位哦！ 其實就是標準流的特性。
在靜態定位狀態下，無法通過邊偏移屬性（top、bottom、left或right）來改變元素的位置。
一般用來 清除定位 一個原來有定位的盒子 不想加定位了可以寫這句話
相對定位relative(自戀型)
相對定位是將元素相對於它在標準流中的位置進行定位，當position屬性的取值爲relative時，可以將元素定位於相對位置。
對元素設置相對定位後，可以通過邊偏移屬性改變元素的位置，但是它在文檔流中的位置仍然保留。如下圖所示，即是一個相對定位的效果展示：
注意：
1.相對定位最重要的一點是，它可以通過邊偏移移動位置，但是原來的所佔的位置，繼續佔有
2.其次，每次移動的位置，是以自己的左上角爲基準(相當於自己來移動位置)
就是說，相對定位的盒子仍在標準流中，它後面的盒子仍以標準流方式對待它（相對定位不脫標）。
絕對定位absolute
注意：
如果文檔可滾動，絕對定位元素會隨着它滾動，因爲元素最終會相對於正常流的某一部分定位。
當position屬性的取值爲absolute時，可以將元素的定位模式設置爲絕對定位。
注意： 絕對定位最重要的一點是，它可以通過邊偏移移動位置，但是它完全脫標，完全不佔位置。
父級沒有定位
若所有父元素都沒有定位，以瀏覽器爲準對齊(document文檔)。
父級有定位
絕對定位是將元素依據最近的已經定位（絕對、固定或相對定位）的父元素（祖先）進行定位。
絕對定位的盒子沒有邊偏移
如果只是給盒子指定了 定位，但是沒有給與邊偏移，則改盒子以標準流來顯示排序，和上一個盒子的底邊對齊，但是不佔有位置。
子絕父相
這句話的意思是 子級是絕對定位的話， 父級要用相對定位。
首先， 我們說下， 絕對定位是將元素依據最近的已經定位絕對、固定或相對定位）的父元素（祖先）進行定位。
就是說， 子級是絕對定位，父親只要是定位即可（不管父親是絕對定位還是相對定位，甚至是固定定位都可以），就是說， 子絕父絕，子絕父相都是正確的。
因爲子級是絕對定位，不會佔有位置， 可以放到父盒子裏面的任何一個地方。
父盒子佈局時，需要佔有位置，因此父親只能是 相對定位.
這就是子絕父相的由來。
固定定位fixed
固定定位是絕對定位的一種特殊形式，它以瀏覽器窗口作爲參照物來定義網頁元素。當position屬性的取值爲fixed時，即可將元素的定位模式設置爲固定定位。
當對元素設置固定定位後，它將脫離標準文檔流的控制，始終依據瀏覽器窗口來定義自己的顯示位置。不管瀏覽器滾動條如何滾動也不管瀏覽器窗口的大小如何變化，該元素都會始終顯示在瀏覽器窗口的固定位置。
固定定位有兩點：
- 固定定位的元素跟父親沒有任何關係，只認瀏覽器。
- 固定定位完全脫標，不佔有位置，不隨着滾動條滾動。
ie6等低版本瀏覽器不支持固定定位
疊放次序（z-index）
當對多個元素同時設置定位時，定位元素之間有可能會發生重疊。
在CSS中，要想調整重疊定位元素的堆疊順序，可以對定位元素應用z-index層疊等級屬性，其取值可爲正整數、負整數和0。
比如： z-index: 2;
注意：
- z-index的默認屬性值是0，取值越大，定位元素在層疊元素中越居上。
- 如果取值相同，則根據書寫順序，後來居上。
- 後面數字一定不能加單位。
- 只有相對定位，絕對定位，固定定位有此屬性，其餘標準流，浮動，靜態定位都無此屬性，亦不可指定此屬性。
四種定位總結
| 定位模式 | 是否脫標占有位置 | 是否可以使用邊偏移 | 移動位置基準 |
|---|---|---|---|
| 靜態static | 不脫標，正常模式 | 不可以 | 正常模式 |
| 相對定位relative | 不脫標，佔有位置 | 可以 | 相對自身位置移動 |
| 絕對定位absolute | 完全脫標，不佔有位置 | 可以 | 相對於定位父級移動位置 |
| 固定定位fixed | 完全脫標，不佔有位置 | 可以 | 相對於瀏覽器移動位置 |
定位模式轉換
跟 浮動一樣， 元素添加了 絕對定位和固定定位之後， 元素模式也會發生轉換， 都轉換爲 行內塊模式， 因此 比如 行內元素 如果添加了 絕對定位或者 固定定位後，可以不用轉換模式，直接給高度和寬度就可以了。
<style type="text/css">
div {
height: 100px;
background-color: #0000FF;
float: left; 沒給盒子寬度 浮動的盒子有模式轉換的情況 轉化爲行內塊 寬度爲內容的寬度
position: fixed; 元素添加了 絕對定位和固定定位之後 元素模式也轉化 都轉化爲行內塊模式
}
span {
background-color: #FF0000;
display: block;
width: 100px;
height: 100px;
float: left; 如果盒子本身就需要添加浮動 或者 絕對定位 固定定位 就不需要使用display 轉換
position: absolute;
}
</style>
元素的顯示與隱藏
在CSS中有三個顯示和隱藏的單詞比較常見，我們要區分開，他們分別是 display visibility 和 overflow。
他們的主要目的是讓一個元素在頁面中消失，但是不在文檔源碼中刪除。 最常見的是網站廣告，當我們點擊類似關閉不見了，但是我們重新刷新頁面，它們又會出現
display 顯示
display 設置或檢索對象是否及如何顯示。
display : none 隱藏對象 與它相反的是 display:block 除了轉換爲塊級元素之外，同時還有顯示元素的意思。
特點： 隱藏之後，不再保留位置。
<style type="text/css">
div {
width: 100px;
height: 100px;
background-color: pink;
}
div:first-child {
display: none;
}
div:hover {
display: none; /*隱藏元素 不是刪除 看不見 但是元素一直存在頁面中*/
}
div:last-child {
background-color: purple;
}
</style>
visibility 可見性
設置或檢索是否顯示對象。
visible : 對象可視
hidden : 對象隱藏
特點： 隱藏之後，繼續保留原有位置。
overflow 溢出
檢索或設置當對象的內容超過其指定高度及寬度時如何管理內容。
visible : 不剪切內容也不添加滾動條。
auto : 超出自動顯示滾動條，不超出不顯示滾動條
hidden : 不顯示超過對象尺寸的內容，超出的部分隱藏掉
scroll : 不管超出內容否，總是顯示滾動條
鼠標經過時顯示而圖片
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div {
width: 100px;
height: 100px;
background-color: pink;
margin: 50px auto;
position: relative;
}
img {
display: none;
position: absolute;
top: 0;
left: 100px;
}
div:hover img{
display: block;
}
</style>
overflow 溢出
檢索或設置當對象的內容超過其指定高度及寬度時如何管理內容。
visible : 不剪切內容也不添加滾動條。
auto : 超出自動顯示滾動條，不超出不顯示滾動條
hidden : 不顯示超過對象尺寸的內容，超出的部分隱藏掉
scroll : 不管超出內容否，總是顯示滾動條
CSS高級技巧
CSS用戶界面樣式
所謂的界面樣式， 就是更改一些用戶操作樣式， 比如 更改用戶的鼠標樣式， 表單輪廓等。但是比如滾動條的樣式改動受到了很多瀏覽器的抵制，因此我們就放棄了。 防止表單域拖拽
鼠標樣式cursor
設置或檢索在對象上移動的鼠標指針採用何種系統預定義的光標形狀。
cursor : default 小白 | pointer 小手 | move 移動 | text 文本
鼠標放我身上查看效果哦：
<ul>
<li style="cursor:default">我是小白</li>
<li style="cursor:pointer">我是小手</li>
<li style="cursor:move">我是移動</li>
<li style="cursor:text">我是文本</li>
</ul>
儘量不要用hand 因爲 火狐不支持 pointer ie6以上都支持的儘量用
輪廓 outline
是繪製於元素周圍的一條線，位於邊框邊緣的外圍，可起到突出元素的作用。
outline : outline-color ||outline-style || outline-width
但是我們都不關心可以設置多少，我們平時都是去掉的。
最直接的寫法是 ： outline: 0;
<input type="text" style="outline: 0;"/>
防止拖拽文本域resize
resize：none 這個單詞可以防止 火狐 谷歌等瀏覽器隨意的拖動 文本域。
右下角可以拖拽：
右下角不可以拖拽：
<textarea style="resize: none;"></textarea>
vertical-align 垂直對齊
讓帶有寬度的塊級元素居中對齊，是margin: 0 auto;
讓文字居中對齊，是 text-align: center;
讓文字處於中間，是 line-hight 等於行高
vertical-align不影響塊級元素中的內容對齊 它只針對於 行內元素或者行內塊元素 特別是行內塊元素 通常用來控制圖片和表單與文字對齊
vertical-align : baseline |top |middle |bottom
設置或檢索對象內容的垂直對其方式。
vertical-align 不影響塊級元素中的內容對齊，它只針對於 行內元素或者行內塊元素，特別是行內塊元素， 通常用來控制圖片和表單等。
去除圖片底側空白縫隙
有個很重要特性你要記住： 如果一個元素沒有基線，比如圖片或者表單等行內塊元素，則他的底線會和父級盒子的基線對齊。 這樣會造成一個問題，就是圖片底側會有一個空白縫隙
解決的方法就是：
- 給img vertical-align:middle | top等等。 讓圖片不要和基線對齊。
![在這裏插入圖片描述]()
- 給img 添加 display：block; 轉換爲塊級元素就不會存在問題了
![在這裏插入圖片描述]()
溢出的文字隱藏
word-break:自動換行
normal 使用瀏覽器默認的換行規則。
break-all 允許在單詞內換行。
keep-all 只能在半角空格或連字符處換行。
white-space
white-space 設置或檢索對象內文本顯示方式。通常我們使用於強制一行顯示內容
normal 默認處理方式
nowrap 強制在同一行內顯示所有文本，直到文本結束或者遭遇br標籤對象才換行
text-overflow 文字溢出
text-overflow : clip | ellipsis
設置或檢索是否使用一個省略標記（…）標示對象內文本的溢出
需要先使用 white-space 強制一行顯示 在使用 overflow：hidden
clip : 不顯示省略標記（…），而是簡單的裁切
ellipsis : 當對象內文本溢出時顯示省略標記（…）
CSS精靈技術（sprite）
精靈技術產生的背景
圖所示爲網頁的請求原理圖，當用戶訪問一個網站時，需要向服務器發送請求，網頁上的每張圖像都要經過一次請求才能展現給用戶。
然而，一個網頁中往往會應用很多小的背景圖像作爲修飾，當網頁中的圖像過多時，服務器就會頻繁地接受和發送請求，這將大大降低頁面的加載速度。爲了有效地減少服務器接受和發送請求的次數，提高頁面的加載速度，出現了CSS精靈技術
精靈技術本質
簡單地說，CSS精靈是一種處理網頁背景圖像的方式。它將一個頁面涉及到的所有零星背景圖像都集中到一張大圖中去，然後將大圖應用於網頁，這樣，當用戶訪問該頁面時，只需向服務發送一次請求，網頁中的背景圖像即可全部展示出來。通常情況下，這個由很多小的背景圖像合成的大圖被稱爲精靈圖
精靈技術的使用
CSS 精靈其實是將網頁中的一些背景圖像整合到一張大圖中（精靈圖），然而，各個網頁元素通常只需要精靈圖中不同位置的某個小圖，要想精確定位到精靈圖中的某個小圖，就需要使用CSS的background-image、background-repeat和background-position屬性進行背景定位，其中最關鍵的是使用background-position屬性精確地定位。
製作精靈圖
CSS 精靈其實是將網頁中的一些背景圖像整合到一張大圖中（精靈圖），那我們要做的，就是把小圖拼合成一張大圖。
我們精靈圖上放的都是小的裝飾性質的背景圖片。 插入圖片不能往上放。
我們精靈圖的寬度取決於最寬的那個背景。
我們可以橫向擺放也可以縱向擺放，但是每個圖片之間，間隔至少隔開偶數像素合適。
在我們精靈圖的最低端，留一片空隙，方便我們以後添加其他精靈圖。
簡單的頁面，背景圖片很少的情況，沒有必要使用精靈技術，維護成本太高。 如果是背景圖片比較多，可以建議使用精靈技術。
字體圖標
圖片是有諸多優點的，但是缺點很明顯，比如圖片不但增加了總文件的大小，還增加了很多額外的"http請求"，這都會大大降低網頁的性能的。更重要的是圖片不能很好的進行“縮放”，因爲圖片放大和縮小會失真。
字體圖標優點
可以做出跟圖片一樣可以做的事情,改變透明度、旋轉度，等..
但是本質其實是文字，可以很隨意的改變顏色、產生陰影、透明效果等等...
本身體積更小，但攜帶的信息並沒有削減。
幾乎支持所有的瀏覽器
字體圖標使用流程
總體來說，字體圖標按照如下流程：
上傳生成字體包
當UI設計人員給我們svg文件的時候，我們需要轉換成我們頁面能使用的字體文件， 而且需要生成的是兼容性的適合各個瀏覽器的。
推薦網站： http://icomoon.io
icomoon字庫
IcoMoon成立於2011年，推出的第一個自定義圖標字體生成器，它允許用戶選擇他們所需要的圖標，使它們成一字型。 內容種類繁多，非常全面，唯一的遺憾是國外服務器，打開網速較慢。
推薦網站： http://www.iconfont.cn/
阿里icon font字庫
這個是阿里媽媽M2UX的一個icon font字體圖標字庫，包含了淘寶圖標庫和阿里媽媽圖標庫。可以使用AI製作圖標上傳生成。 一個字，免費，免費！！
fontello
在線定製你自己的icon font字體圖標字庫，也可以直接從GitHub下載整個圖標集，該項目也是開源的。
Font-Awesome
http://fortawesome.github.io/Font-Awesome/
這是我最喜歡的字庫之一了，更新比較快。目前已經有369個圖標了。
Glyphicon Halflings
這個字體圖標可以在Bootstrap下免費使用。自帶了200多個圖標。
Icons8
提供PNG免費下載，像素大能到500PX
下載兼容字體包
剛纔上傳完畢， 網站會給我們把UI做的svg圖片轉換爲我們的字體格式， 然後下載下來就好了
當然，我們不需要自己專門的圖標，是想網上找幾個圖標使用，以上2步可以直接省略了， 直接到剛纔的網站上找喜歡的下載使用吧。
字體引入到HTML
最後一步，是最重要的一步了， 就是字體文件已經有了，我們需要引入到我們頁面中。
- 首先把 以下4個文件放入到 fonts文件夾裏面。 通俗的做法
第一步：引入項目下面生成的fontclass代碼：
<link rel="stylesheet" type="text/CSS" href="./iconfont.CSS">
第二步：挑選相應圖標並獲取類名，應用於頁面：
<i class="iconfont icon-xxx"></i>
https://segmentfault.com/a/1190000016235900 阿里字庫引入的參考方法
icomoon.io 圖標網站的使用方法
第一步: 在樣式裏聲明字體
@font-face { /* 電腦中沒有的字體，我們需要聲明 */
font-family: 'icomoon';
src: url('fonts/icomoon.eot?7kkyc2');
src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
url('fonts/icomoon.woff?7kkyc2') format('woff'),
url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
第二步：給盒子使用字體
span{
font-family: "icomoon";
}
第三步：盒子裏添加結構
span:before {
content："\e900"
}
或者
<span></span>
滑動門
滑動門出現的背景
爲了使各種特殊形狀的背景能夠自適應元素中文本內容的多少，出現了CSS滑動門技術。它從新的角度構建頁面，使各種特殊形狀的背景能夠自由拉伸滑動，以適應元素內部的文本內容，可用性更強。 最常見於各種導航欄的滑動門。
一般的經典佈局都是這樣的：
<li>
<a href="#">
<span>導航欄內容</span>
</a>
</li>
總結：
- a 設置 背景左側，padding撐開合適寬度。
- span 設置背景右側， padding撐開合適寬度 剩下由文字繼續撐開寬度。
- 之所以a包含span就是因爲 整個導航都是可以點擊的。
before和after僞元素
之所以被稱爲僞元素，是因爲他們不是真正的頁面元素，html沒有對應的元素，但是其所有用法和表現行爲與真正的頁面元素一樣，可以對其使用諸如頁面元素一樣的css樣式，表面上看上去貌似是頁面的某些元素來展現，實際上是css樣式展現的行爲，因此被稱爲僞元素。是僞元素在html代碼機構中的展現，可以看出無法僞元素的結構無法審查
僞元素選擇器 本質是 插入了一個元素（標籤 盒子）
注意
1.僞元素：before和after添加的內容默認是inline元素：這兩個爲元素的content屬性，表示僞元素的內容，設置：before和after時必須設置其content屬性，否則僞元素就不起作用
2.僞元素是不佔位置的
過渡
過渡(transition)是css3中具有顛覆性的特徵之一，我們可以在不使用Flash動畫或者JavaScript的情況下，當元素從一種樣式變換爲另一種樣式的時爲元素添加效果
在css3裏使用transition可以實現補間動畫(過渡效果)，並且當前元素只要有“屬性”發生變化即存在兩種狀態(我們用A和B代指)，就可以實現平滑的過渡，爲了方便演示採用hover切換兩種狀態，但是並不僅僅侷限於hover狀態來實現過渡
語法格式：
transition： 要過度的屬性 花費時間 運動曲線 何時開始；
如果有多組屬性變化，還是用逗號隔開。
| 屬性 | 描述 | css |
|---|---|---|
| transition | 簡寫屬性，用於在一個屬性中設置四個過渡屬性 | 3 |
| transition-property | 規定應用過渡的css屬性名稱 | 3 |
| transition-duration | 定義過渡效果花費的時間。默認是0 | 3 |
| transition-timing-function | 規定過渡效果的時間去線。默認是ease | 3 |
| transition-delay | 規定過渡效果何時開始。默認是0 | 3 |
transition-duration ：花費時間 單位是 秒 比如 0.5s 這個s單位必須寫 ms毫秒
transition-timing-function： linear勻速 | ease逐漸慢下來 | ease-in 加速 | ease-out 減速 | ease-in-out 先加速在減速
2D變形(CSS3) transform
轉換是CSS3中具有顛覆性的特徵之一，可以實現元素的位移、旋轉、變形、縮放，甚至支持矩陣方式，配合過渡和即將學習的動畫知識，可以取代大量之前只能靠Flash纔可以實現的效果。
變形轉換 transform
- 移動 translate(x, y)
![在這裏插入圖片描述]()
translate(50px,50px);
使用translate方法來將文字或圖像在水平方向和垂直方向上分別垂直移動50像素。
可以改變元素的位置，x、y可爲負值；
translate(x,y)水平方向和垂直方向同時移動（也就是X軸和Y軸同時移動）
translateX(x)僅水平方向移動（X軸移動）
translateY(Y)僅垂直方向移動（Y軸移動）
.box {
width: 499.9999px;
height: 400px;
background: pink;
position: absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%); /* 走的自己的一半 */
}
讓定位的盒子水平居中
- 縮放 scale(x, y)
![在這裏插入圖片描述]()
transform:scale(0.8,1);
可以對元素進行水平和垂直方向的縮放。該語句使用scale方法使該元素在水平方向上縮小了20%，垂直方向上不縮放。
scale(X,Y)使元素水平方向和垂直方向同時縮放（也就是X軸和Y軸同時縮放）
scaleX(x)元素僅水平方向縮放（X軸縮放）
scaleY(y)元素僅垂直方向縮放（Y軸縮放）
scale()的取值默認的值爲1，當值設置爲0.01到0.99之間的任何值，作用使一個元素縮小；而任何大於或等於1.01的值，作用是讓元素放大
- 旋轉 rotate(deg)
可以對元素進行旋轉，正值爲順時針，負值爲逆時針；
transform:rotate(45deg);
- 當元素旋轉以後，座標軸也跟着發生的轉變
- 調整順序可以解決，把旋轉放到最後
- 注意單位是 deg 度數
- 傾斜 skew(deg, deg)
![在這裏插入圖片描述]()
transform:skew(30deg,0deg);
該實例通過skew方法把元素水平方向上傾斜30度，豎直方向保持不變。
可以使元素按一定的角度進行傾斜，可爲負值，第二個參數不寫默認爲0。
5.transform-origin可以調整元素轉換的原點
div{transform-origin: left top;transform: rotate(45deg); } /* 改變元素原點到左上角，然後進行順時旋轉45度 */
案例： 菱形照片 三角盒子
案例旋轉撲克牌
body {
background-color: skyblue;
}
.container {
width: 100px;
height: 150px;
border: 1px solid gray;
margin: 300px auto;
position: relative;
}
.container > img {
display: block;
width: 100%;
height: 100%;
position: absolute;
transform-origin: top right;
/* 添加過渡 */
transition: all 1s;
}
.container:hover img:nth-child(1) {
transform: rotate(60deg);
}
.container:hover img:nth-child(2) {
transform: rotate(120deg);
}
.container:hover img:nth-child(3) {
transform: rotate(180deg);
}
.container:hover img:nth-child(4) {
transform: rotate(240deg);
}
.container:hover img:nth-child(5) {
transform: rotate(300deg);
}
.container:hover img:nth-child(6) {
transform: rotate(360deg);
}
3D變形 transform
CSS3中的3D座標系與數學控件座標系是有一定區別的，相當於其繞着X軸旋轉了180度，如下圖
簡單記住座標：
x左邊是負的，右邊是正的
y上面是負的，下面是正的
z裏面是負的，外面是正的
rotateX()
img {
transition:all 0.5s ease 0s;
}
img:hove {
transform:rotateX(180deg);
}
rotateY()
沿着y軸進行旋轉
img {
transition:all 0.5s ease 0s;
}
img:hove {
transform:rotateX(180deg);
}
rotateZ()
沿着z軸進行旋轉
img {
transition:all .25s ease-in 0s;
}
img:hover {
/* transform:rotateX(180deg); */
/* transform:rotateY(180deg); */
/* transform:rotateZ(180deg); */
/* transform:rotateX(45deg) rotateY(180deg) rotateZ(90deg) skew(0,10deg); */
}
透視(perspective)
腦顯示屏是一個2D平面，圖像之所以具有立體感（3D效果），其實只是一種視覺呈現，通過透視可以實現此目的。
透視可以將一個2D平面，在轉換的過程當中，呈現3D效果。
- 透視原理：近大遠小
- 瀏覽器透視：把近大遠小的所有圖像，透視在屏幕上
- perspective：視距，表示視點距離屏幕的長短。視點用於模擬透視效果時人眼的位置
perspective有兩種寫法
- 作爲一個屬性，設置給父元素，作用於所有3D轉換的子元素
- 作爲transform屬性的一個值，做用於元素自身
translateX(x)
僅水平方向移動**（X軸移動）
主要目的實現移動效果
translateY(y)
僅垂直方向移動（Y軸移動）
translateZ(z)
transformZ的直觀表現形式就是大小變化，實質是XY平面相對於視點的遠近變化（說遠近就一定會說到離什麼參照物遠或近，在這裏參照物就是perspective屬性）。比如設置了perspective爲200px;那麼transformZ的值越接近200，就是離的越近，看上去也就越大，超過200就看不到
translate3d(x,y,z)
[注意]其中，x和y可以是長度值，也可以是百分比，百分比是相對於其本身元素水平方向的寬度和垂直方向的高度和；z只能設置長度值
backface-visibility
backface-visibility：hidden 屬性定義當元素不面向屏幕時是否可見。
翻轉盒子案例
div {
width: 224px;
height: 224px;
margin: 100px auto;
position: relative;
}
div img {
position: absolute;
top: 0;
left: 0;
transition: all 1s;
}
div img:first-child {
z-index: 1;
backface-visibility: hidden; /* 不是正面對象屏幕，就隱藏 */
}
div:hover img {
transform: rotateY(180deg);
}
動畫(CSS3) animation
動畫是CSS3中具有顛覆性的特徵之一，可通過設置多個節點來精確控制一個或一組動畫，常用來實現複雜的動畫效果。
語法格式：
animation:動畫名稱 動畫時間 運動曲線 何時開始 播放次數 是否反方向;
關於幾個值，除了名字，動畫時間，延時有嚴格順序要求其它隨意r
@keyframes 動畫名稱 {
from{ 開始位置 } 0%
to{ 結束 } 100%
}
animation-iteration-count:infinite; 無限循環播放
animation-play-state:paused; 暫停動畫"
div {
animationg:go 2s ease 2; /*一般只使用前兩個 其他採用默認值*/
}
@keyframes go{
from{
transform: translateX(0);
}
to {
transform:translateX(600px);
}
}
小汽車案例
body {
background: white;
}
img {
width: 200px;
}
.animation { /*引用動畫*/
/*animation:動畫名稱 動畫時間 運動曲線 何時開始 播放次數 是否反方向;*/
animation-name: goback; /*名稱*/
animation-duration: 5s; /*動畫時間*/
animation-timing-function: ease; /*速度*/
animation-iteration-count: infinite; /*無限循環*/
}
@keyframes goback { /*定義動畫*/
0%{}
49%{
transform: translateX(1000px);
}
55%{
transform: translateX(1000px) rotateY(180deg);
/*如果有多組變形 用空格 隔開*/
}
95%{
transform: translateX(0) rotateY(180deg);
}
100%{
transform: translateX(0) rotateY(0deg);
}
}
伸縮佈局(CSS3)
CSS3在佈局方面做了非常大的改進，使得我們對塊級元素的佈局排列變得十分靈活，適應性非常強，其強大的伸縮性，在響應式開中可以發揮極大的作用。
主軸：Flex容器的主軸主要用來配置Flex項目，默認是水平方向
側軸：與主軸垂直的軸稱作側軸，默認是垂直方向的
方向：默認主軸從左向右，側軸默認從上到下
主軸和側軸並不是固定不變的，通過flex-direction可以互換。
Flex佈局的語法規範經過幾年發生了很大的變化，也給Flexbox的使用帶來一定的侷限性，因爲語法規範版本衆多，瀏覽器支持不一致，致使Flexbox佈局使用不多
2、各屬性詳解
1.flex子項目在主軸的縮放比例，不指定flex屬性，則不參與伸縮分配
min-width 最小值 min-width: 280px 最小寬度 不能小於 280
max-width: 1280px 最大寬度 不能大於 1280
2.flex-direction調整主軸方向（默認爲水平方向）
flex-direction: column 垂直排列
flex-direction: row 水平排列
3.justify-content調整主軸對齊（水平對齊）
子盒子如何在父盒子裏面水平對齊
| 值 | 描述 | 白話 |
|---|---|---|
| flex-start | 默認值。項目位於容器的開頭。 | 讓子元素從父容器的開頭開始排序但是盒子順序不變 |
| flex-end | 項目位於容器的結尾。 | 讓子元素從父容器的後面開始排序但是盒子順序不變 |
| center | 項目位於容器的中心。 | 讓子元素在父容器中間顯示 |
| space-between | 項目位於各行之間留有空白的容器內。 | 左右的盒子貼近父盒子，中間的平均分佈空白間距 |
| space-around | 項目位於各行之前、之間、之後都留有空白的容器內。 | 相當於給每個盒子添加了左右margin外邊距 |
4.flex-wrap控制是否換行
當我們子盒子內容寬度多於父盒子的時候如何處理
| 值 | 描述 |
|---|---|
| nowrap | 默認值。規定靈活的項目不拆行或不拆列。 不換行，則 收縮（壓縮） 顯示 強制一行內顯示 |
| wrap | 規定靈活的項目在必要的時候拆行或拆列。 |
| wrap-reverse | 規定靈活的項目在必要的時候拆行或拆列，但是以相反的順序。 |
5.flex-flow是flex-direction、flex-wrap的簡寫形式
flex-flow: flex-direction flex-wrap;
注意： flex-flow: 排列方向 換不換行;
兩個中間用空格
例如：
display: flex;
/* flex-direction: row;
flex-wrap: wrap; 這兩句話等價於下面的這句話*/
flex-flow: column wrap; /* 兩者的綜合 */
6.align-content堆棧（由flex-wrap產生的獨立行）多行垂直對齊方式齊
align-content是針對flex容器裏面多軸(多行)的情況,align-items是針對一行的情況進行排列。
必須對父元素設置自由盒屬性display:flex;，並且設置排列方式爲橫向排列flex-direction:row;並且設置換行，flex-wrap:wrap;這樣這個屬性的設置纔會起作用。
| 值 | 描述 | 測試 |
|---|---|---|
| stretch | 默認值。項目被拉伸以適應容器。 | |
| center | 項目位於容器的中心。 | |
| flex-start | 項目位於容器的開頭。 | |
| flex-end | 項目位於容器的結尾。 | |
| space-between | 項目位於各行之間留有空白的容器內。 | |
| space-around | 項目位於各行之前、之間、之後都留有空白的容器內。 |
7.order控制子項目的排列順序，正序方式排序，從小到大
用css 來控制盒子的前後順序。 用order 就可以
用整數值來定義排列順序，數值小的排在前面。可以爲負值。 默認值是 0
order: 1;
BFC(塊級格式化上下文)
BFC(Block formatting context)
直譯爲"塊級格式化上下文"。BFC它是一個獨立的渲染區域，只有block-level box 參與，它規定了內部的Block-level Box如何佈局，並且與這個區域外部毫不相干
元素的顯示模式
我們前面講過 元素的顯示模式 display。
分爲 塊級元素 行內元素 行內塊元素 ，其實，它還有很多其他顯示模式。
那些元素會具有BFC的條件
不是所有的元素模式都能產生BFC，w3c 規範：
display 屬性爲 block, list-item, table 的元素，會產生BFC.
大家有麼有發現這個三個都是用來佈局最爲合理的元素，因爲他們就是用來可視化佈局。
注意其他的，display屬性，比如 line 等等，他們創建的是 IFC ，
這個BFC 有着具體的佈局特性：
有寬度和高度 ， 有 外邊距margin 有內邊距padding 有邊框 border。
什麼情況下可以讓元素產生BFC
以上盒子具有BFC條件了，但是怎樣觸發纔會產生BFC，從而創造這個封閉的環境呢？
同樣，要給這些元素添加如下屬性就可以觸發BFC。
-float屬性不爲none
-position爲absolute或fixed
-display爲inline-block, table-cell, table-caption, flex, inline-flex
-overflow不爲visible。
BFC元素所具有的特性
BFC佈局規則特性：
1.在BFC中，盒子從頂端開始垂直地一個接一個地排列.
2.盒子垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰盒子的margin會發生重疊
3.在BFC中，每一個盒子的左外邊緣（margin-left）會觸碰到容器的左邊緣(border-left)（對於從右到左的格式來說，則觸碰到右邊緣）。
4.BFC的區域不會與浮動盒子產生交集，而是緊貼浮動邊緣。
5.計算BFC的高度時，自然也會檢測浮動或者定位的盒子高度。
BFC能用來做什麼？
(1) 清除元素內部浮動
只要把父元素設爲BFC就可以清理子元素的浮動了，最常見的用法就是在父元素上設置overflow: hidden樣式，對於IE6加上zoom:1就可以了。
主要用到
計算BFC的高度時，自然也會檢測浮動或者定位的盒子高度。
(2) 解決外邊距合併問題
外邊距合併的問題。
主要用到
盒子垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰盒子的margin會發生重疊
屬於同一個BFC的兩個相鄰盒子的margin會發生重疊，那麼我們創建不屬於同一個BFC，就不會發生margin重疊了。
(3) 製作右側自適應的盒子問題
主要用到
普通流體元素BFC後，爲了和浮動元素不產生任何交集，順着浮動邊緣形成自己的封閉上下文
BFC 總結
BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。包括浮動，和外邊距合併等等，因此，有了這個特性，我們佈局的時候就不會出現意外情況了。
優雅降級和漸進增強
什麼是漸進增強（progressive enhancement）、優雅降級（graceful degradation）呢？
漸進增強 progressive enhancement：
針對低版本瀏覽器進行構建頁面，保證最基本的功能，然後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
類似 爬山，由低出往高處爬
優雅降級 graceful degradation：
一開始就構建完整的功能，然後再針對低版本瀏覽器進行兼容。
類似蹦極，由高處往低處下落
區別：漸進增強是向上兼容，優雅降級是向下兼容。
人建議： 現在互聯網發展很快， 連微軟公司都拋棄了ie瀏覽器，轉而支持 edge這樣的高版本瀏覽器，我們很多情況下沒有必要再時刻想着低版本瀏覽器了，而是一開始就構建完整的效果，根據實際情況，修補低版本瀏覽器問題。
瀏覽器前綴
| 瀏覽器前綴 | 瀏覽器 |
|---|---|
| -webkit- | Google Chrome, Safari, Android Browser |
| -moz- | Firefox |
| -o- | Opera |
| -ms- | Internet Explorer, Edge |
| -khtml- | Konqueror |
背景漸變
在線性漸變過程中，顏色沿着一條直線過渡：從左側到右側、從右側到左側、從頂部到底部、從底部到頂部或着沿任何任意軸。如果你曾使用過製作圖件，比如說Photoshop，你對線性漸變並不會陌生。
兼容性問題很嚴重，我們這裏只講解線性漸變
語法格式：
background:-webkit-linear-gradient(漸變的起始位置， 起始顏色， 結束顏色)；
background:-webkit-linear-gradient(漸變的起始位置， 顏色 位置， 顏色位置....)；
CSS W3C 統一驗證工具
CssStats 是一個在線的 CSS 代碼分析工具
網址是： http://www.cssstats.com/
如果你想要更全面的，這個神奇，你值得擁有：
W3C 統一驗證工具： http://validator.w3.org/unicorn/ ☆☆☆☆☆
因爲它可以檢測本地文件
CSS 壓縮
通過上面的檢測沒有錯誤，爲了提高加載速度和節約空間（相對來說，css量很少的情況下，幾乎沒啥區別），可以通過css壓縮工具把css進行壓縮。
w3c css壓縮 http://tool.chinaz.com/Tools/CssFormat.aspx 網速比較慢
還可以去站長之家進行快速壓縮。
http://tool.chinaz.com/Tools/CssFormat.aspx
旋轉輪播圖
transform-style
transform-style 屬性是3D空間一個重要屬性，指定嵌套元素如何在3D空間中呈現。它主要有兩個屬性值：flat和preserve-3d。 其中flat值爲默認值，表示所有子元素在2D平面呈現。preserve-3d表示所有子元素在3D空間中呈現