CSS3 在布局方面做了非常大的改進，對塊級元素的布局排列變得十分靈活，適應性非常強，其強大的伸縮性，在響應式開發中可以發揮極大的作用。（兼容性不好）
必要元素：
指定一個盒子為伸縮盒子 display:flex;
設置屬性來調整此盒子的子元素的布局方式：如 flex-direction；
明確主側軸及方向
可互換主側軸，也可改變方向
各屬性：
設置主軸方向
a) flex-direction：row（默認屬性）
- row：從左往右
b) flex-direction：row-reverse
- row-reverse從右向左排列
c) flex-direction：column
- 豎直反向，從上往下
d) flex-direction：column-reverse
1. 豎直方向，從下往上
主軸的對齊方式
a) justify-content：flex-start；
- 從主軸開始的方向對齊
b) justify-content：flex-end
- 從主軸結束的方向對齊
c) justify-content：center
- 居中對齊（水平/豎直）
d) justify-content：space-round
- 平分父盒子空間
e) justify-content：space-between
1. 兩端對齊，中間平分
側軸對齊方式
a) align-items：flex-start
- 從側軸開始的方向對齊
b) align-items：flex-end
- 從側軸結束的方向對齊
c) align-items：center
- 在側軸方向上居中
d) align-items：baseline
- 基線對齊，與flex-start等效
e) align-items：stretch
- 拉伸，和父盒子高度一樣
- 有高度不會被拉伸
伸縮比例
a) flex：number
b) 不設置就不參與平分
元素換行
a) flex-wrap:wrap; 換行，控制伸縮盒子里面的元素
b) flex-wrap：nowrap； 默認不換行 會自動縮減寬度
控制 換行 堆疊的元素
a) align-content: flex-start
起始點對齊 各行向彈性盒容器的起始位置堆疊
b) align-content: flex-end;
終止點對齊 將結尾鋪滿 開頭空着
c) align-content: center ;
居中對齊，各個盒子向彈性盒容器的中間位置堆疊／y軸中間
d) align-contnt: space-around;
四周環繞：各行在彈性盒容器中平均分布
e) align-content: space-between;
頂端和底部對齊，中間部分為空
f) align-content: stretch ;
拉伸 高度會自適應
align-self; 覆蓋父元素設置的align-items
align-self: stretch
flex-start ／ flex-end ／ center ／ stretch
側軸起始點對齊／終止點對齊／居中對齊／拉伸
order：number ； 控制子元素的順序
.order li:nth-child(2) {
order: 10; // 讓其位置在第十位
}
WEB字體
- 可以使用自己指定的特殊字體，無需考慮用戶是否安裝
- 支持程度較好
- .eot字體是IE專用字體
使用web字體
聲明字體
@font-face{
font-family："webfont"; /*定義的字體名字*/
src:url (" 路徑");
src:url("字體路徑") format();/*format（）函數給瀏覽器提示是該字體文件是何種類型*/
}
.web-font{
font-family:'webfont'; /*定義字體名字*/
}
偽元素添加圖標字體 (給那個標簽添加icon類名那個標簽就會有這個圖標)
.icon::before{
content: '\e655';
font-family: iconfont;
}
b)  在偽元素添加的時候content=“\e67c”
鼠標滾輪事件
window.onmousewheel=function（）｛｝