（這是15年初學(xué)css時記的筆記）

選擇器

簡單選擇器

標(biāo)簽選擇器

直接把標(biāo)簽名加前面。

類選擇器

用.+ className選擇宪迟。className必須以字母開頭矾缓，區(qū)分大小寫锨天∩呷可以出現(xiàn)多次。

id選擇器

用#+idName選擇猪杭。只出現(xiàn)一次兽泣。

通配符選擇器

用*可以選擇頁面中的所有元素。

屬性選擇器-[att]

用[]來選擇具有某些屬性的標(biāo)簽選中胁孙。
如[disabled]唠倦、[type=button]。
id選擇器就是屬性選擇器的一個特例#nav{} == [id=nav]{}

屬性選擇器-[att~=val]

用[att ~= val]來選擇屬性中包含某些值的標(biāo)簽涮较，只要存在一個值就會被選中稠鼻，值與值之間用空格來分隔。
類選擇器就是這種屬性選擇器的一個特例.sports{} == [class~=sports]{}

屬性選擇器-[att|=val]

用[att|=val]來選擇屬性中具有某些字符串片段的標(biāo)簽狂票，只要字符串片段匹配到就會被選中候齿。一般用在<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)簽連接到了一個doc文檔和一個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)擊時的鏈接跟衅。

:enabled選擇元素可用的狀態(tài)。
:disabled選擇元素不可用的狀態(tài)播歼。
checked選擇單選框復(fù)選框這種用戶選中的元素伶跷。

用li:first-child選中一組子元素中的第一個。
用li:last-child選中一組子元素中的最后一個秘狞。
用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選中只有一個子元素的父元素食寡。
用:first-of-type選中一類子元素中出現(xiàn)的第一個雾狈。
用:last-of-type選中一類子元素中的最后一個廓潜。
用:nth-of-type(even)選中一類子元素中的偶數(shù)項(xiàng)元素。
用:nth-last-of-type(2n)選中倒數(shù)的偶數(shù)項(xiàng)子元素善榛。

用span:only-of-type選中一組父標(biāo)簽中僅有的那個span辩蛋。

偽元素選擇器

如果要凸顯出類中的某個元素就要用偽元素選擇器。
推薦使用兩個冒號移盆。

::first-letter

::first-letter{color:red;}選擇第一個元素悼院。

::first-line

::first-line{}用于選擇頁面中第一行。

::before/after

::before{content:"…"} after{content:"…"}
這兩個偽元素選擇器用于在某些元素之前/之后插入一些內(nèi)容咒循。

::selection

::selection偽元素選擇器用于被選中的內(nèi)容樣式据途。可以更改選中內(nèi)容的顏色什么的叙甸。

組合選擇器

后代選擇器

如果只想選擇某一個div中全部的h2,可以用后代選擇器颖医。

<div class="main">
    <h2>標(biāo)題一</h2>
    <div>
        <h2>標(biāo)題二</h2>
        <p>段落一</p>
    </div>
</div>

.main h2{color:red};會將class為main的div中所有的h2選中。

子選擇器

如果只想選擇這個div子類中的h2選中裆蒸，使用.main>h2{},這樣只會選中main這個div下一級子類的h2熔萧。

兄弟選擇器

<div>
    <h2>標(biāo)題</h2>
    <p>段落一</p>
    <p>段落二</p>
    
</div>

如果要選中這段代碼中兩個緊挨著中的某個標(biāo)簽的樣式，使用兄弟選擇器。注意這個緊挨著的關(guān)系不是嵌套……
比如要只選擇h2下的第一個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è)置的樣式大部分可以自動繼承到子元素俺榆。但是有幾個比較常見的例外：background感昼、border、position

繼承的優(yōu)先級

計(jì)算方法
a = 行內(nèi)樣式
b = Id選擇器的數(shù)量
c = 類肋演、偽類和屬性選擇器的數(shù)量
d = 標(biāo)簽選擇器和偽元素選擇器的數(shù)量
a>b>c>d 依次降低抑诸。

如果優(yōu)先級相同，后出現(xiàn)的會覆蓋掉之前出現(xiàn)的爹殊。
改變應(yīng)用樣式的先后順序的幾種方法：

1. 改變同等級選擇器出現(xiàn)的先后順序蜕乡。
2. 提升選擇器的優(yōu)先級。
3. 在某一項(xiàng)屬性之后加!important關(guān)鍵字梗夸，這樣就會無視優(yōu)先級层玲。

文本

font-size 文字大小

px、百分比反症、em什么的辛块。

font-family 字體名稱

