一. 細節內容：
1. 圖片如果只設置寬度，高度會自動適應，所以不建議設定高
度。

2. display：
inline（設定後具備行級元素特性）
block（設定後具備塊級元素特性）
nline-block（行及元素，但是具有塊級屬性，但可能產生瀏覽器不相容現象出現）     
妙用：若不知道圖片大小，可以給父級div加上 display：inline-block（通過行及元素特性使
div被內容撐開）

3. 清除浮動：
1. 可以用任何塊級元素（或者display：block屬性）
2. 可以在需要清楚浮動的父元素內加上overflow屬性

4. cursor：pointer:
滑鼠到達該分割槽，會由箭頭變成手

二. DIV屬性以及定位：
1. overflow:
hidden:內容超出去隱藏
auto:內容超出去會自動出現滾動條
scroll:不管內容是否超出都會有滾動條
如：
.div1{
width:300px;
height: 300px;
background-color: red;
overflow: hidden;
}
.div2{
width:200px;
height: 500px;
background-color: green;
}
結果：

overflow-x:水平方向. 相容性不好!
overflow-y:垂直方向.相容性不好!

2. position:
absolute:絕對定位
relative:相對定位
fixed:相對於瀏覽器視窗定位（始終停留在瀏覽器的固定位置，類似於廣告）
如：
.div1{
width: 100%;
height: 2000px;
background-color: yellow;
}
.div2{
width: 100px;
height: 200px;
background-color: red;
position: fixed;
right: 0;
top: 0;
}
結果：

3. 居中顯示：
div分割槽水平垂直居中：水平居中  margin：0 auto；
垂直居中：
position: absolute;
left: 0;
top: 50%;
margin-top: ？px;（當前高度的一半）

4. 最外層元素全用百分比無法顯示：
只有父元素高度確定時，子元素高度的百分比才能起作用

解決方法①：（常用）
在最外層加上：
html{
height: 100%;
}
body{
height: 100%;
}

解決方法②：
採用絕對定位：（自動找到最上層定位元素，可以看作是瀏覽器）
在最外層元素內加上：
position:absolute;
如：
.div1{
width: 100%;
height: 100%;
background-color: red;
position: absolute;
}
結果：

三. 瀏覽器相容性：
1. -webkit-: 谷歌、Safari 瀏覽器
2.  -moz-: 火狐
3.  -o-:  歐朋
4. -ms-: IE瀏覽器

注意：
需要寫這些的，都是相容性不好的，若想相容多個瀏覽器，就把想相容的瀏覽器都寫一遍！

四. CSS3-過渡效果：

1. -webkit-transition：
簡寫形式：
屬性：時間，緩動，延遲
-webkit-transition:left 1s ease 0.5s;

①. 設定要對哪個屬性進行過度
-webkit-transition-property:left;

②. 設定動畫時間
-webkit-transition-duration:2s;

③. 設定動畫延遲
-webkit-transition-delay: 1s;

④. 設定動畫函式
-webkit-transition-timing-function: ease ;
ease: 預設值，元素樣式從初始狀態過渡到終止狀態
時，速度由快到慢，逐漸變慢。等同於貝塞爾曲線
（0.25，0.1，0.25，1）。

Linear: 元素樣式從初始狀態過渡到終止狀態
速度是恆速。等同於貝塞爾曲線（0，0，1，1）。

ease-in:元素樣式從初始狀態過渡到終止狀態時，速
度越來越快，呈一種加速狀態。等同於貝塞爾曲線
（0.42，0，1，1）。

ease-out:元素樣式從初始狀態過渡到終止狀態時，速
度越來越慢，呈一種減速狀態。等同於貝塞爾曲線
（0，0，0.58，1）。
ease-in-out:元素樣式從初始狀態過渡到終止狀態
時，先加速再減速。等同於貝塞爾曲線（0.42，0，
0.58，1）。

⑤. 設定動畫自定義函式
-webkit-transition-timing-function:cubic-
bezier(0,0,1,1);
貝塞爾曲線網址：http://cubic-bezier.com

五. 動畫：
1. 定義動畫:
@keyframes+“物件名”
如：
①: 多段：
@keyframes my {
0%{
background-color: red;
}
50%{
background-color: yellow;
}
100%{
background-color: blue;
}
}
②: 兩段：
@keyframes my {
from{
background-color: red;
}
to{
background-color: blue;
}
}

2. 動畫呼叫:
-webkit-animation: “物件名” +“時間”;
詳細：
animation-name: 動畫名稱
animation-duration:動畫時間
animation-timing-function:動畫速度曲線
animation-delay:動畫開始的時間（延遲）
animation-iteration-count:動畫播放次數，預設為1
無限次數：Infinite
animation-direction:動畫是否逆播放
逆向迴圈播放：Alternate
animation-fill-mode:動畫時間之外的狀態
動畫完成後保持最後的CSS樣式：forwards
動畫完成後回到最初的CSS樣式：Backwards

如：
.img1{
-webkit-animation: myframe1 3s;
-webkit-animation-fill-mode: forwards;
}

詳細內容見筆記：