1.css3新增的伸縮布局，主軸方向是從左到右，側軸方向是從上到下：
◆display：flex;，預設從左到右，從上到下
◆設定主軸排列方向的方式：，flex-direction:row;（預設屬性，表示從左至右的排列），flex-direction:row-reverse;（表示從右至左的排列），flex-direction:column;（表示從上到下的排列），flex-direction:column-reverse;（表示從下到的排列），最重要的是橫向排列時，當所有子元素的寬小於父容器的寬時，子元素多寬就是多寬，但是如果所有子元素的寬大于父容器了，那麼就會自適應父容器的寬，於是子元素原來的寬就無效了，子元素的寬度就變成父容器除以子容器的個數的值了，當然如果有外邊距也會加進去用來計算，縱向排列也是如此，但是如果父容器沒有設定高，那就不會自適應父容器的高了。
◆設定主軸對齊的方式：justify-content:flex-start（表示對齊方式是從主軸方向開始的地方對齊），justify-content:flex-end（表示對齊方式是從主軸方向結束的地方對齊），justify-content:center（表示對齊方式是從主軸方向中間的地方對齊），justify-content:space-round（表示對齊方式是從主軸方向空間平分），justify-content:space-between（表示對齊方式是從主軸方向兩端對齊中間的居中）
◆側軸對齊的方式：align-items:flex-start（表示對齊方式是從側軸方向開始的地方對齊），align-items:flex-end（表示對齊方式是從側軸方向結束的地方對齊），align-items:center（表示對齊方式是從側軸方向中間的地方對齊），align-items:baseline（表示對齊方式是從側軸方向基線的地方對齊，與flex-start一樣），align-items:stretch（表示對齊方式是從側軸方向的以拉伸的方式對齊，只要子元素的高度為auto，那麼會自適應父容器的高度，既拉伸）
◆設定display：flex;後，繼續設定每個子盒子所佔父盒子的比例，既伸縮比例，給子盒子設定 flex:number;，如果不參與伸縮比例的設定就不給那個子盒子寫flex:number;，當給乙個子盒子設定flex:auto時，大小就是原來的大小 + flex:1。
★這種布局是css3新增的，一般用於移動端的響應式布局，pc端會有相容性的問題出現，移動端使用的瀏覽器核心一般都是-webkit-。
◆在移動端使用box-sizing:border-box;非常的多
◆meta:vp這個emmte表示式，用於告訴移動端瀏覽器，要自適應手機大小。
2.開發人員可以為自己的網頁指定特殊的字型（web字型、圖示字型），無需考慮使用者電腦上是否安裝了此特殊字型，從此把特殊字型處理成的時代便成為了過去。支援程度比較好，甚至ie低版本瀏覽器也能支援。
3.不同瀏覽器所支援的字型格式是不一樣的
◆turetpe(.ttf)格式
.ttf字型是windows和mac的最常見的字型，是一種raw格式，支援這種字型的瀏覽器有ie9+、firefox3.5+、chrome4+、safari3+、opera10+、ios mobile、safari4.2+；
◆opentype(.otf)格式
.otf字型被認為是一種原始的字型格式，其內建在turetype的基礎上，支援這種字型的瀏覽器有firefox3.5+、chrome4.0+、safari3.1+、opera10.0+、ios mobile、safari4.2+；
◆web open font format(.woff)格式
woff字型是web字型中最佳格式，他是乙個開放的truetype/opentype的壓縮版本，同時也支援元資料報的分離，支援這種字型的瀏覽器有ie9+、firefox3.5+、chrome6+、safari3.6+、opera11.1+；
◆embedded open type(.eot)格式
.eot字型是ie專用字型，可以從truetype建立此格式字型，支援這種字型的瀏覽器有ie4+；
◆svg(.svg)格式
.svg字型是基於svg字型渲染的一種格式，支援這種字型的瀏覽器有chrome4+、safari3.1+、opera10.0+、ios mobile safari3.2+；
5.引用特殊字型的語法【
/* 如果要在網頁中使用web字型（使用者電腦上沒有這種字型），*/
/* 宣告字型*/
/* 告訴瀏覽器 去哪找這個字型*/
@font-fack
/* 定義乙個類名，誰加這類名，就會使用webfont字型*/
.webfont
//使用
誰使用就給誰加上這個類
】,它會先去本地系統裡面找這個字型，如果找不到，才會去你宣告的字型中寫的資源路徑中去找，如果是web字型的話，就直接輸出相應的字，因為你是根據字來生成字型的，如果是圖示字型的話，那麼直接輸出相依的圖示的編碼(**標記)，因為圖示字型是通過（編碼）**標記來呈現的，但是圖示字型是給偽元素的content屬性賦值時，需要去掉前面三個字元改用\替代才能夠顯示圖示字型，否則就會只顯示編碼。
6.css3查詢各種瀏覽器相容性問題的**：通過 可查詢css3各特性的支援程度，一般相容性處理的常見方法是為屬性新增私有字首，如不能解決，應避免使用，無需刻意去處理css3的相容性問題，需要知道每個屬性，能被那個版本的瀏覽器支援即可。
7.滑鼠滾輪滾動的事件，window.onmousewheel=function(){}
8.jquery fullpage全屏滾動外掛程式：
9.setimeout(function(),100);表示隔個100毫秒再執行一次，settimeout只會執行一次，setinterval會迴圈執行。
11.子代選擇器只能夠針對元素選擇器，不能夠針對類選擇器，後代選擇器可以針對元素原則器和類選擇器，如【
.section.first.current>.text{}//是無效的，它使用的是 子代選擇器；
但是.section.first.current .text{}//是有效的 ，它使用的是後代選擇器；
.section.first.current .text>img{}//是有效的。
】
css3相關筆記（三）
1.每乙個方向上的邊框形狀並不是矩形的，其實是三角形或梯形的，配合圓角邊框可以製作美麗花瓣。2.css3 3d變換效果 transform transform rotatex 360deg 表示在x軸3d旋轉360度。transform rotatey 360deg 表示在y軸3d旋轉360度。tr...
css3相關筆記（三）
1.每乙個方向上的邊框形狀並不是矩形的，其實是三角形或梯形的，配合圓角邊框可以製作美麗花瓣。2.css3 3d變換效果 transform transform rotatex 360deg 表示在x軸3d旋轉360度。transform rotatey 360deg 表示在y軸3d旋轉360度。tr...
CSS3相關效果整理
1.過長省略 white space nowrap 為應用text overflow做準備，禁止換行 overflow hidden 為應用text overflow做準備，禁止文字溢位顯示 text overflow ellipsis 相容ie，safari webkit o text overf...