<generic-family>指一類字體，較為常用的只有兩種：serif铅碍、sans-serif（襯線體和非襯線體）润绵。可用逗號分隔取多個值胞谈。

font-weight 字體加粗

值有normal普通尘盼、bold加粗。一般字體都支持400（普通）烦绳，700（加粗）這兩檔卿捎。

font-style 字體傾斜

值有normal、italic傾斜径密、oblique當(dāng)字體沒設(shè)置斜體時強(qiáng)制傾斜午阵，oblique一般不用。

line-height 行距

值有normal享扔、number一般由瀏覽器決定底桂，1.1~1.2左右、lengthpx,em惧眠、百分比籽懦。默認(rèn)行高是30px。如果設(shè)置行高為一個數(shù)字锉试，行高則由字體大小的px乘以這個數(shù)字設(shè)置猫十。

font 快速設(shè)置的font中的多個樣式

設(shè)置順序是：傾斜/加粗（可選） 字體大欣辣簟（必填） 行高（可選，添加前必須在前面添加一個“/”） 字體（必填拖云，可填多個值）贷笛。如果順序錯誤或必填項(xiàng)缺少，font設(shè)置將不起作用宙项。

text-align 字體對齊方式

left  right //左對齊  右對齊
center  justify //居中  兩端對齊

vertical-align 垂直對齊

<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>對齊到行高最高點(diǎn)</td></tr><tr><td>text-top</td><td>對齊到font-size最高點(diǎn)</td></tr><tr><td>middle</td><td>居中</td></tr><tr><td>bottom</td><td>對齊到行高最低點(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要不要合并掀淘，是否要自動換行。
pre-wrap會保留換行和空格油昂，同時會自動換行革娄，所以比較常用。
<table><tr><th></th><th>換行(New Lines)</th><th>空格tab</th><th>自動換行(Text Wrapping)</th></tr><tr><th>normal</th><td>collapse(折疊收縮)</td><td>collapse</td><td>wrap(自動換行)</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>自動換行冕碟，中斷單詞</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>任意兩個詞都可以break掉</td></tr></table>

text-shadow 文字陰影

文字陰影可以不填拦惋。
<length>后接2到3個值。分別是x安寺，y厕妖，虛化值。
<color>可選挑庶，不填就用字體顏色言秸。

text-decoration 文本修飾

修飾可以不填。
underline挠羔、overline井仰、lind-through三個不沖突埋嵌，分別是下劃線上劃線中劃線破加。

text-overflow 文字溢出

這個屬性用來設(shè)置一行文字不能完全在一行顯示時后面接省略號的效果。如果使用了text-overflow一般來說后面兩個屬性也必須如下設(shè)置：

text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;

cursor 光標(biāo)設(shè)置

可以用圖片自定義鼠標(biāo)形狀雹嗦，可以使用多個圖片范舀。
后面可以接如下值[auto | default | none | help | pointer | zoom-in | zoom-out | move]
auto是自動處理，未設(shè)置時的默認(rèn)樣式了罪。
default是普通的箭頭光標(biāo)锭环。
none讓光標(biāo)消失。
help帶個問號泊藕。
pointer是點(diǎn)連接的那個手指形狀辅辩。
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 絕對定位

元素原來的位置就不會保留节沦，需要另外去指定原來的位置键思。

relative 相對定位

這會使元素偏移某一個距離，仍然保持原來的形狀甫贯，它原來占據(jù)的空間仍然會保留吼鳞，這與absolute相反，但是會偏移一個距離叫搁。

static 靜態(tài)定位

元素框正常生成赖条，快捷元素形成矩形框，作為文檔流的一部分常熙，行內(nèi)元素會形成一個或多個行框放在父元素當(dāng)中纬乍。

fixed 固定的位置

表現(xiàn)為position設(shè)置為absolute，元素框原來的位置時不保留的裸卫，但是它的包含框是瀏覽器窗口本身仿贬，由窗口大小決定位置。

盒模型

盒模型示例

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}
只填一個值就會上下左右都收縮击吱。
padding填充值不足4個時就有值縮寫的效果。

padding: 20px; == padding: 20px 20px 20px 20px;
padding: 20px 10px; == padding: 20px 10px 20px 10px;//對稱排列
padding: 20px 10px 30px; == padding: 20px 10px 30px 10px;

對面相等遥昧，后面省略覆醇；四面相等朵纷，只填一個。

margin 外邊距

margin:[<length>|<percentage>|auto]{1,4}|inherit
這部分設(shè)置值的語法跟padding一樣永脓。

margin合并

