（這是15年初學(xué)css時(shí)記的筆記）
選擇器
簡(jiǎn)單選擇器
標(biāo)簽選擇器
直接把標(biāo)簽名加前面。
類選擇器
用.+ className選擇。className必須以字母開頭，區(qū)分大小寫?？梢猿霈F(xiàn)多次。
id選擇器
用#+idName選擇。只出現(xiàn)一次。
通配符選擇器
用*可以選擇頁(yè)面中的所有元素。
屬性選擇器-[att]
用[]來選擇具有某些屬性的標(biāo)簽選中。
如[disabled]、[type=button]。
id選擇器就是屬性選擇器的一個(gè)特例#nav{} == [id=nav]{}
屬性選擇器-[att~=val]
用[att ~= val]來選擇屬性中包含某些值的標(biāo)簽，只要存在一個(gè)值就會(huì)被選中，值與值之間用空格來分隔。
類選擇器就是這種屬性選擇器的一個(gè)特例.sports{} == [class~=sports]{}
屬性選擇器-[att|=val]
用[att|=val]來選擇屬性中具有某些字符串片段的標(biāo)簽，只要字符串片段匹配到就會(huì)被選中。一般用在<p lang="">這種標(biāo)簽中。
屬性選擇器-[att^=val]
用[att^=val]來選擇以屬性中以某些字符開頭的標(biāo)簽。例如要分開選擇a標(biāo)簽中http地址與錨點(diǎn)兩種不同的屬性可以用[herf^="#"]來選中。
屬性選擇器-[att$=val]
用[att$=val]來選擇屬性以某些字符結(jié)尾的標(biāo)簽。比如a標(biāo)簽連接到了一個(gè)doc文檔和一個(gè)pdf文檔，如果要區(qū)分的選擇可以用[herf$=pdf]來選擇。
屬性選擇器-[att*=val]
用[att*=val]來選擇屬性中包含某些字符串的標(biāo)簽。
比如要選中a標(biāo)簽中g(shù)ame頻道與sport頻道的標(biāo)簽，可以用`[href*="game.163.com"]。
偽類選擇器
用a:link如果選擇a標(biāo)簽中的鏈接的標(biāo)簽。
用a:visited選擇已經(jīng)點(diǎn)進(jìn)去之后的鏈接。
用a:hover選擇鼠標(biāo)移上去的鏈接。
用a:active選擇鼠標(biāo)點(diǎn)擊時(shí)的鏈接。
:enabled選擇元素可用的狀態(tài)。
:disabled選擇元素不可用的狀態(tài)。
checked選擇單選框復(fù)選框這種用戶選中的元素。
用li:first-child選中一組子元素中的第一個(gè)。
用li:last-child選中一組子元素中的最后一個(gè)。
用li:nth-child(even)選中所有偶數(shù)項(xiàng)的子元素。
用li:nth-child(3n+1)選中4,7……位的子元素。
用li:nth-last-child(3n+1)選中倒數(shù)第4,7……位子元素。
用:only-child選中只有一個(gè)子元素的父元素。
用:first-of-type選中一類子元素中出現(xiàn)的第一個(gè)。
用:last-of-type選中一類子元素中的最后一個(gè)。
用:nth-of-type(even)選中一類子元素中的偶數(shù)項(xiàng)元素。
用:nth-last-of-type(2n)選中倒數(shù)的偶數(shù)項(xiàng)子元素。
用span:only-of-type選中一組父標(biāo)簽中僅有的那個(gè)span。
偽元素選擇器
如果要凸顯出類中的某個(gè)元素就要用偽元素選擇器。
推薦使用兩個(gè)冒號(hào)。
::first-letter
::first-letter{color:red;}選擇第一個(gè)元素。
::first-line
::first-line{}用于選擇頁(yè)面中第一行。
::before/after
::before{content:"…"} after{content:"…"}
這兩個(gè)偽元素選擇器用于在某些元素之前/之后插入一些內(nèi)容。
::selection
::selection偽元素選擇器用于被選中的內(nèi)容樣式?？梢愿倪x中內(nèi)容的顏色什么的。
組合選擇器
后代選擇器
如果只想選擇某一個(gè)div中全部的h2,可以用后代選擇器。
<div class="main">
<h2>標(biāo)題一</h2>
<div>
<h2>標(biāo)題二</h2>
<p>段落一</p>
</div>
</div>
.main h2{color:red};會(huì)將class為main的div中所有的h2選中。
子選擇器
如果只想選擇這個(gè)div子類中的h2選中，使用.main>h2{},這樣只會(huì)選中main這個(gè)div下一級(jí)子類的h2。
兄弟選擇器
<div>
<h2>標(biāo)題</h2>
<p>段落一</p>
<p>段落二</p>
</div>
如果要選中這段代碼中兩個(gè)緊挨著中的某個(gè)標(biāo)簽的樣式，使用兄弟選擇器。注意這個(gè)緊挨著的關(guān)系不是嵌套……
比如要只選擇h2下的第一個(gè)p，使用h2+p{color:red;}
如果要選擇h2下的所有p，使用h2~p{color: red;}
選擇器分組
如果有好多標(biāo)簽要套用統(tǒng)一的樣式，可以這么做：
h1,h2,h3{color:gray; font-family:sans-serif;}
繼承
在母元素上設(shè)置的樣式大部分可以自動(dòng)繼承到子元素。但是有幾個(gè)比較常見的例外：background、border、position
繼承的優(yōu)先級(jí)
計(jì)算方法
a = 行內(nèi)樣式
b = Id選擇器的數(shù)量
c = 類、偽類和屬性選擇器的數(shù)量
d = 標(biāo)簽選擇器和偽元素選擇器的數(shù)量
a>b>c>d 依次降低。
如果優(yōu)先級(jí)相同，后出現(xiàn)的會(huì)覆蓋掉之前出現(xiàn)的。
改變應(yīng)用樣式的先后順序的幾種方法：
- 改變同等級(jí)選擇器出現(xiàn)的先后順序。
- 提升選擇器的優(yōu)先級(jí)。
- 在某一項(xiàng)屬性之后加
!important關(guān)鍵字，這樣就會(huì)無視優(yōu)先級(jí)。
文本
font-size 文字大小
px、百分比、em什么的。
font-family 字體名稱
<generic-family>指一類字體，較為常用的只有兩種：serif、sans-serif（襯線體和非襯線體）。可用逗號(hào)分隔取多個(gè)值。
font-weight 字體加粗
值有normal普通、bold加粗。一般字體都支持400（普通），700（加粗）這兩檔。
font-style 字體傾斜
值有normal、italic傾斜、oblique當(dāng)字體沒設(shè)置斜體時(shí)強(qiáng)制傾斜，oblique一般不用。
line-height 行距
值有normal、number一般由瀏覽器決定，1.1~1.2左右、lengthpx,em、百分比。默認(rèn)行高是30px。如果設(shè)置行高為一個(gè)數(shù)字，行高則由字體大小的px乘以這個(gè)數(shù)字設(shè)置。
font 快速設(shè)置的font中的多個(gè)樣式
設(shè)置順序是：傾斜/加粗（可選） 字體大?。ū靥睿?行高（可選，添加前必須在前面添加一個(gè)“/”） 字體（必填，可填多個(gè)值）。如果順序錯(cuò)誤或必填項(xiàng)缺少，font設(shè)置將不起作用。
text-align 字體對(duì)齊方式
left right //左對(duì)齊 右對(duì)齊
center justify //居中 兩端對(duì)齊
vertical-align 垂直對(duì)齊
<table><caption style="text-align: center;">vertical的屬性</caption><tr><td>baseline</td><td>位于基線</td></tr><tr><td>sub</td><td>下標(biāo)</td></tr><tr><td>super</td><td>上標(biāo)</td></tr><tr><td>top</td><td>對(duì)齊到行高最高點(diǎn)</td></tr><tr><td>text-top</td><td>對(duì)齊到font-size最高點(diǎn)</td></tr><tr><td>middle</td><td>居中</td></tr><tr><td>bottom</td><td>對(duì)齊到行高最低點(diǎn)</td></tr><tr><td>text-bottom</td><td>文本最低點(diǎn)</td></tr><tr><td><percentage></td><td>以行高為參照的百分比</td></tr><tr><td><length></td><td>以baseline為起點(diǎn)，向上的px、em</td></tr></table>
text-indent 文本縮進(jìn)
<table><tr><td><length></td><td>可填em、px(如果是正數(shù)向后縮進(jìn))</td></tr><tr><td><percentage></td><td>以一行容器的寬度為單位縮進(jìn)百分比(正數(shù)向后縮)</td></tr></table>
white-space 空行、換行處理
用于設(shè)置換行不要保留，空格、tab要不要合并，是否要自動(dòng)換行。
pre-wrap會(huì)保留換行和空格，同時(shí)會(huì)自動(dòng)換行，所以比較常用。
<table><tr><th></th><th>換行(New Lines)</th><th>空格tab</th><th>自動(dòng)換行(Text Wrapping)</th></tr><tr><th>normal</th><td>collapse(折疊收縮)</td><td>collapse</td><td>wrap(自動(dòng)換行)</td></tr><tr><th>nowrap</th><td>collapse</td><td>collapse</td><td>no wrap(行滿不換行)</td></tr><tr><th>pre</th><td>preserve</td><td>preserve</td><td>no wrap</td></tr><tr><th>pre-wrap</th><td>preserve</td><td>preserve</td><td>wrap</td></tr><tr><th>pre-line</th><td>preserve</td><td>collapse</td><td>wrap</td></tr></table>
word-wrap 文本換行
<table><tr><td>normal</td><td>不換行</td> </tr> <tr><td>break-word</td> <td>自動(dòng)換行，中斷單詞</td> </tr></table>
word-break 斷詞
<table><tr><td>normal</td><td>單詞中間不允許斷掉</td></tr><tr><td>keep-all</td><td>單詞都不break</td> </tr><tr><td>break-all</td> <td>任意兩個(gè)詞都可以break掉</td></tr></table>
text-shadow 文字陰影
文字陰影可以不填。
<length>后接2到3個(gè)值。分別是x，y，虛化值。
<color>可選，不填就用字體顏色。
text-decoration 文本修飾
修飾可以不填。
underline、overline、lind-through三個(gè)不沖突，分別是下劃線上劃線中劃線。
text-overflow 文字溢出
這個(gè)屬性用來設(shè)置一行文字不能完全在一行顯示時(shí)后面接省略號(hào)的效果。如果使用了text-overflow一般來說后面兩個(gè)屬性也必須如下設(shè)置：
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
cursor 光標(biāo)設(shè)置
可以用圖片自定義鼠標(biāo)形狀，可以使用多個(gè)圖片。
后面可以接如下值[auto | default | none | help | pointer | zoom-in | zoom-out | move]
auto是自動(dòng)處理，未設(shè)置時(shí)的默認(rèn)樣式。
default是普通的箭頭光標(biāo)。
none讓光標(biāo)消失。
help帶個(gè)問號(hào)。
pointer是點(diǎn)連接的那個(gè)手指形狀。
zoom-in/out是縮小，放大鏡形狀。
move分向兩邊的箭頭，上下的箭頭。
當(dāng)自定義圖片失效是缺省使用pointer。
e.g.cursor:pointer; cursor:url(xx.cur), pointer;
inherit 強(qiáng)制繼承
不管父元素是什么，讓子元素繼承父元素的屬性值。
position
有多種定義方式可以設(shè)定標(biāo)簽的位置如何突破流的限制在全屏位置設(shè)置。有四種屬性：
absolute 絕對(duì)定位
元素原來的位置就不會(huì)保留，需要另外去指定原來的位置。
relative 相對(duì)定位
這會(huì)使元素偏移某一個(gè)距離，仍然保持原來的形狀，它原來占據(jù)的空間仍然會(huì)保留，這與absolute相反，但是會(huì)偏移一個(gè)距離。
static 靜態(tài)定位
元素框正常生成，快捷元素形成矩形框，作為文檔流的一部分，行內(nèi)元素會(huì)形成一個(gè)或多個(gè)行框放在父元素當(dāng)中。
fixed 固定的位置
表現(xiàn)為position設(shè)置為absolute，元素框原來的位置時(shí)不保留的，但是它的包含框是瀏覽器窗口本身，由窗口大小決定位置。
盒模型
從內(nèi)到外依次是
content,padding,border,margin。content = width * heightpadding,border,margin都有top,right,bottom,left四部分，從上開始順時(shí)針方向排列。
width、height
值多用像素和百分比來定義。百分比的參照物大多是它的父元素。
width的默認(rèn)值是auto。
引申：max-width、min-width。
height的語法與寬度一樣。默認(rèn)的height是內(nèi)容高度。
引申：max-height、min-height。
padding 填充
padding:[<length>|<percentage>]{1,4}
只填一個(gè)值就會(huì)上下左右都收縮。
padding填充值不足4個(gè)時(shí)就有值縮寫的效果。
padding: 20px; == padding: 20px 20px 20px 20px;
padding: 20px 10px; == padding: 20px 10px 20px 10px;//對(duì)稱排列
padding: 20px 10px 30px; == padding: 20px 10px 30px 10px;
對(duì)面相等，后面省略；四面相等，只填一個(gè)。
margin 外邊距
margin:[<length>|<percentage>|auto]{1,4}|inherit
這部分設(shè)置值的語法跟padding一樣。
margin合并
兩個(gè)元素的底部和上部都有margin的值的話會(huì)存在合并現(xiàn)象，這兩個(gè)元素之間的空間會(huì)取兩個(gè)margin的最大值。
父元素與第一個(gè)/最后一個(gè)子元素也存在margin合并的現(xiàn)象，會(huì)取margin的最大值。
水平居中
如果margin分配為auto的話瀏覽器會(huì)自動(dòng)平分兩邊多余的空間，會(huì)達(dá)到居中的效果。
border 邊框
border:[<border-width>||<border-style>||<border-color>]
border-width:[<length>]{1,4}
設(shè)置邊框線的寬度。
border-style:[soild(實(shí)線)|dashed(虛線)|dotted(點(diǎn))|...]{1,4}
設(shè)置邊框線的樣式，可以分別設(shè)置4個(gè)。
border-color:[<color>|transparent]{1,4}
默認(rèn)顏色是字體顏色，默認(rèn)width是中等。
可以用border:來分別設(shè)置上下左右邊框。
border-radius 邊框圓角
分別設(shè)置四個(gè)角的效果：top-left，top-right，bottom-right，bottom-left。
border-radius:[<length>|<percentage>]{1,4}[/[<length>|<percentage>]{1,4}]?
前面四個(gè)值表示x方向上的半徑，后四個(gè)值表示y方向上的半徑。后四個(gè)值可選，不填的時(shí)候表示x和y的值相等。
只設(shè)置一個(gè)值時(shí)8個(gè)值都是一致的，四個(gè)角水平垂直半徑都一樣。
如皋要設(shè)置滿8個(gè)值，每4個(gè)分一組，兩組之間記得加一個(gè)"/"每組中的每一對(duì)數(shù)分別是從左上角開始呈順時(shí)針方向的border-radius的x，y方向的值，如圖：
不過這方法不怎么常用。
也可以用
border-top-left這種方式去專門設(shè)置一個(gè)角。
overflow 盒子內(nèi)容溢出設(shè)置
overflow: visible | hidden | scroll | auto
visible強(qiáng)行全部顯示。
hidden內(nèi)容被修剪，其他元素不可見。
scroll會(huì)無論盒子中有多少內(nèi)容都顯示縱向和橫向的滾動(dòng)條。
auto會(huì)根據(jù)內(nèi)容是否超出盒子自行決定是否顯示滾動(dòng)條。
引申：overflow-x,overflow-y。
box-sizing 設(shè)置外邊框的寬高
boxsizing:content-box| border-box| inherit
由于直接設(shè)置width，height更改的是content-box的寬高，所以當(dāng)要設(shè)置邊框快高時(shí)要用到box-sizing。
當(dāng)使用content-box時(shí)，邊框的總寬/高為width/height加兩倍的padding再加上border-weight的像素值。
使用border-box時(shí)外邊框的總寬高就是width和height設(shè)置的高度。
總之border-box比較小content-box比較大。
box-shadow 盒的陰影
box-shadow: none | <shadow>[,<shadow>]*
shadow可以有一個(gè)或多個(gè)，也就是多陰影。
<shadow>:inset? && <length>{2,4} && <color>?
length中第一個(gè)值設(shè)置的是水平偏移量
第二個(gè)值設(shè)置的是垂直偏移量
第三個(gè)值設(shè)置模糊半徑
第四個(gè)值設(shè)置陰影大小
color值默認(rèn)為字體顏色。
當(dāng)添加了inset時(shí)效果為內(nèi)陰影。四個(gè)值屬性不變。
多組陰影可以疊加，用逗號(hào)隔開每組值。陰影不占空間。
outline 輪廓
用來在border外描邊來區(qū)分盒子的邊界，如果border已經(jīng)設(shè)置顏色了再用outline來描個(gè)邊就沒什么必要了。
語法看起來與border幾乎一樣。
outline:[<outline-width>||<outline-style>||<outline-color>]|inherit
outline-width:<length>
outline-style:solid | dashed | dotted
outline-color: <color>|invert(當(dāng)前背景色的相反色)
outline不占據(jù)空間，而且在描邊時(shí)會(huì)在border以外。
背景
background-color 背景顏色
<color>可以用rgb，rgba，十六進(jìn)制或者transparent設(shè)置。
color的默認(rèn)顏色就是transparent。
background-image 背景圖片
<bg-image>[,<bg-image>]*
<bg-image> = <image> | none
引入一個(gè)<image>可以用url("")的方法,可以添加多個(gè)圖片。先寫的圖片會(huì)在最上面的圖層，之后設(shè)置的圖片會(huì)依次在下層，同時(shí)也可以設(shè)置background-color。
background-repeat 圖片的平鋪設(shè)置
<repeat-style>[,<repeat-style>]*
每一個(gè)repeat-style與之前設(shè)置的每張圖片一一對(duì)應(yīng)。
<repeat-style> = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}
repeat-x/y表示只延x軸平鋪，或只延y軸平鋪。
repeat表示既延x軸平鋪，又延y軸平鋪。
space用于圖片平鋪時(shí)為圖片之間添加空隙，同時(shí)保證圖片在保持原來大小的情況下鋪遍整個(gè)屏幕，在圖片之間添加合理的空隙。
round使圖片平鋪的同時(shí)進(jìn)行伸縮，使圖片緊密的鋪滿畫面而不會(huì)出現(xiàn)截掉一部分的情況。
no-repeat表示圖片不平鋪，只出現(xiàn)一次。
background-repeat如果寫：no-repeat repeat則這兩個(gè)設(shè)置分別對(duì)應(yīng)x軸，y軸。
background-attachment 背景是否依附滾動(dòng)條
<attachment>[,<attachment>]*
<attachment> = scroll | fixed |local
scroll是默認(rèn)值，隨著內(nèi)容動(dòng)的時(shí)候背景圖不動(dòng)。
改為local時(shí)，背景和內(nèi)容一起動(dòng)。
background-position 背景圖位置
<position>[,<position>]*
<position>=[left | center | right | top | bottom | <percentage> | <length>] |
[left | center | right | <percentage> | <length>] [top | center | bottom | <percentage> | <length>] |
[center | [left | right ][<percentage> | <length>]?] && [center |[top | bottom][<percentage> | <length>]?]
當(dāng)設(shè)置background-position: 10px 20px;時(shí)，圖片x軸向右偏移10px，y軸向下偏移20px。
設(shè)置20% 50%。相對(duì)固定點(diǎn)是圖片的百分比位置，固定位置是容器的百分比位置。
設(shè)置50% 50% 和center center是一個(gè)意思。
當(dāng)設(shè)置了一個(gè)right時(shí)候，另外一個(gè)值默認(rèn)是center。
當(dāng)設(shè)置：right 10px top 20px時(shí)分別以右以上為參照物向遠(yuǎn)離的方向移動(dòng)相應(yīng)的距離。
可以通過background-position的負(fù)值來讓一大張圖片中的某一部分顯示出來（比如圖標(biāo)）。
linear-gradient 顏色的線性漸變
[[<angle> | to <side-or-corner>],]? <color-stop>[,<color-stop>]+
可以是一個(gè)角度，或者是一個(gè)線性的方向，到一個(gè)邊或者到一個(gè)角。
<side-or-corner> = [left | right] || [top | bottom]
描述方向。
<color-stop> = <color> [ <percentage> | <length> ]?
color-stop用來寫顏色的斷點(diǎn)。 后面的值寫顏色停下的位置，可以缺省。
有種最簡(jiǎn)化的寫法:background-image:linear-gradient(red, blue);這時(shí)候是從上往下漸變r(jià)ed，blue。
如果方向反過來linear-gradient(to top, red, blue)。
要讓漸變方向從左上角到右下角linear-gradient(to right bottom, red, blue)。
如果填的是角度，如linear-gradient(0deg, red, blue)，這樣的效果是從下向上的漸變。改成45°，linear-gradient(45deg, red, blue)這樣的效果就阿是從左下角多右上角。
如果填了3個(gè)值，linear-gradient(red, green, blue)就會(huì)從上至下平均的漸變?nèi)N顏色。改成linear-gradient(red, green 20%, blue)這樣，就會(huì)使綠色出現(xiàn)在從上到下20%的位置。
radial-gradient 放射狀漸變
指沿著圓或者橢圓的半徑向外擴(kuò)散的顏色漸變，語法：
[[circle || <length> ][at <position>]?,|
//circle可以設(shè)置為圓形，length是半徑，at <position>就是圓心所在的位置。
[ellipse || [<length> | <percentage> ]{2}][at <position> ]?,|
//或者是橢圓，分別設(shè)置x，y方向上的半徑值，用百分比表示半徑，然后設(shè)置它的圓心位置。
[[circle | ellipse] || <extent-keyword> ][at <position> ]?,| at <position>,]?
<color-stop> [,<color-stop>]+
或者是設(shè)置（圓形/橢圓形）后加上關(guān)鍵字<extent-keyword>，然后接上圓心位置。
<extent-keyword> = closest-side(離圓心最近的那條邊) | farthest-side(離圓心最遠(yuǎn)的那條邊)
| closest-corner(離圓心最近的那個(gè)角) | farthest-corner(離圓心最遠(yuǎn)的那個(gè)角)
這四個(gè)最近最遠(yuǎn)的值用于設(shè)置漸變的半徑。當(dāng)設(shè)置了具體圓的px后，漸變半徑就為相應(yīng)的px。
當(dāng)如background-image:radial-gradient(red, blue);這時(shí)中心漸變橢圓的半徑對(duì)于盒子的比例等于closest-side的距離。
repeat-*-gradient 漸變重復(fù)
也就是在剛才的線性漸變或者放射狀漸變之前添加一個(gè)repeat。適用于設(shè)置好了具體的length的時(shí)候。
background-origin 背景起源位置
<box>[,<box>]*
當(dāng)設(shè)置background-position:right bottom;時(shí)，圖片會(huì)默認(rèn)放在padding-box的右下角，如果想更改就要使用background-origin來設(shè)置。
這個(gè)屬性確定了(0,0)和(100%,100%)兩個(gè)坐標(biāo)的位置。
可以設(shè)置多個(gè)，每個(gè)都對(duì)應(yīng)于一個(gè)圖片元素。
<box> = border-box | padding-box | content-box
background-clip 背景的裁剪
如果想要控制背景圖在盒子中的顯示范圍就要用background-clip來設(shè)置。
<box>[,<box>]*
<box> = border-box | padding-box | content-box
語法與background-origin一樣，在這里設(shè)置為哪一個(gè)值，背景就會(huì)在這個(gè)值的范圍里顯示。默認(rèn)值為border-box。
background-size 背景大小
用來控制背景的大小。
<bg-size>[,<bg-size> ]*
<bg-size> = [<length> | <percentage> | auto ]{1,2} | cover | contain
percentage是相對(duì)于背景的容器。當(dāng)寬高只設(shè)置了一個(gè)值時(shí)，另一個(gè)值默認(rèn)為auto。
可以在之后添加關(guān)鍵字cover和contain。cover關(guān)鍵字會(huì)使背景圖像按比例拉大，使之完全覆蓋背景區(qū)域，使圖像的寬或者高與容器一致。contain關(guān)鍵字會(huì)使圖片在不變形的前提下合理的擴(kuò)展至容器的最大值。
background 快速設(shè)置背景屬性
[<bg-layer>,]*<final-bg-layer>
這個(gè)則是有關(guān)于怎么放在一起寫background。
<bg-layer> = <bg-image> || <position> [/<bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>
中間如果要同時(shí)設(shè)置背景位置和背景尺寸，一定要注意好順序，而且之間要加一個(gè)斜線。
<final-bg-layer> = <bg-layer> || <'background-color'>
這里設(shè)置一個(gè)層，用于給背景加上顏色，必須用于最后一個(gè)背景圖片。
舉例：
background:
url(red.png) 0 0/20px 20px no-repeat,url(blue.png) 50% 50%/contain no-repeat content-box green;
display 顯示方式
用于設(shè)置元素的顯示方式
display： block | inline | inline-block | none
display: block 塊級(jí)元素
默認(rèn)寬度為父元素寬度，可設(shè)置寬高，是換行顯示的。
默認(rèn)情況下屬于display:block的塊級(jí)元素的有：div，p,hi-h6,ul,form,...
display: inline 行級(jí)元素
默認(rèn)寬度為內(nèi)容寬度，不可設(shè)置寬高，在同行顯示。
默認(rèn)屬于display：inline的行級(jí)元素有：span, a, label, cite, em,...
display: inline-block
默認(rèn)寬度為內(nèi)容寬度，可設(shè)置寬高，邊上的行級(jí)元素同行顯示，后續(xù)元素如果寬度超過這一行的邊界會(huì)整塊換行顯示。
默認(rèn)屬于inline-block的元素有：input，textarea,select,button,...
display: none
設(shè)置元素不顯示。這部分的元素就會(huì)像被注釋掉一樣，不顯示。
visibility: hidden也可以隱藏一部分元素，但是這部分只是不顯示而已，空間還是會(huì)占據(jù)的。
用display: none的話這部分真的在頁(yè)面就完全不可見了，位置也會(huì)被其他內(nèi)容占據(jù)。
塊級(jí)元素水平居中
想要達(dá)成塊級(jí)元素水平居中，最重要的屬性是margin:auto，這樣瀏覽器會(huì)自動(dòng)平分左右兩側(cè)的內(nèi)容寬度.
導(dǎo)航居中
對(duì)ul設(shè)置text-align: center; line-height:只對(duì)行距元素有效果。
對(duì)li,a設(shè)置display:inline-block; width: height
position 定位
position用于設(shè)置定位方式，用于設(shè)置參照物。有4個(gè)屬性來設(shè)置位置：top，right，bottom，left，z-index。
position: static|relative| absolute | fixed
默認(rèn)情況下是static（靜態(tài)）。
relative 相對(duì)位置
假設(shè)有3個(gè)縱向排列的元素，如果position：relative（相對(duì)定位），那么這個(gè)元素仍在文檔流中，如果用top/left這種屬性設(shè)置了移動(dòng)，參照物為元素本身。
absolute 絕對(duì)位置
absolute表示絕對(duì)定位，默認(rèn)寬度為內(nèi)容寬度，這部分內(nèi)容脫離文檔流（不按照文檔流的順序排列），它的起始位置是之前在文檔流的位置。參照物為為第一個(gè)定位的祖先/根元素（html標(biāo)簽元素）。
如果父元素的position是相對(duì)定位(relative)，那么它的參照物就會(huì)變成父元素。
輪播頭圖
<style>
.is{position: relative; width: 480px;}
.is img{display: block;}
.is .title{position: absolute; bottom: 0px;
margin: 0; width: 100%;line-height: 35px;
background-color: #000; opacity: 0.7;}
.is .title a{margin-left: 20px;color: #fff;
text-decoration: none;}
.is .controls{position: absolute; bottom: 13px; right: 10px;line-height:10px;}
.is .controls span{display: inline-block; width: 10px;margin: auto 1px; height: 10px; border-radius: 10px;background-color: gray;}
.is .controls span.cur{background-color: #fff;}
</style>
<div class="is">
<a >
<img src="http://ww2.sinaimg.cn/mw690/6adc108fjw1etbl5cljgtg20dc07iu0x.gif" >
</a>
<p class="title">
<a >這C++作業(yè)根本不按套路出牌啊啊啊！</a>
</p>
<div class="controls">
<span></span>
<span class="cur"></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
以上代碼在模擬輪播頭圖的效果。父元素的position是相對(duì)的，其他子元素位置以父元素為參照物，position是絕對(duì)的。
fixed 固定位置
設(shè)置了position:fixed；后，元素的默認(rèn)寬度為內(nèi)容寬度，雖然元素位于原來的位置，但是這部分內(nèi)容會(huì)脫離文檔流。固定定位的參照物為窗口。
固定頂欄
<style>
body{padding-top: 50px; margin:0; line-height: 1.8;}
.top{position: fixed; top: 0; width: 100%; height: 50px;background-color: pink; color:#fff;}
.main{height:3000px; background-color: #eee;}
</style>
<body>
<div class="top">top bar</div>
<div class="main">main content area</div>
</body>
top/right/bottom/left
top/right/bottom/left是元素與上下左右邊緣的距離。
如果像設(shè)置為top：30px；left：30px；這樣位于不相對(duì)面的兩個(gè)屬性，這個(gè)元素的大小不會(huì)改變，會(huì)移動(dòng)到離頂部，左部30px的位置。如果設(shè)置了位于向?qū)γ娴膬蓚€(gè)屬性，這個(gè)元素的大小就會(huì)被抻長(zhǎng)。
z-index
如果有個(gè)z-index:0的元素和一個(gè)z-index:1的元素,1這個(gè)元素就會(huì)在0之前顯示。z-index用來形容元素在頁(yè)面上的排序順序。
z-index棧
對(duì)于父元素也可以設(shè)置z-index值，這就稱為z-index棧。當(dāng)不同的元素分別屬于不同的父元素時(shí)，如果一個(gè)元素的父元素的z-index棧值更高，這個(gè)父元素中的元素會(huì)永遠(yuǎn)位于z-index棧比它低的元素之上。
遮罩
如果要產(chǎn)生遮住全頁(yè)面的效果：
<style>
.mask{position: fixed; top:0; left:0; z-index: 999; width: 100%;height: 100%; opacity: 0.3;}
</style>
<div class="mask"></div>
三行自適應(yīng)布局
如果要產(chǎn)生頂欄底爛位置固定，移動(dòng)滾動(dòng)條的時(shí)候只有中間內(nèi)容區(qū)移動(dòng)的效果：
<style>
.head{position: absolute;top: 0;left: 0;width: 100%;height: 100px;background-color: #ccc;}
.body{position: absolute;top: 100px;left: 0;bottom: 100px;right: 0;overflow: auto;}
.content{height:200px;}
.foot{position: absolute;bottom: 0;left: 0;width: 100%;height: 100px;background-color: #ccc;}
</style>
<div class="head">head</div>
<div class="body"><div class="content">contentarea</div></div>
<div class="foot">foot</div>
float 浮動(dòng)
有四個(gè)取值：float: left | right | none (默認(rèn)) | inherit
浮動(dòng)元素的默認(rèn)寬度為內(nèi)容寬度，內(nèi)容會(huì)脫離文檔流，但是不會(huì)完全脫離，浮動(dòng)元素會(huì)向指定方向一直移動(dòng)。
<style>
div{line-height: 50px;}
.sample{background-color: pink;}
.sb0{background-color: blue;}
.sb1{background-color: green;}
.sample{float: left;}
</style>
<head>
<body>
<div class="sb0"> </div>
<div class="sample">sample</div>
<div class="sb1"> </div>
</body>
</head>
float的元素都會(huì)脫離原有文檔流，并位于一新同一文檔流，如果頁(yè)面中有多個(gè)float元素，float會(huì)放在一起排列：
float元素半脫離文檔流，對(duì)于元素，脫離文檔流；但是內(nèi)容還在文檔流中，因此元素的位置會(huì)重疊，但內(nèi)容不會(huì)覆蓋在一起：
效果演示：這種效果有些混亂。
<style>
body{width: 400px;line-height: 1.6;}
.sample{width: 100px;line-height: 100px;margin: 3px;text-align: center;background-color: pink;}
.sb{margin: 10px auto;padding: 5px;border: 1px dashed #FF9A00;}
.sample{float:left;}
</style>
<body>
<div class="sb clearfix">
<div class="sample">float:left;</div>
人們常認(rèn)為iPhone的雙核能戰(zhàn)安卓陣營(yíng)的4核乃至8核是因?yàn)閕OS系統(tǒng)優(yōu)化好，其實(shí)就是放屁，論系統(tǒng)優(yōu)化，原生Android絕逼天下無敵，事實(shí)總是和人們所想的相反，iPhone的CPU在整體而言，是優(yōu)于android陣營(yíng)的，功耗發(fā)熱什么的，更不用說了，例如目前史上最坑的處理器。。。高通驍龍810，坑了一幫隊(duì)友，尤其把HTC坑的不要不要的。。。。在CPU上，也只有三星自家的處理器還能看的過去了，至于GPU，唉，感覺何止領(lǐng)先幾年啊，完全是領(lǐng)先一個(gè)時(shí)代啊
</div>
<div class="sb">
應(yīng)用生態(tài)，其實(shí)這是老生常談的問題了，android系統(tǒng)的開源特質(zhì)，注定android不能像iOS一樣有著統(tǒng)一的應(yīng)用體驗(yàn)，google也絕不可能像apple一樣有著系統(tǒng)的絕對(duì)掌控權(quán)，android一開始就輸在了起跑線上，雖然google近年來不斷加強(qiáng)自己的控制權(quán)限，奮起直追，但很明顯。。。。友商和APP廠商們并不買賬（國(guó)內(nèi)流氓軟件尤為明顯，bta萬惡之首）
以上兩點(diǎn)，是android在全球范圍內(nèi)遇到的問題，至于其他問題，其實(shí)都是安卓2.0時(shí)代的事情了，隨著google的不斷完善，android早就煥然一新了，而下面，則是我們天朝特色了
</div>
</body>
clear 清除浮動(dòng)效果
clear: both | left | right | none | inherit
應(yīng)用與后續(xù)元素、塊級(jí)元素，用以清除浮動(dòng)效果。
clear屬性規(guī)定元素的那一側(cè)不允許其他浮動(dòng)元素。
both：兩側(cè)都不允許。left/right左/右側(cè)不允許出現(xiàn)浮動(dòng)元素。none允許兩側(cè)有浮動(dòng)元素。
當(dāng)沒有使用浮動(dòng)清除效果時(shí)：
<style>
body{width: 400px;line-height: 1.6;}
.sample{float: left;width: 100px;line-height: 100px;text-align: center;background-color: pink;}
.parent, .sb{padding: 5px 0;margin-bottom: 10px;outline: 1px dashed blue;}
.sample{
margin: auto 5px;
float: left;
}
</style>
<body>
<div class="parent">
<div class="sample">float: left</div>
<div class="sample">float: left</div>
<div class="sample">float: left</div>
<br class="cb">
</div>
</body>
效果：
為了達(dá)到良好的效果，在css中添加一句
.cb{clear: both;height: 0;overflow: hidden ;visibility: hidden;}這樣就在上面三個(gè)浮動(dòng)元素后添加了一個(gè)隱藏的，在兩側(cè)不顯示浮動(dòng)的換行元素?？梢赃_(dá)到看起來需要的效果。
也可以在需要讓浮動(dòng)元素不超出的塊級(jí)元素中添加如下屬性：
.父塊級(jí)元素::after{content:".";display: block;clear: both;overflow: visible;visibility: hidden;height: 0;}
在ie低版本中可以用.父塊級(jí)元素{zoom: 1;}來實(shí)現(xiàn)。
兩列布局
如果要實(shí)現(xiàn)兩列顯示的效果，如下，別忘了清除浮動(dòng)。
<style>
html, body, .body, .main, .side{margin:0;padding: 0;height: 100%;}
.body{width: 960px; margin: 0 auto;}
.main{background-color: pink;}
.side{background-color: #eee;}
.main{float: left;width: 660px;}
.side{float: right;width: 300px;}
.clearfix::after{content:'.';display: block;clear: both;height: 0;overflow: hidden;visibility: hidden;}
</style>
<body>
<div class="body clearfix">
<div class="main">main</div>
<div class="side">side</div>
</div>
</body>
Flex 彈性布局
如果要設(shè)置flex彈性布局，則需要設(shè)置:display:flex
flex item
只有彈性容器在文檔流中的子元素才是flex item。
常見例子：
<div style="display:flex">
<div>block</div>
<div style="float: left;">float</div>
<span>inline</span>
<div style="position:absloute;"></div>
<div>
<div>grandson</div>
</div>
</div>
其中，float:left是彈性元素；position：absloute不是彈性元素；如果是孫元素而非子元素或等級(jí)太低的元素也不是彈性元素。
flex 方向
有四個(gè)屬性可用于設(shè)置方向。
- flex-direction
- flex-wrap
- flex-flow
- order
flex-direction 方向
用于設(shè)置彈性元素排列的方向。
flex-direction: row | row-reverse | column | column-reverse
默認(rèn)排列方向是row(行)，如果設(shè)置row-reverse就會(huì)從右向左反向排列。設(shè)置column從上向下排，用column-reverse則會(huì)使之從下向上排列。
flex-wrap 換行
flex-wrap: nowrap | wrap | wrap-reverse
默認(rèn)是不換行的(nowrap)，設(shè)置為wrap后到了一行的長(zhǎng)度就會(huì)換行，設(shè)置為wrap-reverse就會(huì)反向換行（從下到上，從左到右）。
flex-flow 快速設(shè)置方向換行
flex-flow: <'flex-direction'> || <'flex-wrap'>
只是上面那兩個(gè)屬性一次性設(shè)置兩個(gè)。
order 順序
order用于設(shè)置flex元素的順序，設(shè)置值是一個(gè)整數(shù)，默認(rèn)值為0。
flex 彈性
有三個(gè)屬性用于設(shè)置彈性。
- flex-grow
- flex-shrink
- flex-basis
flex-basis 初始基礎(chǔ)值
flex-basis: main-size | <width>
默認(rèn)值是main-size也就是主軸的size，可以用width來設(shè)置，用于設(shè)置flex item的初始寬/高。
flex-grow 擴(kuò)張
flex-grow的設(shè)置值是一個(gè)數(shù)字，初始值是0。
當(dāng)一行的flex元素沒有設(shè)置flex-grow的時(shí)候，元素的寬度先默認(rèn)排序，一行剩下的元素的空間會(huì)按照flex-grow的權(quán)重來分配。因此一塊元素最后占的寬度大小公式為flex-basis + flow-grow/sum(flow-grow) * remain
flex-shrink 收縮
默認(rèn)值是1，設(shè)置值是一個(gè)數(shù)，用于分配一行之后超出去的空間。公式和flex-grow很類似：flex-basis + flow-shrink/sum(flow-shrink) * remain。當(dāng)flex-shrink設(shè)置為0的時(shí)候，超出的部分不會(huì)去自動(dòng)分配。
flex 與flex有關(guān)的快速設(shè)置
flex:<'flex-grow'> || <'flex-shrink'> || <'flex-basis'>
這三條設(shè)置的順序是：伸展，收縮，基礎(chǔ)值。默認(rèn)值為：0 1 main-size。
justify-content 主軸上對(duì)齊方式
用于設(shè)置在main-axis上的對(duì)齊方式，之前每個(gè)彈性元素的大小不變。
justify-content: flex-start | flex-end | center | space-between | space-around
justify-content的設(shè)置屬性：
<table><tr><th>默認(rèn)值flex-start</th><td>元素從主軸開始對(duì)齊</td></tr><tr><th>flex-end</th><td>元素在主軸的尾部對(duì)齊</td></tr><tr><th>center</th><td>在主軸居中對(duì)齊</td></tr><tr><th>space-between</th><td>在主軸上留出空隙對(duì)齊（首尾無空隙）</td></tr><tr><th>space-around</th><td>在主軸上留出空隙對(duì)齊（首尾留空隙）</td></tr></table>
align-items 垂直方向?qū)R對(duì)齊
設(shè)置一行高度不同的元素在垂直方向的對(duì)齊方式
align-items: flex-start | flex-end | center | baseline | stretch
當(dāng)不同元素的高度不同時(shí)，使用align-items來設(shè)置縱向?qū)R方式。使用flex-start來向上對(duì)齊，使用flex-end來向下對(duì)齊，center會(huì)居中對(duì)齊，stretch使元素拉伸為上下容器寬度，baseline是以基線對(duì)齊。
align-self 單個(gè)元素
設(shè)置單個(gè)flex item在cross-axis（輔軸）方向上對(duì)齊方式。
align-self的默認(rèn)值是auto，使用的是在容器里默認(rèn)的對(duì)齊方式，當(dāng)要給某個(gè)單個(gè)元素更改在軸上的對(duì)齊方式時(shí)使用align-self屬性align-items: flex-start | flex-end | center | baseline | stretch
align-content 輔軸上行對(duì)齊方式
設(shè)置cross-axis方向上行對(duì)齊方式，設(shè)置值有align-content: flex-start | flex-end | center | space-between | space-around | stretch
當(dāng)容器中出現(xiàn)了多行的效果，且還留有空余空間的時(shí)候，使用align-content來設(shè)置不同的行的分布樣式。
三行兩列自適應(yīng)布局
下面這種布局比較好用，頂邊欄和底欄
<body>
<style>
body{display: flex; flex-flow: column;}
body{height: 100%; margin: 0;border:0;padding: 0;}
html{height: 100%; margin: 0;border:0;padding: 0;}
.head, .foot{height: 100px;}
.body{flex:1 ;
display:flex;
width: 1000px;
align-self:center;}
.side{width: 200px;
background-color:#0055FF;}
.main{flex:1;
background-color: pink;
margin-left: 10px;}
.head{line-height: 100px;background-color: #CE4848;}
.foot{line-height: 80px;background-color: #45C643}
</style>
<div class="head">head</div>
<div class="body">
<div class="side">side</div>
<div class="main">main</div>
</div>
<div class="foot">foot</div>
</body>
側(cè)欄固定，主欄自適應(yīng)布局
<style>
body{
display:flex;
flex-flow:column;
}
html, body{height:100%;flex-flow:column;}
.parent{
flex:1;
display: flex;
align-sels:center;
}
.side{
background-color:red;
width:200px;
margin-right:10px;
text-align:center;
vertical-align:middle;
color: #FFF;
font-family: Microsoft YaHei, Arial, Helvetica, sans-serif;
font-size: 18px;
}
.main{
background-color:blue;
flex:1;
height:auto;
text-align: center;
vertical-align:middle;
color: #FFF;
font-family: Microsoft YaHei, Arial, Helvetica, sans-serif;
font-size: 18px;
}
</style>
</head>
<body>
<div class="parent">
<div class="side">側(cè)欄</div>
<div class="main">主欄</div>
</div>
</body>
三個(gè)標(biāo)簽的Tab
<style type="text/css">
.tab {
border: 1px solid #999;
font: 14px "Microsoft YaHei";
width: 573px;
}
.title {
display: flex;
background-color: #f1f1f1;
text-align: center;
line-height: 2
}
.t1, .t2 {
border-right: 1px solid #cecece;
}
.t1, .t2, .t3 {
flex: 1;
border-bottom: 1px solid #cecece;
}
.content {
padding: 20px;
background-color: white;
}
.t1 {
background-color: white;
border-bottom-color: white;
}
</style>
</head>
<body>
<div class="tab">
<div class="title">
<div class="t1">課程</div>
<div class="t2">學(xué)習(xí)計(jì)劃</div>
<div class="t3">技能圖譜</div>
</div>
<div class="content">課程內(nèi)容</div>
</div>
變形
transform
如果要讓某個(gè)元素旋轉(zhuǎn)180°，使用transform:rotate(180deg)。
語法：transform: none | <transform-function>+
后面可以寫下列的多個(gè)方法，用空格連接。
none表示不做變形和動(dòng)畫。
rotate() 旋轉(zhuǎn)
rotate(<angle>)用于讓元素旋轉(zhuǎn)。比如填transform:rotate(45deg);就會(huì)使元素順時(shí)針旋轉(zhuǎn)45度。填負(fù)值就會(huì)讓元素逆時(shí)針旋轉(zhuǎn)。
旋轉(zhuǎn)后原來的坐標(biāo)軸方向也會(huì)旋轉(zhuǎn)，會(huì)影響后續(xù)位移。
translate() 位移
語法translate(<translation-value> [,<translation-value>?])
分別對(duì)應(yīng)于X,Y方向上的偏移，如果沒有填第二個(gè)值，那么只會(huì)在X軸上偏移。語法也可以改成translateY(<translation-value>)或者translateX(<translation-value>)這種形式。默認(rèn)是向右，向下偏移。
<translation-value>可以填百分比，參照物是當(dāng)前盒子的大小。
scale() 縮放
scale( <number> [,<number>]?)
可以填兩個(gè)數(shù)，意義為縮放為原來的number倍，如果省略了第二個(gè)值，那么這個(gè)數(shù)默認(rèn)與第一個(gè)值一樣。兩個(gè)值分別對(duì)應(yīng)X,Y軸。
skew() 傾斜
skew( <angle> [,<angle> ]?)
填的分別是X,Y軸的傾斜度數(shù)。也可以拆成skewX，skewY兩個(gè)值。
X方向角度是正數(shù)時(shí)設(shè)置的是x方向的像素向逆時(shí)針方向傾斜的角度。
Y方向角度是正數(shù)時(shí)設(shè)置的是y方向的像素向順時(shí)針方向傾斜的角度。
如果設(shè)置transform:skew(30deg);那么Y軸就會(huì)向X軸逆時(shí)針傾斜30度。
origin 設(shè)置變換時(shí)坐標(biāo)軸原點(diǎn)
transform-origin:
[left | center | right | top | bottom | <percentage> | <length> ]
|
[left | center | right | <percentage> | <length>]
[top | center | bottom | <percentage> | <length>] <length>?
|
[center | [left | right]] && [ center | [top | bottom]] <length>?
可以填1/2/3個(gè)值（分別對(duì)應(yīng)x,y,z方向的坐標(biāo)），或者這三個(gè)值用關(guān)鍵字來代替。
transform-origin的默認(rèn)值是50% 50%，也就是圖像的中心點(diǎn)。如果只填了一個(gè)值，默認(rèn)第二個(gè)值為50%。
如果設(shè)置transform-origin: 0 0;圖像的原點(diǎn)就到了左上角。
perspective 透視
這個(gè)屬性與rotate一起用可以做出透視效果。
perspective: none | <length>
perspective后接的值越大，透視效果越不明顯。
perspective-origin 透視角度
定義3D元素在透視時(shí)對(duì)著它看的視角。x越大鏡頭越向右，y越大鏡頭越向上。
transform-origin:
[left | center | right | top | bottom | <percentage> | <length> ]
|
[left | center | right | <percentage> | <length>]
[top | center | bottom | <percentage> | <length>]
|
[center | [left | right]] && [ center | [top | bottom]]
可以填1/2個(gè)值，分別是x，y方向。
translate3d() 3d的移動(dòng)
translate3d( <translation-value>,<translation-value>,<length>)
設(shè)置的三個(gè)值分別為x,y,z軸上的移動(dòng)。
比如transform: translate3d(10px, 20%, 50px);會(huì)向右移動(dòng)10px，向下移動(dòng)自身的20%，向z軸的正方向（屏幕方向）移動(dòng)了px。也可以用transform: translateX/Y/Z單獨(dú)設(shè)置x,y,z軸上的位移距離。
scale3d() 3d的縮放
scale3d(<number>, <number>, <number> )
三個(gè)值分別對(duì)應(yīng)x,y,z的縮放比率。也可以分別設(shè)置transform: scaleX/Y/Z來設(shè)置縮放比率。如果只設(shè)置了scaleZ，不會(huì)改變盒子的大小。
rotate3d() 3d的旋轉(zhuǎn)
rotate3d(<number>, <number>, <number>, <angle>)
前三個(gè)值是對(duì)應(yīng)xyz上的坐標(biāo)，原點(diǎn)到這個(gè)點(diǎn)的連線就是旋轉(zhuǎn)的軸，最后的值時(shí)旋轉(zhuǎn)的角度。
也可以用rotateX(<angle>)這種方式設(shè)置旋轉(zhuǎn)角度。
transform-style 扁平化
transform-style: flat | preserve-3d
默認(rèn)是扁平的，如果設(shè)置了3d效果，經(jīng)過x軸y軸的旋轉(zhuǎn)(rotateX,rotateY)之后就會(huì)看出來透視的效果（之前也得在父元素設(shè)置prespective）。
backface-visibility 背面不可見設(shè)置
backface-visibility: visible | hidden
默認(rèn)是可見的，當(dāng)一個(gè)元素翻轉(zhuǎn)了90°以上時(shí)，就可以看到背面。
如果設(shè)置了hidden，轉(zhuǎn)到背面這個(gè)容器就不可見。
動(dòng)畫
transition-property
動(dòng)畫效果設(shè)置。
transition-property: none | <single-transition-property> [',' <single-transition-property> ]*
可以不填或者設(shè)置多個(gè)single-transition-property。
<single-transition-property> = all | <IDENT>
all表示所有的效果都可以做過渡。left表示只對(duì)left屬性做過渡效果。
left, color表示left和color這兩個(gè)屬性會(huì)有動(dòng)畫效果。
下面是我做的第一個(gè)動(dòng)畫效果。
<style>
*{
margin:0;
padding:0;
}
html,
body{
width:100%;
height:100%;
}
.m-demo{
width:600px;
height: 100px;
outline: 2px none;
margin: 20px auto;
transition:2s;
background-color: #476CED;
border-radius: 50px;
box-shadow: 1px 1px 5px #000;
}
.m-demo pre{
transition:1s;
width: 100px;
height: 100px;
padding: 0;
line-height: 100px;
border-radius: 50%;
font-size: 20px;
text-align: center;
position: absolute;
background-color: #FF9A00;
margin-top: 0;
box-shadow: 1px 1px 5px #000;
font-family: "consolas";
}
.m-demo:hover pre{margin-left:500px;color: #FF9A00;}
.m-demo pre{transition-property:margin-left,color;}
</style>
<body>
<div class="m-demo">
<pre>none</pre>
</div>
</body>
transition-duration 動(dòng)畫持續(xù)時(shí)間
transition-duration: <time> [,<time>]*
設(shè)置的秒數(shù)就是動(dòng)畫持續(xù)的時(shí)間。
transition-timing-function 動(dòng)畫的時(shí)間函數(shù)
transition-timing-function: <single-transition-timing-function> [',' <single-transition-timing-function>]*
用以設(shè)置動(dòng)畫的速率函數(shù)。
<single-transition-timing-function> =
ease | linear | ease-in | ease-out | ease-in-out |
cubic-bezier(<number>, <number>, <number>, <number>)|
step-start | step-end |
steps(<integer>[,[ start | end ]]?)
ease是默認(rèn)值，兩頭慢，中間快。
linear是線性效果，全程勻速。
ease-in在開始快，ease-out在結(jié)束慢。
ease-in-out的效果也是兩頭慢中間快，但是幅度比ease要大。
cubic-bezier是貝塞爾曲線，四個(gè)值分別設(shè)置兩個(gè)點(diǎn)的坐標(biāo)，第一點(diǎn)與原點(diǎn)的連線是起始時(shí)的切線，第二個(gè)點(diǎn)與結(jié)束點(diǎn)的連線是曲線結(jié)束時(shí)的切線。
steps用來設(shè)置分步的運(yùn)動(dòng)，后面接的start/end用來設(shè)置是每一步的開始還是結(jié)束時(shí)作動(dòng)畫。
transition-delay 延時(shí)
transition-delay: <time> [,<time>]*
用來設(shè)置動(dòng)畫效果延時(shí)執(zhí)行的秒數(shù)。
transition 動(dòng)畫的縮寫
transition: <single-transition> [',' <single-transition>]*
<single-transition> = [none | <single-transition-property>] || <time> || <single-transition-timing-function> || <time>
第一個(gè)time是transition-duration，第二個(gè)添加的time是transition-delay。
例如：transition: none; transition: left 2s ease 1s;
animation-name 自運(yùn)行動(dòng)畫
animation-name: <single-animation-name> [',' <single-animation-name> ]*
<single-animation-name> = none | <IDENt>
animation-name:之后可以自己定義一個(gè)名字，意義為關(guān)鍵幀效果的關(guān)鍵字。
在css中首先為某個(gè)屬性定義animation-name，這樣就會(huì)創(chuàng)建多個(gè)關(guān)鍵幀效果，隨后在css中用@-webkit-keyframes animation-name{10% …… 50% }來為某個(gè)關(guān)鍵幀名定義一系列的屬性。
animation-duration 動(dòng)畫持續(xù)秒數(shù)
animation-duration:<time> [,<time>]*與transition-duration類似，用于設(shè)置動(dòng)畫持續(xù)秒數(shù)。
animation-timing-function 這部分以后補(bǔ)全……
transition-timing-function: <single-transition-timing-function> [',' <single-transition-timing-function>]*
與上面出現(xiàn)的那貨幾乎一模一樣…………
<single-transition-timing-function> =
ease | linear | ease-in | ease-out | ease-in-out |
cubic-bezier(<number>, <number>, <number>, <number>)|
step-start | step-end |
steps(<integer>[,[ start | end ]]?)
