css3相關筆記（四）

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+； 4.當須要爲不一樣瀏覽器準備不一樣格式的字體時，須要經過字體生成工具來生成各類格式的字體，因而無需在乎字體格式間的區別差別，推薦字體下載的網站http://www.zhaozi.cn/（找字網）、http://www.youziku.com/ （有字庫）、http://iconfont.cn/（阿里媽媽）、http://www.iconsvg.com/（SVG素材）、http://fontawesome.dashgame.com/（Font Awesome一套絕佳的圖標字體庫和CSS框架）。 5.引用特殊字體的語法【 /*  若是要在網頁中使用web字體（用戶電腦上沒有這種字體），*/         /* 聲明字體*/         /* 告訴瀏覽器 去哪找這個字體*/ @font-fack{ font-family: 'webfont';             src: url('font/webfont.eot'); /* IE9*/             src: url('font/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */             url('font/webfont.woff') format('woff'), /* chrome、firefox */             url('font/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/             url('font/webfont.svg#webfont') format('svg'); /* iOS 4.1- */ }  /* 定義一個類名，誰加這類名，就會使用webfont字體*/         .webfont{             font-family: 'webfont';         } //使用 <p class="webfont">誰使用就給誰加上這個類</p> 】,它會先去本地系統裏面找這個字體，若是找不到，纔會去你聲明的字體中寫的資源路徑中去找，若是是web字體的話，就直接輸出相應的字，由於你是根據字來生成字體的，若是是圖標字體的話，那麼直接輸出相依的圖標的編碼(代碼標記)，由於圖標字體是經過（編碼）代碼標記來呈現的，可是圖標字體是給僞元素的content屬性賦值時，須要去掉前面三個字符改用\替代纔可以顯示圖標字體，不然就會只顯示編碼。 6.css3查詢各類瀏覽器兼容性問題的網站：https://caniuse.com/，經過http://caniuse.com/ 可查詢CSS3各特性的支持程度，通常兼容性處理的常見方法是爲屬性添加私有前綴，如不能解決，應避免使用，無需刻意去處理CSS3的兼容性問題，須要知道每一個屬性，能被那個版本的瀏覽器支持便可。 7.鼠標滾輪滾動的事件，window.onmousewheel=function(){} 8.jQuery fullPage全屏滾動插件：http://www.dowebok.com/77.html 9.seTimeout(function(),100);表示隔個100毫秒再執行一次，setTimeout只會執行一次，setInterval會循環執行。 10.推薦一款練習javascript代碼的遊戲：http://codetank.alloyteam.com/（互聯網智能坦克機器人（javascript代碼練習遊戲）） 11.子代選擇器只可以針對元素選擇器，不可以針對類選擇器，後代選擇器能夠針對元素原則器和類選擇器，如【 .section.first.current>.text{}//是無效的，它使用的是 子代選擇器； 可是.section.first.current .text{}//是有效的 ，它使用的是後代選擇器； .section.first.current .text>img{}//是有效的。 】