兩個元素的底部和上部都有margin的值的話會存在合并現(xiàn)象柴罐，這兩個元素之間的空間會取兩個margin的最大值。
父元素與第一個/最后一個子元素也存在margin合并的現(xiàn)象憨奸，會取margin的最大值革屠。

水平居中

如果margin分配為auto的話瀏覽器會自動平分兩邊多余的空間，會達(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個板甘。
border-color:[<color>|transparent]{1,4}
默認(rèn)顏色是字體顏色党瓮，默認(rèn)width是中等。
可以用border:來分別設(shè)置上下左右邊框盐类。

border-radius 邊框圓角

分別設(shè)置四個角的效果：top-left寞奸，top-right，bottom-right在跳，bottom-left枪萄。
border-radius:[<length>|<percentage>]{1,4}[/[<length>|<percentage>]{1,4}]?
前面四個值表示x方向上的半徑，后四個值表示y方向上的半徑猫妙。后四個值可選瓷翻，不填的時候表示x和y的值相等。
只設(shè)置一個值時8個值都是一致的割坠，四個角水平垂直半徑都一樣齐帚。
如皋要設(shè)置滿8個值，每4個分一組彼哼，兩組之間記得加一個"/"每組中的每一對數(shù)分別是從左上角開始呈順時針方向的border-radius的x对妄，y方向的值，如圖：

image

overflow 盒子內(nèi)容溢出設(shè)置

overflow: visible | hidden | scroll | auto
visible強(qiáng)行全部顯示。
hidden內(nèi)容被修剪蔫饰，其他元素不可見琅豆。
scroll會無論盒子中有多少內(nèi)容都顯示縱向和橫向的滾動條愉豺。
auto會根據(jù)內(nèi)容是否超出盒子自行決定是否顯示滾動條篓吁。
引申：overflow-x,overflow-y。

box-sizing 設(shè)置外邊框的寬高

boxsizing:content-box| border-box| inherit
由于直接設(shè)置width蚪拦，height更改的是content-box的寬高杖剪，所以當(dāng)要設(shè)置邊框快高時要用到box-sizing冻押。
當(dāng)使用content-box時，邊框的總寬/高為width/height加兩倍的padding再加上border-weight的像素值盛嘿。
使用border-box時外邊框的總寬高就是width和height設(shè)置的高度洛巢。
總之border-box比較小content-box比較大。

box-shadow 盒的陰影

box-shadow: none | <shadow>[,<shadow>]*
shadow可以有一個或多個次兆，也就是多陰影稿茉。
<shadow>:inset? && <length>{2,4} && <color>?

length中第一個值設(shè)置的是水平偏移量
第二個值設(shè)置的是垂直偏移量
第三個值設(shè)置模糊半徑
第四個值設(shè)置陰影大小

color值默認(rèn)為字體顏色。

當(dāng)添加了inset時效果為內(nèi)陰影芥炭。四個值屬性不變漓库。
多組陰影可以疊加，用逗號隔開每組值园蝠。陰影不占空間渺蒿。

outline 輪廓

用來在border外描邊來區(qū)分盒子的邊界，如果border已經(jīng)設(shè)置顏色了再用outline來描個邊就沒什么必要了彪薛。
語法看起來與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ù)空間，而且在描邊時會在border以外善延。

背景

background-color 背景顏色

<color>可以用rgb少态，rgba，十六進(jìn)制或者transparent設(shè)置易遣。
color的默認(rèn)顏色就是transparent况增。

background-image 背景圖片

<bg-image>[,<bg-image>]*

<bg-image> = <image> | none
引入一個<image>可以用url("")的方法,可以添加多個圖片。先寫的圖片會在最上面的圖層训挡，之后設(shè)置的圖片會依次在下層澳骤，同時也可以設(shè)置background-color。

background-repeat 圖片的平鋪設(shè)置

<repeat-style>[,<repeat-style>]*
每一個repeat-style與之前設(shè)置的每張圖片一一對應(yīng)澜薄。
<repeat-style> = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}
repeat-x/y表示只延x軸平鋪为肮，或只延y軸平鋪。
repeat表示既延x軸平鋪肤京，又延y軸平鋪颊艳。
space用于圖片平鋪時為圖片之間添加空隙，同時保證圖片在保持原來大小的情況下鋪遍整個屏幕忘分，在圖片之間添加合理的空隙棋枕。
round使圖片平鋪的同時進(jìn)行伸縮，使圖片緊密的鋪滿畫面而不會出現(xiàn)截掉一部分的情況妒峦。
no-repeat表示圖片不平鋪重斑，只出現(xiàn)一次。

