CSS選擇器
CSS3選擇器規(guī)范地址： www.w3.org/TR/2011/REC-css3-selectors-20110929/
CSS3選擇最新選擇器規(guī)范： www.w3.org/TR/selectors
!---問題---!
1. css的全稱是什么耗拓？
2. 樣式表的組成
規(guī)則
選擇器+聲明塊
聲明
CSS屬性+CSS屬性值組成的鍵值對
3. 瀏覽器讀取編譯css的順序？(從右往左)
-
基本選擇器
/*通配符選擇器*/ * { margin: 0; padding: 0; border: none; } /*元素選擇器*/ body { background: #eee; } /*類選擇器*/ .list { list-style: square; } /*ID選擇器*/ #list { width: 500px; margin: 0 auto; } /*后代選擇器*/ .list li { margin-top: 10px; background: #abcdef; } -
基本選擇器擴展
/*子元素選擇器*/ #wrap > .inner {color: pink;} 也可稱為直接后代選擇器,此類選擇器只能匹配到直接后代枉层，不能匹配到深層次的后代元素 /*相鄰兄弟選擇器*/ # wrap #first + .inner {color: #f00;} 它只會匹配緊跟著的兄弟元素 /*通用兄弟選擇器*/ #wrap #first ~ div { border: 1px solid;} 它會匹配所有的兄弟元素(不需要緊跟) /*選擇器分組*/ h1,h2,h3{color: pink;} 此處的逗號我們稱之為結合符 -
屬性選擇器
/*存在和值屬性選擇器*/ [attr]：該選擇器選擇包含 attr 屬性的所有元素梭伐，不論 attr 的值為何械荷。 [attr=val]：該選擇器僅選擇 attr 屬性被賦值為 val 的所有元素宅广。 [attr~=val]：表示帶有以 attr 命名的屬性的元素氛改，并且該屬性是一個以空格作為分隔的值列表，其中至少一個值為val蠢熄。 /*子串值屬性選擇器*/ [attr|=val] : 選擇attr屬性的值是val（包括val）或以val-開頭的元素。 [attr^=val] : 選擇attr屬性的值以val開頭（包括val）的元素炉旷。 [attr$=val] : 選擇attr屬性的值以val結尾（包括val）的元素签孔。 [attr*=val] : 選擇attr屬性的值中包含字符串val的元素。 -
偽類與偽元素選擇器（出現(xiàn)的目的是讓CSS有能力選中DOM以外的東西（如狀態(tài)）)
/*鏈接偽類*/ 注意:link窘行，:visited饥追，:target是作用于鏈接元素的！ :link 表示作為超鏈接罐盔，并指向一個未訪問的地址的所有錨 :visited 表示作為超鏈接但绕，并指向一個已訪問的地址的所有錨 :target 代表一個特殊的元素，它的id是URI的片段標識符(可實現(xiàn)選項卡） /*動態(tài)偽類*/ 注意:hover惶看，:active基 可以作用于所有的元素捏顺！ :hover 表示懸浮到元素上 :active 表示匹配被用戶激活的元素（點擊按住時） 由于a標簽的:link和:visited可以覆蓋了所有a標簽的狀態(tài)，所以當:link纬黎，:visited幅骄，:hover，:active同時出現(xiàn)在a標簽 身上時 :link和:visited不能放在最后１窘瘛２鹱！ 隱私與:visited選擇器 只有下列的屬性才能被應用到已訪問鏈接： color background-color border-color /*表單相關偽類*/ :enabled 匹配可編輯的表單 :disable 匹配被禁用的表單 :checked 匹配被選中的表單 :focus 匹配獲焦的表單 /*結構性偽類*/ index的值從1開始計數(shù)９谙ⅰＥ泊铡！逛艰！ index可以為變量n(只能是n) index可以為even odd #wrap ele:nth-child(index) 表示匹配#wrap中第index的子元素 這個子元素必須是ele #wrap ele:nth-of-type(index) 表示匹配#wrap中第index的ele子元素 除此之外:nth-child和:nth-of-type有一個很重要的區(qū)別ｕ锾肌！ nth-of-type以元素為中心Ｉ⒉馈９矫唷！ :nth-child(index)系列 :first-child :last-child :nth-last-child(index) :only-child (相對于:first-child:last-child 或者 :nth-child(1):nth-last-child(1)) :nth-of-type(index)系列 :first-of-type :last-of-type :nth-last-type(index) :only-of-type (相對于:first-of-type:last-of-type 或者 :nth-of-type(1):nth-last-of-type(1)) :not :empty(內容必須是空的杭抠，有空格都不行脸甘，有attr沒關系) /*偽元素*/ ::after：`::after`用來創(chuàng)建一個偽元素，作為已選中元素的最后一個子元素偏灿。通常會配合 content屬性來為該元素添加裝飾內容丹诀。這個虛擬元素默認是行內元素。 ::before ::firstLetter `::first-letter會`選中某 [block-level element]（塊級元素）第一行的第一個字母，并且文字所處的行之前沒有其他內容 ::firstLine 在某 [block-level element]（塊級元素）的第一行應用樣式铆遭。第一行的長度取決于很多因素硝桩，包括元素寬度，文檔寬度和文本的文字大小枚荣。
和其他所有的 偽元素一樣碗脊，::first-line 不能匹配任何真實存在的html元素。
::first-line 偽元素只能在塊容器中,所以: ::first-line偽元素只能在一個display值為block inline-block, table-cell 或者 table-caption中有用.橄妆。在其他的類型中衙伶，::first-line 是不起作用的.
::selection
::selection CSS偽元素應用于文檔中被用戶高亮的部分（比如使用鼠標或其他選擇設 備選中的部分）。
-
css聲明的優(yōu)先級
選擇器的特殊性
選擇器的特殊性由選擇器本身的組件確定害碾，特殊性值表述為4個部分矢劲，如 0,0,0,0
一個選擇器的具體特殊性如下確定：
1. 對于選擇器中給定的ID屬性值，加 0,1,0,0
2. 對于選擇器中給定的各個類屬性慌随，屬性選擇芬沉，或偽類，加 0,0,1,0
3. 對于選擇器中的給定的各個元素和偽元素阁猜，加0,0,0,1
4. 通配符選擇器的特殊性為0,0,0,0
5. 結合符對選擇器特殊性沒有一點貢獻
6. 內聯(lián)聲明的特殊性都是1,0,0,0
7. 繼承沒有特殊性特殊性 1,0,0,0 大于所有以0開頭的特殊性(不進位) 選擇器的特殊性最終都會授予給其對應的聲明 如果多個規(guī)則與同一個元素匹配丸逸，而且有些聲明互相沖突時，特殊性越大的越占優(yōu)勢 注意：id選擇器和屬性選擇器 div[id="test"]（0,0,1,1） 和 #test（0,1,0,0） 重要聲明 有時某個聲明比較重要剃袍，超過了所有其他聲明黄刚，css2.1就稱之為重要聲明 并允許在這些聲明的結束分號之前插入 !important 來標志 必須要準確的放置 !important 否則聲明無效。 !important 總是要放在聲明的最后笛园，即分號的前面 標志為 !important的聲明并沒有特殊的特殊性值隘击，不過要與非重要聲明分開考慮侍芝。 實際上所有的重要聲明會被瀏覽器分為一組研铆，重要聲明的沖突會在其內部解決 非重要聲明也會被分為一組，非重要聲明的沖突也會在其內部解決 如果一個重要聲明與非重要聲明沖突州叠，勝出的總是重要聲明 繼承 繼承沒有特殊性棵红，甚至連0特殊性都沒有 0特殊性要比無特殊性來的強 來源 css樣式的來源大致有三種 創(chuàng)作人員 讀者 用戶代理 權重： 讀者的重要聲明 創(chuàng)作人員的重要聲明 創(chuàng)作人員的正常聲明 讀者的正常聲明 用戶代理的聲明 層疊 1.找出所有相關的規(guī)則，這些規(guī)則都包含一個選擇器 2.計算聲明的優(yōu)先級 先按來源排序 在按選擇器的特殊性排序 最終按順序
自定義字體和字體圖標
自定義字體
@font-face
字體圖標
1.制作一套矢量圖
2.將矢量圖與字符進行綁定
3.使用工具或者站點生成一套字體
4.最終使用
字體兼容處理網(wǎng)站
[https://www.fontsquirrel.com/tools/webfont-generator]()
icomoon字體圖標
[https://icomoon.io/#home]()
新的UI方案
一.文本新增樣式
- 文本陰影
text-shadow用來為文字添加陰影咧栗，而且可以添加多層逆甜，陰影值之間用逗號隔開。（多個陰影時致板，第一個陰影在最上邊）
默認值：none 不可繼承
值
<color>
可選交煞。可以在偏移量之前或之后指定斟或。如果沒有指定顏色素征，則使用UA（用戶代理）選擇的顏色。
<offset-x> <offset-y>
必選。這些長度值指定陰影相對文字的偏移量御毅。
<offset-x> 指定水平偏移量根欧，若是負值則陰影位于文字左邊。
<offset-y> 指定垂直偏移量端蛆，若是負值則陰影位于文字上面凤粗。
如果兩者均為0，則陰影位于文字正后方(如果設置了<blur- radius> 則會產(chǎn)生模糊效果)今豆。
<blur-radius>
可選嫌拣。這是 <length>值。如果沒有指定呆躲，則默認為0亭罪。
值越大，模糊半徑越大歼秽，陰影也就越大越淡
- 文字描邊
只有webkit內核才支持：-webkit-text-stroke（準確的來說不能算是css3的東西应役，但需要大家知道）
- 文字排版
direction:控制文字的方向
一定要配合unicode-bidi:bidi-override;來使用
text-overflow :確定如何向用戶發(fā)出未顯示的溢出內容信號。
它可以被剪切 clip燥筷，
顯示一個省略號（'...' ）
怎么溢出顯示省略號語句如下：
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
包裹區(qū)域必須不能讓子元素撐開
二箩祥、盒模型
- 盒模型新增樣式
1）box-shadow
關鍵字(內 外陰影)
length(x軸的偏移量)
length(y軸的偏移量)
length(模糊程度)
length(陰影面積)
color(陰影顏色)
如果元素同時設置了 border-radius ，陰影也會有圓角效果肆氓。多個陰影時和多個 text shadows 規(guī) 則相同(第一個陰影在最上面)袍祖。
默認值: none 不可繼承
值：
inset
默認陰影在邊框外。
使用inset后谢揪，陰影在邊框內蕉陋。
<offset-x> <offset-y>
這是頭兩個 <length> 值，用來設置陰影偏移量拨扶。
<offset-x> 設置水平偏移量凳鬓，如果是負值則陰影位于元素左邊。
<offset-y> 設置垂直偏移量患民，如果是負值則陰影位于元素上面缩举。
如果兩者都是0，那么陰影位于元素后面匹颤。
這時如果設置了<blur-radius> 或<spread-radius> 則有模糊效果仅孩。
<blur-radius>
這是第三個 <length> 值。值越大印蓖，模糊面積越大辽慕，陰影就越大越淡。
不能為負值赦肃。默認為0溅蛉，此時陰影邊緣銳利绞旅。
<spread-radius>
這是第四個 <length> 值。取正值時温艇，陰影擴大因悲；取負值時，陰影.收縮勺爱。默認為0晃琳，此時陰影與元素同樣大。
<color>
陰影顏色琐鲁，如果沒有指定卫旱，則由瀏覽器決定
2）text-shadow
length(x軸的偏移量)
length(y軸的偏移量)
length(模糊程度)
color(陰影顏色)
- 倒影（webkit內核 文字描邊 背景鏤空）
漸變倒影
-webkit-box-reflect 設置元素的倒影（準確的來說不能算是css3的東西，但需要大家知道）
默認值:none 不可繼承
值：（必須是123的順序）
倒影的方向
第一個值围段，above, below, right, left
倒影的距離
第二個值顾翼，長度單位
漸變
第三個值 - resize
CSS 屬性允許你控制一個元素的可調整大小性。
（一定要配合overflow：auto使用）
默認值：none 不可繼承
值：
none
元素不能被用戶縮放奈泪。
both
允許用戶在水平和垂直方向上調整元素的大小适贸。
horizontal
允許用戶在水平方向上調整元素的大小。
vertical
允許用戶在垂直方向上調整元素的大小涝桅。 - box-sizing
border-box：代表元素上設置的width和height表示的是border-box尺寸
content-box：代表元素上設置的width和height表示的是content-box尺寸(默認值)
三拜姿、新增UI樣式
-
圓角border-radius
傳統(tǒng)的圓角生成方案，必須使用多張圖片作為背景圖案
CSS3圓角的出現(xiàn)冯遂，使得我們再也不必浪費時間去制作這些圖片了蕊肥，而且還有其他多個優(yōu)點：- 減少維護的工作量。圖片文件的生成蛤肌、更新壁却、編寫網(wǎng)頁代碼，這些工作都不再需要了裸准。
- 提高網(wǎng)頁性能展东。由于不必再發(fā)出多余的HTTP請求，網(wǎng)頁的載入速度將變快狼速。
- 增加視覺可靠性琅锻。某些情況下（網(wǎng)絡擁堵卦停、服務器出錯向胡、網(wǎng)速過慢等等）惊完，背景圖片會下載失敗，導致視覺效果不佳拇派。CSS3就不會發(fā)生這種情況
border-radius
用來設置邊框圓角荷辕。當使用一個半徑時確定一個圓形件豌；當使用兩個半徑時確定一個橢圓，這個(橢)圓與邊框的交集形成圓角效果茧彤。
默認值 : 0 不可繼承
值：
固定的px值定義圓形半徑或橢圓的半長軸骡显，半短軸曾掂。不能用負值
使用百分數(shù)定義圓形半徑或橢圓的半長軸珠洗，半短軸。水平半軸相對于盒模型的寬度蝴猪；垂直半軸相對于盒模型的高度膊爪。不能用負值
這是一個簡寫屬性蚁飒，用來設置
border-top-left-radius,
border-top-right-radius,
border-bottom-right-radius 淮逻，
border-bottom-left-radius
半徑的第一個語法取值可取1~4個值:
border-radius: radius
border-radius: top-left-and-bottom-right top-right-and-bottom-left
border-radius: top-left top-right-and-bottom-left bottom-right
border-radius: top-left top-right bottom-right bottom-left
半徑的第二個語法取值也可取1~4個值
border-radius: (first radius values) / radius
border-radius: (first radius values) / top-left-and-bottom-right top-right-and-bottom-left
border-radius: (first radius values) / top-left top-right-and-bottom-left bottom-right
border-radius: (first radius values) / top-left top-right bottom-right bottom-left
注意
百分比值
在舊版本的 Chrome 和 Safari 中不支持爬早。(fixed in Sepember 2010)
在 11.50 版本以前的 Opera 中實現(xiàn)有問題筛严。
Gecko 2.0 (Firefox 4) 版本前實現(xiàn)不標準：水平半軸和垂直半軸都相對于盒子模型的寬度。
在舊版本的 iOS (iOS 5 之前) 和 Android 中 (WebKit 532 之前) 不支持车胡。
-
層級
a.浮動提升半層匈棘，只有在浮動的情況下析命，才需要考慮元素分兩層 定位元素提一層 相對定位會在文檔流你有殘留 b.z-index為1怎么都會比a高;z-index為-1怎么都會比a低 -
包含塊
初始包含塊：和視窗大小位置尺寸一樣的矩形 滾動系統(tǒng)滾動條會不會影響初始包含塊的位置？ 會 禁止系統(tǒng)滾動條 html,body{ height:100%; overflow:hidden } 怎么解決ie6下固定定位失效的問題完域？ 用絕對定位來模擬固定定位 1.禁止系統(tǒng)滾動條 2.將滾動條作用在最外層的包裹器上或者在body上 3.因為移動包裹器或者body身上的滾動條并不會影響初始包含塊的位置 所以一個按照初始包含塊定位的元素就不會產(chǎn)生移動 邊框圖片
border-image CSS屬性允許在元素的邊框上繪制圖像筒主。這使得繪制復雜的外觀組件更加簡單乌妙，使用 border-image 時建钥，其將會替換掉 border-style 屬性所設置的邊框樣式
border-image-source: none
border-image-source 屬性定義使用一張圖片來代替邊框樣式熊经；如果只為none镐依，則仍然使用border-style 定義的樣式槐壳。默認值：none 不可繼承
border-image-slice: 100%
border-image-slice 屬性會通過規(guī)范將 border-image-source 的圖片明確的分割為9個區(qū)域：四個角，四邊以及中心區(qū)域雳攘。并可指定偏移量吨灭。默認值：100% 不可繼承喧兄。值得百分比參照于image本身０〕特幔！
border-image-width: 1
border-image-width 定義圖像邊框寬度蚯斯。 默認值：1 不可繼承
border-image-outset: none
border-image-outset屬性定義邊框圖像可超出邊框盒的大小。默認值：0 不可繼承遭赂。正值： 可超出邊框盒的大小
border-image-repeat: stretch
border-image-repeat 定義圖片如何填充邊框撇他±Ъ纾或為單個值篙程，設置所有的邊框随夸；或為兩個值，分別設置水平與垂直的邊框盆犁。默認值：stretch 不可繼承
值：
stretch （拉伸）
repeat谐岁，round（平鋪）
-
背景
css2 background-color 平鋪整個border-box background-image 默認從padding-box開始繪制榛臼，從border-box開始剪裁 css3中有多背景讽坏，默認繪制時尺寸是自己的位圖像素 background-repeat 控制平鋪與否 background-position 控制背景圖片在背景區(qū)域中的位置 px 百分比 參照于背景區(qū)域減去背景圖片的位圖像素值 background-attachment scroll：默認值路呜，背景圖不會隨著元素滾動條的滾動而滾動 fixed：背景圖鋪在視口中固定定位了 css3 background-origin: 設置背景的渲染的起始位置 border-box padding-box content-box background-clip:設置背景裁剪位置 background-size : 設置背景圖片大小 默認值：auto auto 不可繼承 值： 百分比： 指定背景圖片相對背景區(qū)（background positioning area）的百分比胀葱。背景區(qū)由 background-origin設置抵屿，默認為盒模型的內容區(qū)與內邊距 auto： 以背景圖片的比例縮放背景圖片轧葛。 注意： 單值時，這個值指定圖片的寬度求晶，圖片的高度隱式的為auto 兩個值: 第一個值指定圖片的寬度芳杏，第二個值指定圖片的高度 圖片是自適應的 漸變
CSS 漸變
是在 CSS3 Image Module 中新增加的圖片類型爵赵；使用 CSS 漸變可以在兩種顏色間制造出平滑的漸變效果. 用它代替圖片空幻，可以加快頁面的載入時間氛悬、減小帶寬占用如捅。同時，因為漸變是由瀏覽器直接生成的己肮，它在頁面縮放時的效果比圖片更好谎僻，因此你可以更加靈活艘绍、便捷的調整頁面布局诱鞠。
瀏覽器支持兩種類型的漸變：
線性漸變 (linear)航夺，通過 linear-gradient 函數(shù)定義
徑向漸變 (radial)崔涂，通過 radial-gradient 函數(shù)定義
- 線性漸變 (linear)
為了創(chuàng)建一個線性漸變，你需要設置一個起始點和一個方向（指定為一個角度）汛闸。你還要定義終止色蛉拙。終止色就是你想讓瀏覽器去平滑的過渡過去，并且你必須指定至少兩種苞尝，當然也會可以指定更多的顏色去創(chuàng)建更復雜的漸變效果宙址。
- 默認從上到下發(fā)生漸變
linear-gradient(red,blue);
- 改變漸變方向：（top bottom left right）
linear-gradient(to 結束的方向,red,blue);
- 使用角度
linear-gradient(角度,red,blue);
- 顏色節(jié)點的分布（第一個不寫為0%抡砂，最后一個不寫為100%）
linear-gradient(red 長度或者百分比,blue 長度或者百分比);
- 重復漸變
repeating-linear-gradient(60deg,red 0,blue 30%);
- 徑向漸變 (radial)
radial-gradient() 函數(shù)創(chuàng)建一個<image>注益，用來展示由原點（漸變中心）輻射開的顏色漸變
-
默認均勻分布
radial-gradient(red,blue);
-
不均勻分布
radial-gradient(red 50%,blue 70%);
-
改變漸變的形狀
radial-gradient(circle ,red,blue)
circle
ellipse（默認為橢圓）
漸變形狀的大小
radial-gradient(closest-corner circle ,red,blue)
closest-side 最近邊
farthest-side 最遠邊
closest-corner 最近角
farthest-corner 最遠角 （默認值）
- 改變圓心
radial-gradient(closest-corner circle at 10px 10px,red,blue);
-
如何實現(xiàn)一張圖片的垂直水平居中
body{ text-align: center; } body:after{ content: ""; display: inline-block; height: 100%; vertical-align: middle; } img{ vertical-align: middle; }另一種方案：
img{ position:absolute left:0 right:0 bottom:0 top:0 margin:auto }再一種
*{ margin: 0; padding: 0; } div{ width: 200px; height: 200px; background: pink; position: absolute; left: 50%; top: 50%; margin-left: -100px; margin-top: -100px; }
過渡（transition）
transition：
眾所周知丑搔，css效率極高啤月，其變化的過程往往都是在一瞬間完成谎仲，速度極快郑诺。
CSS transition 提供了一種在更改CSS屬性時控制動畫速度的方法间景。 其可以讓屬性變化成為一個持續(xù)一段時間的過程倘要，而不是立即生效的封拧。比如，將一個元素的顏色從白色改為黑色曹铃，通常這個改變是立即生效的陕见，使用 CSS transitions 后該元素的顏色將逐漸從白色變?yōu)楹谏捞穑凑找欢ǖ那€速率變化忍坷。這個過程可以自定義
簡寫屬性transition:
transition是一個簡寫屬性佩研，用于 transition-property,transition-duration,transition-timing-function, 和transition-delay旬薯。
CSS 過渡 由簡寫屬性 transition 定義是最好的方式袍暴，可以避免屬性值列表長度不一，節(jié)省調試時間
默認值：
transition-delay: 0s
transition-duration: 0s
transition-property: all
transition-timing-function: ease
注意：
在transition屬性中淋样，各個值的書寫順序是很重要的：第一個可以解析為時間的值會被賦值給transition-duration趁猴，第二個可以解析為時間的值會被賦值給transition-delay
推薦書寫順序
過渡時間 過渡樣式 過渡形式 延遲時間 [儡司，過渡時間 過渡樣式 過渡形式 延遲時間]
兼容性
transition 可以不用廠商前綴捕犬，不過鑒于標準剛剛穩(wěn)定，對于基于 Webkit的瀏覽器仍然需要廠商前綴柴钻。如果想兼容舊版本的瀏覽器那么也需要廠商前綴（例如Firefox 15 及之前版本, Opera 12 及之前版本)
- transition-property ：指定應用過渡屬性的名稱(寬度贴届、高度等)
默認值為 all毫蚓，表示所有可被動畫的屬性都表現(xiàn)出過渡動畫(https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_animated_properties)
可以指定多個 property
屬性值：
none
沒有過渡動畫绍些。
all
所有可被動畫的屬性都表現(xiàn)出過渡動畫。
IDENT
屬性名稱 （可以指定多個）
- transition-duration：屬性以秒或毫秒為單位指定過渡動畫所需的時間袖订。
默認值為 0s 洛姑，表示不出現(xiàn)過渡動畫楞艾。（0也要帶單位）
可以指定多個時長硫眯，每個時長會被應用到由 transition-property 指定的對應屬性上两入。如果指定的時長個數(shù)小于屬性個數(shù)裹纳，那么時長列表會重復阻星。如果時長列表更長恨狈，那么該列表會被裁減。兩種情況下弦讽，屬性列表都保持不變。
屬性值
以毫秒或秒為單位的數(shù)值
<time> 類型蔼囊。表示過渡屬性從舊的值轉變到新的值所需要的時間岳悟。
如果時長是 0s 堆缘，表示不會呈現(xiàn)過渡動畫斗这，屬性會瞬間完成轉變极舔。
不接受負值溪掀。一定要加單位(不能寫0 一定要寫0s 1s,0s,1s)喊递！
- transition-timing-function：
CSS屬性受到 transition的影響玲献，會產(chǎn)生不斷變化的中間值抹锄，而 CSS transition-timing-function 屬性用來描述這個中間值是怎樣計算的伙单。實質上吻育，通過這個函數(shù)會建立一條加速度曲線布疼，因此在整個transition變化過程中游两，變化速度可以不斷改變
默認值：ease
你可以規(guī)定多個timing function,通過使用 transition-property屬性贱案，可以根據(jù)主列表(transition property的列表)給每個CSS屬性應用相應的timing function.如果timing function的個數(shù)比主列表中數(shù)量少宝踪，缺少的值被設置為初始值（ease） 瘩燥。如果timing function比主列表要多，timing function函數(shù)列表會被截斷至合適的大小服鹅。這兩種情況下聲明的CSS屬性都是有效的菱魔。
屬性值：
1澜倦、ease：（加速然后減速）默認值藻治，ease函數(shù)等同于貝塞爾曲線(0.25, 0.1, 0.25, 1.0).
2桩卵、linear：（勻速）雏节，linear 函數(shù)等同于貝塞爾曲線(0.0, 0.0, 1.0, 1.0).
3钩乍、ease-in：(加速)寥粹，ease-in 函數(shù)等同于貝塞爾曲線(0.42, 0, 1.0, 1.0).
4涝涤、ease-out：（減速）阔拳，ease-out 函數(shù)等同于貝塞爾曲線(0, 0, 0.58, 1.0).
5衫生、ease-in-out：（加速然后減速）罪针，ease-in-out 函數(shù)等同于貝塞爾曲線(0.42, 0, 0.58, 1.0)
6、cubic-bezier： 貝塞爾曲線
7墓阀、step-start：等同于steps(1,start)
step-end：等同于steps(1,end)
steps(<integer>,[,[start|end]]?)
第一個參數(shù)：必須為正整數(shù)斯撮，指定函數(shù)的步數(shù)
第二個參數(shù)：指定每一步的值發(fā)生變化的時間點（默認值end）
- transition-delay：屬性規(guī)定了在過渡效果開始作用之前需要等待的時間勿锅。
默認值：0s
你可以指定多個延遲時間溢十，每個延遲將會分別作用于你所指定的相符合的css屬性荒典。如果指定的時長個數(shù)小于屬性個數(shù)寺董，那么時長列表會重復遮咖。如果時長列表更長盯滚，那么該列表會被裁減魄藕。兩種情況下，屬性列表都保持不變
屬性值
值以秒（s）或毫秒（ms）為單位寝姿，表明動畫過渡效果將在何時開始饵筑。取值為正時會延遲一段時間來響應過渡效果根资；取值為負時會導致過渡立即開始玄帕。
- 檢測過渡是否完成
當過渡完成時觸發(fā)一個事件裤纹，在符合標準的瀏覽器下锡移，這個事件是 transitionend, 在 WebKit 下是 webkitTransitionEnd
（每一個擁有過渡的屬性在其完成過渡時都會觸發(fā)一次transitionend事件）
transtionend事件（DOM2）
在每個屬性完成過渡時都會觸發(fā)這個事件
當屬性值的列表長度不一致時
跟時間有關的重復列表
transition-timing-function使用默認值
在transition完成前設置 display: none罩抗，事件同樣不會被觸發(fā)
2D變換：transform
- 旋轉（rotate）
transform:rotate(angle); 只能轉一次
正值:順時針旋轉 rotate(360deg)
負值:逆時針旋轉 rotate(-360deg)
只能設單值。正數(shù)表示順時針旋轉操刀，負數(shù)表示逆時針旋轉
- 平移（translate）
X方向平移:transform: translateX(tx)
Y方向平移:transform: translateY(ty)
二維平移：transform: translate(tx[, ty])骨坑； 如果ty沒有指定，它的值默認為0柬采。
可設單值欢唾，也可設雙值。
正數(shù)表示XY軸正向位移粉捻，負數(shù)為反向位移礁遣。設單值表示只X軸位移，Y軸坐標不變祟霍，
例如transform: translate(100px);等價于transform: translate(100px,0);
- 傾斜（skew）
transform:skewX(45deg);
X方向傾斜:transform: skewX(angle)
skewX(45deg):參數(shù)值以deg為單位 代表與y軸之間的角度
Y方向傾斜:transform: skewY(angle)
skewY(45deg):參數(shù)值以deg為單位 代表與x軸之間的角度
二維傾斜:transform: skew(ax[, ay]); 如果ay未提供，在Y軸上沒有傾斜
skew(45deg,15deg):參數(shù)值以deg為單位 第一個參數(shù)代表與y軸之間的角度
第二個參數(shù)代表與x軸之間的角度
單值時表示只X軸扭曲盈包，Y軸不變沸呐，如transform: skew(30deg);等價于 transform: skew(30deg, 0);
考慮到可讀性，不推薦用單值呢燥，應該用transform: skewX(30deg);崭添。skewY表示 只Y軸扭曲，X軸不變
正值:拉正斜杠方向的兩個角
負值:拉反斜杠方向的兩個角
4）縮放（scale）
transform:scale(2);
X方向縮放:transform: scaleX(sx);
Y方向縮放:transform: scaleY(sy);
二維縮放 :transform: scale(sx[, sy]); (如果sy 未指定叛氨，默認認為和sx的值相同)
要縮小請設0.01～0.99之間的值滥朱，要放大請設超過1的值。
例如縮小一倍可以transform: scale(.5);
放大一倍可以transform: scale(2);
如果只想X軸縮放力试，可以用scaleX(.5)相當于scale(.5, 1)。
同理只想Y軸縮放排嫌，可以用scaleY(.5)相當于scale(1, .5)
正值:縮放的程度
負值:不推薦使用（有旋轉效果）
單值時表示只X軸,Y軸上縮放粒度一樣畸裳，如transform: scale(2);等價于transform: scale(2,2);
基點的變換
transform-origin
transform-origin CSS屬性讓你更改一個元素變形的基點。矩陣（matrix） 了解
在 2D變換 中淳地，矩陣變換函數(shù) matrix() 接受 6個值怖糊，語法形式如下：
transform: matrix(a, b, c, d, e, f);
這相當于帅容，對元素應用一個如下的變換矩陣：
點(Xi,Yi,1)進行變換后的新坐標
即根據(jù)變換矩陣進行變換之后點 (xi,yi) 的坐標是(axi+cyi+e,bxi+dyi+f)
變換的天坑：
a.過渡只關系元素的初始狀態(tài)和結束狀態(tài)，沒有方法可以獲取元素在過渡中每一幀的狀態(tài)
b.元素在初次渲染還沒有結束的時候伍伤，是沒有辦法觸發(fā)過渡的
c.在絕大部分變換樣式的切換時并徘，變換組合的個數(shù)或位置不一樣時，是沒有辦法觸發(fā)過渡的
3D變換：transform
在瀏覽器中扰魂，X軸是從左到右麦乞，Y軸是從上到下，Z軸是從里到外
- 3D旋轉
CSS3中的3D旋轉主要包括四個功能函數(shù)
rotateX(angle)劝评、
rotateY(angle)姐直、
rotateZ(angle)、等價于rotate(angle)
rotate3d(x,y,z,angle)
x, y, z分別接受一個數(shù)值(number),用來計算矢量方向(direction vector)蒋畜，矢量方向是三維空間中的一條線, 從坐標系原點到x, y, z值確定的那個點声畏，元素圍繞這條線旋轉angle指定的值
- 3D平移
transform: translateZ(length)是3D Transformaton特有的，其他兩個2D中就有
translateZ 它不能是百分比 值; 那樣的移動是沒有意義的姻成。
transform: translate3d(translateX,translateY,translateZ);
translateZ 它不能是百分比 值; 那樣的移動是沒有意義的插龄。
- 3D縮放
transform: scaleZ(number)
transform: scale3d(scaleX,scaleY,scaleZ);
如果只設置scaleZ(number)，你會發(fā)現(xiàn)元素并沒有被擴大或壓縮科展，scaleZ(number)需要和translateZ(length)配合使用均牢，number乘以length得到的值，是元素沿Z軸移動的距離辛润，從而使得感覺被擴大或壓縮
-
景深（perspective）（作用給子元素）:
景深（英語：Depth of field, DOF）景深是指相機對焦點前后相對清晰的成像范圍膨处。
簡單的理解，景深就是我們的肉眼距離顯示器的距離砂竖，景深越大真椿，元素離我們越遠，效果就不好乎澄，在我們CSS3中突硝，perspective用于激活一個3D空間，屬性值就是景深大兄眉谩（默認none無景深）
應用景深的元素稱為“舞臺元素”解恰，舞臺元素的所有后代元素都會受影響，（如果后代元素中也添加了perspective屬性浙于，效果會疊加而不是覆蓋）
景深:讓3D場景有近大遠小的效果（我們肉眼距離屏幕的距離）
是一個不可繼承屬性护盈，但他可以作用于后代元素（不是作用于本身的）
原理：
景深越大 滅點越遠 元素變形更小
景深越小 滅點越近 元素變形更大
transform: perspective(depth);
depth的默認值是none，可以設置為一個長度值羞酗，這個長度是沿著Z軸距離坐標原點的距離腐宋。1000px被認為是個正常值
若使用perspective()函數(shù)，那么他必須被放置在transform屬性的首位，如果放在其他函數(shù)之后胸竞，則會被忽略
perspective: depth;
同perspective()函數(shù)一樣欺嗤，depth的默認值是none，可以設置為一個長度值卫枝，這個長度是沿著Z軸距離坐標原點的距離煎饼。他們唯一的區(qū)別是，perspective屬性是被用于元素的后代元素校赤，而不是元素本身吆玖；就是說，為某個元素設置perspective屬性后痒谴，是對這個元素的子元素起作用衰伯，而不是這個元素本身。
perspective-origin（景深的原點位置积蔚，即滅點位置）
同perspective屬性意鲸，也是設置在父元素上，對后代元素起作用尽爆。 這個屬性來設置你在X, Y軸坐標確定的那個點來看這個元素怎顾，Z軸是被perspective屬性設置的
- transform-style
營造有層級的3d舞臺，是一個不可繼承屬性漱贱，他作用于子元素
這個屬性指定了子元素如何在空間中展示槐雾，只有兩個屬性值：flat（默認）和preserve-3d
flat 表示所有子元素在2D平面呈現(xiàn)，
preserve-3d 表示所有子元素在3D平面呈現(xiàn)幅狮，
如果被扁平化募强，則子元素不會獨立的存在于三維空間。
因為該屬性不會被（自動）繼承崇摄，所以必須為元素所有非葉后代節(jié)點設置該屬性擎值。
- backface-visibility
backface-visibility屬性用來設置，是否顯示元素的背面逐抑，默認是顯示的鸠儿。
backface-visibility: keyword;
keyword有兩個值，hidden和visible厕氨，默認值是visible进每。
動畫
人類具有視覺暫留的特性，人的眼睛在看到一幅畫或一個物體后命斧，在0.34秒內不會消失田晚。
動畫原理：
通過把人物的表情、動作国葬、變化等分解后畫成許多動作瞬間的畫幅肉瓦，利用視覺暫留的原理遭京，
在一幅畫還沒有消失前，播放下一幅畫泞莉。就會給人造成一種流暢的視覺變化效果。
css3動畫
使元素從一種樣式逐漸變化為另一種樣式的效果
animation屬性是一個簡寫屬性形式: （可以用來描述可動畫的屬性）
可動畫屬性的列表：
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
簡寫屬性animation
animation：
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state
在每個動畫定義中船殉，順序很重要：可以被解析為 <time>的第一個值被分配給animation-duration, 第二個分配給 animation-delay鲫趁。
- animation-name: animiationName
animation-name屬性指定應用的一系列動畫，每個名稱代表一個由@keyframes定義的動畫序列
值:
none
特殊關鍵字利虫，表示無關鍵幀挨厚。
keyframename
標識動畫的字符串
@keyframes語法：
@keyframes animiationName{
keyframes-selector{
css-style;
}
}
animiationName:必寫項，定義動畫的名稱
keyframes-selector：必寫項糠惫，動畫持續(xù)時間的百分比
from：0%
to：100%
css-style：css聲明
- animation-duration （改變關鍵幀的執(zhí)行方向疫剃，還會影響animation-timing-function的形式）
animation-duration屬性指定一個動畫周期的時長。
默認值為0s硼讽，表示無動畫巢价。
值
一個動畫周期的時長，單位為秒(s)或者毫秒(ms)固阁，無單位值無效壤躲。
注意：負值無效，瀏覽器會忽略該聲明备燃，但是一些早起的帶前綴的聲明會將負值當作0s
- animation-timing-function
animation-timing-function屬性定義CSS動畫在每一動畫周期中執(zhí)行的節(jié)奏碉克。
對于關鍵幀動畫來說，timing function作用于一個關鍵幀周期而非整個動畫周期并齐，即從關鍵幀開始漏麦，到關鍵幀結束。
動畫的默認效果：由慢變快再變慢
linear:線性過渡况褪，等同于貝塞爾曲線（0,0,1,1）
ease:平滑過渡撕贞，等同于貝塞爾曲線（0.25,0.1,0.25,1.0）
ease-in:由慢到快，等同于貝塞爾曲線（0.42,0,1,1）
ease-out:由快到慢窝剖，等同于貝塞爾曲線（0,0,0.58,1 ）
ease-in-out:由慢到快再到慢麻掸，等同于貝塞爾曲線（0.42,0,0.58,1）
cubic-bezier(1,1,2,3)
steps(n,[start|end])
傳入一到兩個參數(shù)，第一個參數(shù)意思是把動畫分成 n 等分赐纱，然后動畫就會平均地運行脊奋。
第二個參數(shù) start 表示從動畫的開頭開始運行，相反疙描，end 就表示從動畫的結尾開始運行诚隙，
默認值為 end。
- animation-delay
定義動畫開始前等待的時間,以秒或毫秒計(屬于動畫外的范疇)
值:
<time>
從動畫樣式應用到元素上到元素開始執(zhí)行動畫的時間差起胰。該值可用單位為秒(s)和毫秒(m s)久又。如果未設置單位巫延，定義無效 - animation-iteration-count （重復的是關鍵幀）
定義了動畫執(zhí)行的次數(shù)（屬于動畫內的范疇,只作用于動畫內的屬性）
值
infinite
無限循環(huán)播放動畫.
<number>
動畫播放的次數(shù) 不可為負值. - animation-direction
定義了動畫執(zhí)行的方向
值
normal
每個循環(huán)內動畫向前循環(huán)，換言之地消，每個動畫循環(huán)結束炉峰，動畫重置到起點重新開始， 這是默認屬性脉执。
alternate
動畫交替反向運行疼阔，反向運行時，動畫按步后退半夷，同時婆廊，帶時間功能的函數(shù)也反向， 比如巫橄，ease-in 在反向時成為ease-out淘邻。計數(shù)取決于開始時是奇數(shù)迭代還是偶數(shù)迭代
reverse（反轉的 也是關鍵幀）
反向運行動畫，每周期結束動畫由尾到頭運行湘换。
alternate-reverse
反向交替宾舅， 反向開始交替 - animation-fill-mode
屬于動畫外的范疇，定義動畫在動畫外的狀態(tài)
1.animation-fill-mode: none
2.animation-fill-mode: backwards
backwards：from之前的狀態(tài)與form的狀態(tài)保持一致
3.animation-fill-mode: forwards
forwards：to之后的狀態(tài)與to的狀態(tài)保持一致
4.animation-fill-mode: both
botn：backwards+forwards - animation-play-state
定義了動畫執(zhí)行的運行和暫停
值
running
當前動畫正在運行枚尼。
paused
當前動畫以被停止贴浙。
flex布局
steps(num,[start/end])
num:拆成多少步（當嗎num為12時，整個動畫最好有13幀）
start：看不見第一幀
end：看不見最后一幀
transform只能使用在塊級元素上Ｊ鸹小Ｆ槔！！
flex捋一捋
0.flex frog練習
http://flexboxfroggy.com/
1.flex基礎點
---什么是容器盯质，什么是項目袁串，什么是主軸，什么是側軸呼巷？
---項目永遠排列在主軸的正方向上
---flex分新舊兩個版本
-webkit-box
-webkit-flex / flex
2.注意點
---我們都知道新版本的flex要比老版本的flex強大很多囱修，有沒有必要學習老版本的flex？
移動端開發(fā)者必須要關注老版本的flex
因為很多移動端設備內核低只老版本的flex
---老版本的box通過兩個屬性四個屬性值控制了主軸的位置和方向
新版本的flex通過一個屬性四個屬性值控制了主軸的位置和方向
3.老版本
容器
容器的布局方向
-webkit-box-orient:horizontal/vertical
控制主軸是哪一根
horizontal：x軸
vertical ：y軸
容器的排列方向
-webkit-box-direction：normal/reverse
控制主軸的方向
normal：從左往右（正方向）
reverse：從右往左（反方向）
富酝鹾罚空間的管理
只決定富云屏空間的位置，不會給項目區(qū)分配空間
主軸
-webkit-box-pack
主軸是x軸
start：在右邊
end: 在左邊
center：在兩邊
justify：在項目之間
主軸是y軸
start：在下邊
end：在上邊
center：在兩邊
justify：在項目之間
側軸
-webkit-box-algin
側軸是x軸
start：在右邊
end： 在左邊
center：在兩邊
側軸是y軸
start：在下邊
end： 在上邊
center：在兩邊
項目
彈性空間管理
-webkit-box-flex：彈性因子（默認值為0）
4.新版本
容器
容器的布局方向
容器的排列方向
flex-direction
控制主軸是哪一根压储，控制主軸的方向
row; 從左往右的x軸
row-reverse;從右往左的x軸
column; 從上往下的y軸
column-reverse;從下往上的y軸
富韵输觯空間的管理
只決定富裕空間的位置集惋，不會給項目區(qū)分配空間
主軸
justify-content
flex-start： 在主軸的正方向
flex-end: 在主軸的反方向
center： 在兩邊
space-between： 在項目之間
space-around： 在項目兩邊
側軸
align-items
flex-start：在側軸的正方向
flex-end： 在側軸的反方向
center： 在兩邊
base#ne 基線對齊
stretch 等高布局（項目沒有高度）
項目
彈性空間管理
flex-grow：彈性因子（默認值為0）
flex-grow：
可用空間 = (容器大小 - 所有相鄰項目flex-basis的總和)
可擴展空間 = (可用空間/所有相鄰項目flex-grow的總和)
每項伸縮大小 = (伸縮基準值 + (可擴展空間 x flex-grow值))
5.新版本新增的
容器
flex-wrap：控制的是側軸的方向
nowrap 不換行
wrap 側軸方向由上而下 （flex-shrink失效）
wrap-reverse 側軸方向由下而上 （flex-shrink失效）
align-content：多行/列時側軸富栽兴疲空間的管理（把多行/列看成一個整體）
flex-flow：flex-direction和flex-wrap的簡寫屬性
本質上控制了主軸和側軸分別是哪一根，以及他們的方向
項目
order:控制項目的排列順序
align-self：項目自身富怨涡蹋空 間的管理
flex-shrink：收縮因子（默認值為1）
flex-basis：伸縮規(guī)則計算的基準值（默認拿width或height的值）
6.伸縮規(guī)則
flex-basis（默認值為auto）
flex-grow（默認值為0）
可用空間 = (容器大小 - 所有相鄰項目flex-basis的總和)
可擴展空間 = (可用空間/所有相鄰項目flex-grow的總和)
每項伸縮大小 = (伸縮基準值flex-basis + (可擴展空間 x flex-grow值))
flex-shrink（默認值為1）
--.計算收縮因子與基準值乘的總和
var a = 每一項flex-shrink*flex-basis之和
--.計算收縮因數(shù)
收縮因數(shù)=（項目的收縮因子*項目基準值）/第一步計算總和
var b = (flex-shrink*flex-basis)/a
--.移除空間的計算
移除空間= 項目收縮因數(shù) x 負溢出的空間
var c = b * 溢出的空間
7.側軸富院砑溃空間的管理
單行單列
align-items
align-self（優(yōu)先級高）
多行多列
align-content
8.flex的簡寫屬性
flex:1 (flex-basis:0% flex-grow:1 flex-shrink:1)
等分布局
響應式布局核心 CSS3媒體查詢選擇器
@media 媒體類型 and(關鍵字) 帶條件的媒體屬性 and 帶條件的媒體屬性 {
//規(guī)則
}
媒體類型
all
screen
print
媒體屬性
width：瀏覽器的窗口尺寸
device-width：設備尺寸
device-pixel-ratio（必須加webkit前綴）：像素比
---以上三個媒體屬性可加 min 和 max 前綴
min：最小值為誰
max：最大值為誰
橫豎屏切換
orientation：landscape（橫屏）
orientation：portrait （豎屏）
關鍵字
only：處理瀏覽器盡量問題
老版本的瀏覽器只支持媒體類型养渴，不支持帶媒體屬性的查詢
@media screen{} @media only{}
and：連接一條查詢規(guī)則
,：連接多條查詢規(guī)則
not：取反
多列布局
規(guī)范
HTML
什么叫html5? 是一個強大的技術集（html5 ~ html+css+js）
CSS
什么是css3？
css3其實就是html5的一部分泛烙，而且現(xiàn)代前端中已經(jīng)沒有版本的概念理卑，都是級別
JS
ECMASCRIPT
DOM
BOM（沒有規(guī)范，window）
預處理器（less）
變量
@
變量的延遲加載
變量是塊級作用域
嵌套
&:平級
混合
什么是混合胶惰？
將一系列的規(guī)則集引入另一個規(guī)則集中（ctrl c+ctrl v）
混合的定義在less規(guī)則有明確的指定傻工，使用.的形式來定義
普通混合（編譯到原生css中的）
不帶輸出的混合（加雙括號）
帶參數(shù)的混合
帶默認值的混合
匹配模式
arguments
計算
加減乘除 計算的一方帶單位就可以
繼承
