我盆友的學習筆記，記得挺詳細的 部分摘自博友
HTML5 CSS3 部分css屬性或標簽
1、 <!DOCTYPE html> 文檔類型聲明，告訴瀏覽器如何渲染html
<html lang="en"> 頁面為什麽語言
2、html5與html4有什麽不同？
頭部聲明；
語義化標簽，更人性化，更生動；header nav section aside article footer address等
3、<meta charset="UTF-8"> 字符編碼
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>各種IE的兼容性設置 優先使用IE最新版和Chorme
<meta name="viewport" content="width=device-width,initial-scale=1,minmum-scale=1,maximum-scale=1,user-scalable=no"/> 創建一個虛擬的窗口 窗口寬度為設備寬度 初始縮放比例 最小縮放比例 最大縮放比例 是否允許縮放比例
width=640(微信常見) user-scalable=no,禁止縮放，默認是yes
5、 a,img{
-webkit-touch-callout:none} //禁止長按超鏈接或圖片彈出菜單kk
html,body{
-webkit-user-select:none;
user-select:none;} //禁止選中文本
button,input,optgroup,select,textarea{
-webkit-appearance:none;} //去掉webkit默認的表單樣式 如果不去掉在IOS中不會改變樣式
a,button,input,optgroup,select,textarea{
-webkit-tap-highlight-color:rgba(0,0,0,0)};//去掉a,input,和button點擊時的藍色外邊框和灰色半透明背景； 瀏覽器支持IOS
6、 input::-webkit-input-placeholder{
color:yellow;} //修改-webkit placeholder樣式
input:focus::-webkit-input-placeholder{
color: #foo} //input:focus 獲得焦點時 placeholder樣式
input::-webkit-input-speach-button{
display:none;} //隱藏Android的語音輸入按鈕
7、 body{
-webkit-text-size-adjust: 100% !important}//禁止IOS調整字體大小；
默認就隨著終端改變字體，如果body設成全局或者繼承就會隨著終端改變，不要設成全局或者繼承的
-webkit-text-size-adjust:none ; 禁用webkit內核瀏覽器文字調整大小
8、 audio音頻 video視頻 canvas畫布 svg本地存儲地理定位
chrome/360極速版/蘋果ios/搜狗瀏覽器 內核 webkit
火狐內核 MOZ 兼容opera前綴 -o 兼容IE內核 -ms
9、sass/scss 預處理器，用於書寫css樣式，預編譯
繼承： extend
使用sass時，繼承是一個很不錯的減少css重復代碼的功能。繼承可以讓一個選擇器繼承另一個選擇器所有的樣式，並聯合聲明。
方法： @extend 除了包含和群組以外的樣式都已用來繼承
10、sass
後綴名： scss 和sass 兩個功能一樣、
輸出樣式的風格有四種，默認為nested
nested:嵌套縮進的css代碼
expanded:展開多行的css代碼
compact:簡潔格式的css代碼
compressed: 壓縮後的css代碼
變量以$開頭 ！default默認值
如果在字符串中引用變量，則需要將變量名字在 #{}中
默認變量只需在變量值後加上 ！default
嵌套中的&表示父元素選擇器。
css屬性頁可以嵌套（用的較少）
混合器：@mixin 調用@include
占位符選擇器: %
占位符選擇器的優勢在於聲明後，如果不調用則不會產生類似。
.text的多余css代碼，占位選擇器通過%標示來定義，也通過@extend來調用
%名字{樣式} 調用 @extend %
運算： Sass 中，運算只是其基本特性之一。sass做加法運算是可以不考慮參數帶單位，但需要單位同一，加號可以不需要空格隔開;
減法註意空格； 乘法只需一個乘數帶單位（否則會出錯），em/px/%等多種單位；
做除法,css中“/”已經作為一個符號，不會報錯 。做為除法： 函數，變量，表達式的一部分，圓括號包裹，例width： （100px/2）；
做除法時兩個都帶單位時，得到的值沒有單位。
詳細案例請參觀博客：http://www.cnblogs.com/Medeor/p/4966952.html
數字： 如1,2,13，10px （如果帶單位，單位需同一）
字符串拼接（+）：
p::before{
content: "hello" + -world ;
font-family: sans- + "serif"; }
輸出結果：
p::before{
content: "hello-world";
font-family: sans-serif;}
顏色： 如： blue #04a3fg（分段計算，紅綠藍rgb） rgba(255, 0,0,0,5);
布爾型：例 true ,false
空值： 例 null
值列表： 用空格或逗號分開 nth-child(index) nth-of-type(index)
循環：
$for $i from <start> through <end>
$for $i from <start> to <end> 區別： to 和 through區別 包含最後一個值？ through包含
用法： $for $i from 1 to 3{
.item-#{$i} {
width: 2em*$i}
}
輸出： .item-1{ width: 2em} .item-2{width: 4em} .item-3{width: 6em}
總結 $i 是變換的值 .item-${$i}#{1} 輸出 .item-11 .item-21 .item-31 變換十位數
@while循環
用法：
$types: 3 ; $type-width: 20px
@while $types >0{
.while-#{$types}{
width: $type-width + $types; （加號 拼接）
}
$types: $types-1;
}
輸出結果:
.while-3{ width: 23px} .while-2{width: 22px} .while-1{width: 21px}
@each 循環
遍歷一個列表，從列表中取值；（數組或對象）
循環指令的形式： @each $var in <list>
$list: adam john wynn mason kuroir;//$list 是一個列表
@mixin author-images {
@each $author in $list {
.photo-#{$author} {
background: url("/images/avatars/#{$author}.png");}
}
}
.author-bio {
@include author-images;}
輸出：
.author-bio .photo-adam {
background: url("/images/avatars/adam.png"); }
.author-bio .photo-john {
background: url("/images/avatars/john.png"); }
.author-bio .photo-wynn {
background: url("/images/avatars/wynn.png"); }
.author-bio .photo-mason {
background: url("/images/avatars/mason.png"); }
.author-bio .photo-kuroir {
background: url("/images/avatars/kuroir.png"); }
11、CSS3動畫
過渡動畫 transition: name duration easing delay
（transition-name transition-duration transition-timing-function transition-delay ）
name 動畫的屬性或樣式（width，color），不寫或設置為all ，表示要過渡所有發生了改變的屬性；過渡多個屬性，屬性與屬性之間用逗號 隔開；
duration:定義過渡效果執行時間 m/ms
easing: 動畫曲線 ease-out 由快到慢 linear:勻速（默認） ease-in-out慢快慢 ease-in:由慢到快
註意： transition 不要出現在hover裏偽類
例： -webkit-transition: width 1.5s ease-in 0.5s(延遲執行) 超過兩個時用all
animation關鍵幀動畫
animation-interation-count 元素動畫的循環次數 默認值1； infinite無限循環
animation-direction: 元素動畫播放的方向，（是否允許反向播放）； alternate動畫播放在第偶數次向前播放，第奇數次反方向
@keyframes 關鍵幀，用於引出(創建)一個動畫 @keyframes animationname {keyframes-selector {css-styles;}}
@keyframes name1{ from{};to{};} @keyframes name2{0%{}; 50%{}; 100%{}}
css3中的動畫框架： animate.css
使用方法： <div class="animate zoomIn">進入放大的動畫</div>
常用的動畫類型： bounce彈跳； flip 擲； flash閃現； shake震動發抖, swing秋千懸掛, wobble搖擺搖晃； ring環形； fadeIn淡入 fadeout淡出 rotate翻轉
transform: translate() /scale() / skew()/ rotate() 主要對元素進行2D轉換 translateX() translateY()等 後面幾個屬性也一樣
transform-origin: x y; 定義rotate旋轉，skew傾斜和scale縮放中心點；
x，y可以使具體數值/百分比/(left,top,right,bottom);
默認在 元素的中心點上； 中心點的改變 對translate位移沒有影響
transform: translate3d() / scale3d() / skew3d() / rotate3d() 3D轉換 此時會開啟硬件加速
translate()位移,是占位的 scale() 縮放 skew()扭曲 rotate(60deg)旋轉 單位 deg
vertical-align: middle 控制文字和圖片居中對齊的方法 註意： 一行中文字也有圖片用定位做（對齊的基線默認 baseline，圖片一般較大，需要下移一下）
手機端要建立一個大盒子，寬度100%，高度 auto
$list : red blue green orange #fff #000; background:nth($list,3)
box-sizing: border-box 盒子的width和height 包含邊框（content-box ==border-box）
鼠標狀態： cursor: pointer手的狀態/ move可移動狀態 / wait轉圈狀態(加載狀態)
box-shadow: x偏移 y偏移 模糊度 顏色 inset (內陰影)
相對單位： rem ，em；
區別： rem 相對於根元素html的字體大小。doc默認的是 16px； html{ font-size: 625%;body{font-size: .14rem}} 谷歌不支持小於12px 的字體。 （不繼承父元素的大小） 100px==1rem 不繼承字體大小，先定義一個全局的
em： 相對於父元素，且字體大小可以繼承的。
before 和 after偽類
在選擇器前後定義樣式或添加新元素
選擇器::before{
content:"文字"，
display：table； //其他css樣式}
選擇器::after{
content:"wenzi",
display: table; //其他css樣式 }
字體庫： 網址： http://icomoon.io
字體模塊 @font-face 把自定義的web字體，嵌入到你的網頁中，當用戶電腦上沒有此種字體時，自動從網上下載。
用法： 字體類型： .woff() .ttf和.otf .eot(IE9only) .ttf(True Type字體)和.otf(OpenType) EOT (Embedded OpenType)
@font-face{
font-family: 字體名稱（自定義），
src: url("自定義字體路徑，相對/絕對"),
,url(‘font.eot‘); /* IE9 */ //IE9只支持 .eot格式的字體}
註：Internet Explorer 9 只支持 .eot 類型的字體, Firefox, Chrome, Safari, 和 Opera 支持 .ttf 與.otf 兩種類型字體.
Internet Explorer 9+, Firefox, Chrome, Safari, 和 Opera 支持 WOFF (Web Open Font Format) 字體.
Internet Explorer 8 及更早IE版本不支持@font-face 規則.
.woff 是web中最佳格式 .eot是IE專用字體 .svg是基於svg字體渲染的一種格式
字體的調用： h1{font-famify: "字體名字"}
14、彈性盒(伸縮盒)
由於老伸縮盒（09年 ），與新伸縮盒差異大，只說新盒子(11年)；
向內擠壓： -webkit-box-sizing: border-box
新盒子：：
display: -webkit-flex
flex-direction: row | row-reverse | column | column-reverse 排列方式
flex：none | <‘ flex-grow ‘> <‘ flex-shrink >‘? || <‘ flex-basis ‘>
-webkit-flex-grow: 分配父元素剩余空間擴展比率
flex-sharink: 按比例收縮比率
flex-basis: 伸縮基準率
flex-basis: length | percentage | auto默認 | content內容自動計算寬度
flex-flow：<‘ flex-direction ‘> || <‘ flex-wrap ‘> 子元素的排列方式 | 是否多行
justify-content: flex-start | flex-end | center | space-between | space-around
space-between:第一個元素靠左邊界，第二個元素靠右邊界，中間默認是平均分配
space-around: 兩兩之間的空白空間相等，同時第一個元素的空間以及最後一個元素的空間為其他空白空間 的一半
align-items: flex-start | flex-end | center | baseline | stretch
stretch : 使項目邊距盒的尺寸，接近所在行的尺寸，但同時會遵照 min/max- width|height 屬性的限制
彈性盒子是否換行：
flex-wrap: nowrap | wrap | wrap-reverse
默認是nowrap容器為單行，該情況下子項可以能會溢出容器
wrap： 定義flex容器為多行，子項內容可能會斷行
wrap-reverse: 反轉 wrap 排列
說明:該屬性控制是單行或是多行，同時橫軸的方向決定了新行堆疊的方向
l
我盆友的學習筆記，記得挺詳細的 部分摘自博友