background-repeat如果寫：no-repeat repeat則這兩個設(shè)置分別對應(yīng)x軸肯骇，y軸窥浪。

background-attachment 背景是否依附滾動條

<attachment>[,<attachment>]*
<attachment> = scroll | fixed |local
scroll是默認(rèn)值祖很，隨著內(nèi)容動的時候背景圖不動。
改為local時漾脂，背景和內(nèi)容一起動假颇。

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;時，圖片x軸向右偏移10px骨稿，y軸向下偏移20px笨鸡。
設(shè)置20% 50%。相對固定點(diǎn)是圖片的百分比位置坦冠，固定位置是容器的百分比位置镜豹。
設(shè)置50% 50% 和center center是一個意思。
當(dāng)設(shè)置了一個right時候蓝牲，另外一個值默認(rèn)是center趟脂。
當(dāng)設(shè)置：right 10px top 20px時分別以右以上為參照物向遠(yuǎn)離的方向移動相應(yīng)的距離。

可以通過background-position的負(fù)值來讓一大張圖片中的某一部分顯示出來（比如圖標(biāo)）例衍。

linear-gradient 顏色的線性漸變

[[<angle> | to <side-or-corner>],]? <color-stop>[,<color-stop>]+
可以是一個角度昔期，或者是一個線性的方向，到一個邊或者到一個角佛玄。
<side-or-corner> = [left | right] || [top | bottom]
描述方向硼一。
<color-stop> = <color> [ <percentage> | <length> ]?
color-stop用來寫顏色的斷點(diǎn)。 后面的值寫顏色停下的位置梦抢，可以缺省般贼。

有種最簡化的寫法:background-image:linear-gradient(red, blue);這時候是從上往下漸變red，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個值，linear-gradient(red, green, blue)就會從上至下平均的漸變?nèi)N顏色旅东。改成linear-gradient(red, green 20%, blue)這樣灭抑，就會使綠色出現(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(離圓心最近的那個角) | farthest-corner(離圓心最遠(yuǎn)的那個角)

這四個最近最遠(yuǎn)的值用于設(shè)置漸變的半徑。當(dāng)設(shè)置了具體圓的px后耍铜，漸變半徑就為相應(yīng)的px邑闺。
當(dāng)如background-image:radial-gradient(red, blue);這時中心漸變橢圓的半徑對于盒子的比例等于closest-side的距離。

repeat-*-gradient 漸變重復(fù)

也就是在剛才的線性漸變或者放射狀漸變之前添加一個repeat棕兼。適用于設(shè)置好了具體的length的時候。

background-origin 背景起源位置

<box>[,<box>]*
當(dāng)設(shè)置background-position:right bottom;時，圖片會默認(rèn)放在padding-box的右下角刃麸，如果想更改就要使用background-origin來設(shè)置沦辙。
這個屬性確定了(0,0)和(100%,100%)兩個坐標(biāo)的位置。
可以設(shè)置多個茎芋，每個都對應(yīng)于一個圖片元素颅眶。
<box> = border-box | padding-box | content-box

background-clip 背景的裁剪

如果想要控制背景圖在盒子中的顯示范圍就要用background-clip來設(shè)置。
<box>[,<box>]*
<box> = border-box | padding-box | content-box
語法與background-origin一樣田弥，在這里設(shè)置為哪一個值涛酗，背景就會在這個值的范圍里顯示。默認(rèn)值為border-box偷厦。

background-size 背景大小

用來控制背景的大小商叹。
<bg-size>[,<bg-size> ]*
<bg-size> = [<length> | <percentage> | auto ]{1,2} | cover | contain
percentage是相對于背景的容器。當(dāng)寬高只設(shè)置了一個值時只泼，另一個值默認(rèn)為auto沈自。
可以在之后添加關(guān)鍵字cover和contain。cover關(guān)鍵字會使背景圖像按比例拉大辜妓，使之完全覆蓋背景區(qū)域枯途，使圖像的寬或者高與容器一致。contain關(guān)鍵字會使圖片在不變形的前提下合理的擴(kuò)展至容器的最大值籍滴。

background 快速設(shè)置背景屬性

[<bg-layer>,]*<final-bg-layer>
這個則是有關(guān)于怎么放在一起寫background酪夷。
<bg-layer> = <bg-image> || <position> [/<bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>
中間如果要同時設(shè)置背景位置和背景尺寸，一定要注意好順序孽惰，而且之間要加一個斜線晚岭。
<final-bg-layer> = <bg-layer> || <'background-color'>
這里設(shè)置一個層，用于給背景加上顏色勋功，必須用于最后一個背景圖片坦报。

舉例：

background:
url(red.png) 0 0/20px 20px no-repeat,url(blue.png) 50% 50%/contain no-repeat content-box green;

image

display 顯示方式

用于設(shè)置元素的顯示方式
display： block | inline | inline-block | none

display: block 塊級元素

默認(rèn)寬度為父元素寬度库说，可設(shè)置寬高，是換行顯示的片择。
默認(rèn)情況下屬于display:block的塊級元素的有：div潜的，p,hi-h6,ul,form,...

display: inline 行級元素

默認(rèn)寬度為內(nèi)容寬度，不可設(shè)置寬高字管，在同行顯示啰挪。
默認(rèn)屬于display：inline的行級元素有：span, a, label, cite, em,...

display: inline-block

默認(rèn)寬度為內(nèi)容寬度，可設(shè)置寬高嘲叔，邊上的行級元素同行顯示亡呵，后續(xù)元素如果寬度超過這一行的邊界會整塊換行顯示。
默認(rèn)屬于inline-block的元素有：input硫戈，textarea,select,button,...

display: none

設(shè)置元素不顯示锰什。這部分的元素就會像被注釋掉一樣，不顯示丁逝。
visibility: hidden也可以隱藏一部分元素汁胆，但是這部分只是不顯示而已，空間還是會占據(jù)的果港。
用display: none的話這部分真的在頁面就完全不可見了沦泌，位置也會被其他內(nèi)容占據(jù)。

塊級元素水平居中

想要達(dá)成塊級元素水平居中辛掠，最重要的屬性是margin:auto谢谦，這樣瀏覽器會自動平分左右兩側(cè)的內(nèi)容寬度.

導(dǎo)航居中

對ul設(shè)置text-align: center; line-height:只對行距元素有效果。
對li,a設(shè)置display:inline-block; width: height

position 定位

position用于設(shè)置定位方式萝衩，用于設(shè)置參照物回挽。有4個屬性來設(shè)置位置：top，right猩谊，bottom千劈，left，z-index牌捷。
position: static|relative| absolute | fixed
默認(rèn)情況下是static（靜態(tài)）墙牌。

relative 相對位置

假設(shè)有3個縱向排列的元素，如果position：relative（相對定位）暗甥，那么這個元素仍在文檔流中喜滨，如果用top/left這種屬性設(shè)置了移動，參照物為元素本身撤防。

absolute 絕對位置

absolute表示絕對定位虽风，默認(rèn)寬度為內(nèi)容寬度，這部分內(nèi)容脫離文檔流（不按照文檔流的順序排列），它的起始位置是之前在文檔流的位置辜膝。參照物為為第一個定位的祖先/根元素（html標(biāo)簽元素）无牵。
如果父元素的position是相對定位(relative)，那么它的參照物就會變成父元素厂抖。

輪播頭圖

<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是相對的充岛，其他子元素位置以父元素為參照物保檐，position是絕對的耕蝉。

fixed 固定位置

設(shè)置了position:fixed；后夜只，元素的默認(rèn)寬度為內(nèi)容寬度垒在，雖然元素位于原來的位置，但是這部分內(nèi)容會脫離文檔流扔亥。固定定位的參照物為窗口场躯。

固定頂欄

<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踢关；這樣位于不相對面的兩個屬性，這個元素的大小不會改變粘茄，會移動到離頂部签舞，左部30px的位置。如果設(shè)置了位于向?qū)γ娴膬蓚€屬性柒瓣，這個元素的大小就會被抻長儒搭。

z-index

如果有個z-index:0的元素和一個z-index:1的元素,1這個元素就會在0之前顯示。z-index用來形容元素在頁面上的排序順序芙贫。

z-index棧

對于父元素也可以設(shè)置z-index值搂鲫，這就稱為z-index棧。當(dāng)不同的元素分別屬于不同的父元素時磺平，如果一個元素的父元素的z-index棧值更高魂仍，這個父元素中的元素會永遠(yuǎn)位于z-index棧比它低的元素之上。

遮罩

如果要產(chǎn)生遮住全頁面的效果：

<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)生頂欄底爛位置固定拣挪，移動滾動條的時候只有中間內(nèi)容區(qū)移動的效果：

<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 浮動

有四個取值：float: left | right | none (默認(rèn)) | inherit
浮動元素的默認(rèn)寬度為內(nèi)容寬度擦酌，內(nèi)容會脫離文檔流，但是不會完全脫離媒吗，浮動元素會向指定方向一直移動仑氛。

<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">&nbsp;</div>
        <div class="sample">sample</div>
        <div class="sb1">&nbsp;</div>
    </body>
</head>

float的元素都會脫離原有文檔流，并位于一新同一文檔流，如果頁面中有多個float元素锯岖，float會放在一起排列：

image

float元素半脫離文檔流介袜，對于元素，脫離文檔流出吹；但是內(nèi)容還在文檔流中遇伞，因此元素的位置會重疊，但內(nèi)容不會覆蓋在一起：

image

<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)安卓陣營的4核乃至8核是因?yàn)閕OS系統(tǒng)優(yōu)化好鸠珠，其實(shí)就是放屁，論系統(tǒng)優(yōu)化秋麸，原生Android絕逼天下無敵渐排，事實(shí)總是和人們所想的相反，iPhone的CPU在整體而言灸蟆，是優(yōu)于android陣營的驯耻，功耗發(fā)熱什么的，更不用說了炒考，例如目前史上最坑的處理器可缚。。斋枢。高通驍龍810帘靡，坑了一幫隊(duì)友，尤其把HTC坑的不要不要的瓤帚。描姚。。缘滥。在CPU上轰胁，也只有三星自家的處理器還能看的過去了，至于GPU朝扼，唉赃阀，感覺何止領(lǐng)先幾年啊，完全是領(lǐng)先一個時代啊
    </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)的絕對掌控權(quán)驮俗，android一開始就輸在了起跑線上，雖然google近年來不斷加強(qiáng)自己的控制權(quán)限允跑，奮起直追王凑，但很明顯搪柑。。索烹。工碾。友商和APP廠商們并不買賬（國內(nèi)流氓軟件尤為明顯，bta萬惡之首）
        以上兩點(diǎn)百姓，是android在全球范圍內(nèi)遇到的問題渊额，至于其他問題，其實(shí)都是安卓2.0時代的事情了垒拢，隨著google的不斷完善旬迹，android早就煥然一新了，而下面求类，則是我們天朝特色了
    </div>
</body>

clear 清除浮動效果

clear: both | left | right | none | inherit
應(yīng)用與后續(xù)元素奔垦、塊級元素，用以清除浮動效果仑嗅。
clear屬性規(guī)定元素的那一側(cè)不允許其他浮動元素宴倍。
both：兩側(cè)都不允許张症。left/right左/右側(cè)不允許出現(xiàn)浮動元素仓技。none允許兩側(cè)有浮動元素。
當(dāng)沒有使用浮動清除效果時：

<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>

效果：

image

也可以在需要讓浮動元素不超出的塊級元素中添加如下屬性：

.父塊級元素::after{content:".";display: block;clear: both;overflow: visible;visibility: hidden;height: 0;}

在ie低版本中可以用.父塊級元素{zoom: 1;}來實(shí)現(xiàn)。

兩列布局

如果要實(shí)現(xiàn)兩列顯示的效果羡亩，如下摩疑，別忘了清除浮動。

<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不是彈性元素楷怒；如果是孫元素而非子元素或等級太低的元素也不是彈性元素。

flex 方向

有四個屬性可用于設(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就會從右向左反向排列贼陶。設(shè)置column從上向下排刃泡，用column-reverse則會使之從下向上排列巧娱。

flex-wrap 換行

flex-wrap: nowrap | wrap | wrap-reverse
默認(rèn)是不換行的(nowrap)，設(shè)置為wrap后到了一行的長度就會換行烘贴，設(shè)置為wrap-reverse就會反向換行（從下到上家卖，從左到右）。

flex-flow 快速設(shè)置方向換行

flex-flow: <'flex-direction'> || <'flex-wrap'>
只是上面那兩個屬性一次性設(shè)置兩個庙楚。

order 順序

order用于設(shè)置flex元素的順序上荡，設(shè)置值是一個整數(shù)，默認(rèn)值為0馒闷。

flex 彈性

有三個屬性用于設(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è)置值是一個數(shù)字，初始值是0疏虫。
當(dāng)一行的flex元素沒有設(shè)置flex-grow的時候永罚，元素的寬度先默認(rèn)排序，一行剩下的元素的空間會按照flex-grow的權(quán)重來分配卧秘。因此一塊元素最后占的寬度大小公式為flex-basis + flow-grow/sum(flow-grow) * remain

flex-shrink 收縮

默認(rèn)值是1呢袱，設(shè)置值是一個數(shù)，用于分配一行之后超出去的空間翅敌。公式和flex-grow很類似：flex-basis + flow-shrink/sum(flow-shrink) * remain羞福。當(dāng)flex-shrink設(shè)置為0的時候，超出的部分不會去自動分配蚯涮。

flex 與flex有關(guān)的快速設(shè)置

flex:<'flex-grow'> || <'flex-shrink'> || <'flex-basis'>
這三條設(shè)置的順序是：伸展治专，收縮，基礎(chǔ)值遭顶。默認(rèn)值為：0 1 main-size张峰。

justify-content 主軸上對齊方式

用于設(shè)置在main-axis上的對齊方式，之前每個彈性元素的大小不變棒旗。
justify-content: flex-start | flex-end | center | space-between | space-around

justify-content的設(shè)置屬性：
<table><tr><th>默認(rèn)值flex-start</th><td>元素從主軸開始對齊</td></tr><tr><th>flex-end</th><td>元素在主軸的尾部對齊</td></tr><tr><th>center</th><td>在主軸居中對齊</td></tr><tr><th>space-between</th><td>在主軸上留出空隙對齊（首尾無空隙）</td></tr><tr><th>space-around</th><td>在主軸上留出空隙對齊（首尾留空隙）</td></tr></table>

align-items 垂直方向?qū)R對齊

設(shè)置一行高度不同的元素在垂直方向的對齊方式
align-items: flex-start | flex-end | center | baseline | stretch
當(dāng)不同元素的高度不同時喘批，使用align-items來設(shè)置縱向?qū)R方式。使用flex-start來向上對齊嗦哆，使用flex-end來向下對齊谤祖，center會居中對齊，stretch使元素拉伸為上下容器寬度老速，baseline是以基線對齊粥喜。

align-self 單個元素

設(shè)置單個flex item在cross-axis（輔軸）方向上對齊方式。
align-self的默認(rèn)值是auto橘券，使用的是在容器里默認(rèn)的對齊方式额湘，當(dāng)要給某個單個元素更改在軸上的對齊方式時使用align-self屬性align-items: flex-start | flex-end | center | baseline | stretch

align-content 輔軸上行對齊方式

設(shè)置cross-axis方向上行對齊方式卿吐，設(shè)置值有align-content: flex-start | flex-end | center | space-between | space-around | stretch
當(dāng)容器中出現(xiàn)了多行的效果，且還留有空余空間的時候锋华，使用align-content來設(shè)置不同的行的分布樣式嗡官。

image

三行兩列自適應(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>

三個標(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

如果要讓某個元素旋轉(zhuǎn)180°衍腥，使用transform:rotate(180deg)。
語法：transform: none | <transform-function>+
后面可以寫下列的多個方法纳猫，用空格連接婆咸。
none表示不做變形和動畫。

rotate() 旋轉(zhuǎn)

rotate(<angle>)用于讓元素旋轉(zhuǎn)芜辕。比如填transform:rotate(45deg);就會使元素順時針旋轉(zhuǎn)45度尚骄。填負(fù)值就會讓元素逆時針旋轉(zhuǎn)。
旋轉(zhuǎn)后原來的坐標(biāo)軸方向也會旋轉(zhuǎn)侵续，會影響后續(xù)位移倔丈。

translate() 位移

語法translate(<translation-value> [,<translation-value>?])
分別對應(yīng)于X,Y方向上的偏移，如果沒有填第二個值状蜗，那么只會在X軸上偏移需五。語法也可以改成translateY(<translation-value>)或者translateX(<translation-value>)這種形式。默認(rèn)是向右诗舰，向下偏移警儒。
<translation-value>可以填百分比，參照物是當(dāng)前盒子的大小眶根。

scale() 縮放

scale( <number> [,<number>]?)
可以填兩個數(shù)，意義為縮放為原來的number倍边琉，如果省略了第二個值属百，那么這個數(shù)默認(rèn)與第一個值一樣。兩個值分別對應(yīng)X,Y軸变姨。

skew() 傾斜

skew( <angle> [,<angle> ]?)
填的分別是X,Y軸的傾斜度數(shù)族扰。也可以拆成skewX，skewY兩個值定欧。
X方向角度是正數(shù)時設(shè)置的是x方向的像素向逆時針方向傾斜的角度渔呵。
Y方向角度是正數(shù)時設(shè)置的是y方向的像素向順時針方向傾斜的角度。
如果設(shè)置transform:skew(30deg);那么Y軸就會向X軸逆時針傾斜30度砍鸠。

origin 設(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個值（分別對應(yīng)x,y,z方向的坐標(biāo)）扩氢，或者這三個值用關(guān)鍵字來代替。
transform-origin的默認(rèn)值是50% 50%爷辱，也就是圖像的中心點(diǎn)录豺。如果只填了一個值朦肘，默認(rèn)第二個值為50%。
如果設(shè)置transform-origin: 0 0;圖像的原點(diǎn)就到了左上角双饥。

perspective 透視

這個屬性與rotate一起用可以做出透視效果媒抠。
perspective: none | <length>
perspective后接的值越大，透視效果越不明顯咏花。

perspective-origin 透視角度

定義3D元素在透視時對著它看的視角趴生。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個值冲秽，分別是x，y方向矩父。

translate3d() 3d的移動

translate3d( <translation-value>,<translation-value>,<length>)
設(shè)置的三個值分別為x,y,z軸上的移動锉桑。
比如transform: translate3d(10px, 20%, 50px);會向右移動10px，向下移動自身的20%窍株，向z軸的正方向（屏幕方向）移動了px民轴。也可以用transform: translateX/Y/Z單獨(dú)設(shè)置x,y,z軸上的位移距離。

scale3d() 3d的縮放

scale3d(<number>, <number>, <number> )
三個值分別對應(yīng)x,y,z的縮放比率球订。也可以分別設(shè)置transform: scaleX/Y/Z來設(shè)置縮放比率后裸。如果只設(shè)置了scaleZ，不會改變盒子的大小冒滩。

rotate3d() 3d的旋轉(zhuǎn)

rotate3d(<number>, <number>, <number>, <angle>)
前三個值是對應(yīng)xyz上的坐標(biāo)微驶，原點(diǎn)到這個點(diǎn)的連線就是旋轉(zhuǎn)的軸，最后的值時旋轉(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)之后就會看出來透視的效果（之前也得在父元素設(shè)置prespective）扶檐。

backface-visibility 背面不可見設(shè)置

backface-visibility: visible | hidden
默認(rèn)是可見的，當(dāng)一個元素翻轉(zhuǎn)了90°以上時胁艰，就可以看到背面款筑。
如果設(shè)置了hidden，轉(zhuǎn)到背面這個容器就不可見腾么。

動畫

transition-property

動畫效果設(shè)置奈梳。
transition-property: none | <single-transition-property> [',' <single-transition-property> ]*
可以不填或者設(shè)置多個single-transition-property。
<single-transition-property> = all | <IDENT>
all表示所有的效果都可以做過渡解虱。left表示只對left屬性做過渡效果攘须。
left, color表示left和color這兩個屬性會有動畫效果。
下面是我做的第一個動畫效果饭寺。

<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 動畫持續(xù)時間

transition-duration: <time> [,<time>]*
設(shè)置的秒數(shù)就是動畫持續(xù)的時間阻课。

transition-timing-function 動畫的時間函數(shù)

transition-timing-function: <single-transition-timing-function> [',' <single-transition-timing-function>]*
用以設(shè)置動畫的速率函數(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是貝塞爾曲線，四個值分別設(shè)置兩個點(diǎn)的坐標(biāo)宣吱，第一點(diǎn)與原點(diǎn)的連線是起始時的切線窃这，第二個點(diǎn)與結(jié)束點(diǎn)的連線是曲線結(jié)束時的切線。
steps用來設(shè)置分步的運(yùn)動征候，后面接的start/end用來設(shè)置是每一步的開始還是結(jié)束時作動畫杭攻。

transition-delay 延時

transition-delay: <time> [,<time>]*
用來設(shè)置動畫效果延時執(zhí)行的秒數(shù)。

transition 動畫的縮寫

transition: <single-transition> [',' <single-transition>]*
<single-transition> = [none | <single-transition-property>] || <time> || <single-transition-timing-function> || <time>
第一個time是transition-duration疤坝，第二個添加的time是transition-delay兆解。
例如：transition: none; transition: left 2s ease 1s;

animation-name 自運(yùn)行動畫

animation-name: <single-animation-name> [',' <single-animation-name> ]*
<single-animation-name> = none | <IDENt>
animation-name:之后可以自己定義一個名字，意義為關(guān)鍵幀效果的關(guān)鍵字跑揉。
在css中首先為某個屬性定義animation-name锅睛，這樣就會創(chuàng)建多個關(guān)鍵幀效果，隨后在css中用@-webkit-keyframes animation-name{10% …… 50% }來為某個關(guān)鍵幀名定義一系列的屬性历谍。

animation-duration 動畫持續(xù)秒數(shù)

animation-duration:<time> [,<time>]*與transition-duration類似现拒，用于設(shè)置動畫持續(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 ]]?)