一旭寿、CSS入門

1暴浦、css選擇器

選擇器的作用是“用于確定（選定）要進(jìn)行樣式設(shè)定的標(biāo)簽（元素）”溅话。

有若干種形式的選擇器。每種形式代表某種含義歌焦，以選定某種特征的元素飞几。

比如：標(biāo)簽選擇器： p{ ... } h1{...} div{ ... }

2、css常用的幾個(gè)屬性

color: 文字顏色（前景色）

font-size: 文字大小

font-family: 字體独撇，比如：微軟雅黑屑墨， 黑體，宋體纷铣，仿宋體卵史，”Times New Roman”

font-style: 就是設(shè)置字形是”正體”還是“斜體”(italic）

font-weight: 設(shè)置是否粗體

background: 背景色

border: 設(shè)置邊框

text-decoration: 設(shè)置“裝飾線”（下劃線，中劃線搜立，上劃線）

text-align: 對(duì)齊

width: 寬

height: 高

二以躯、選擇器

1、選擇器綜述

（1）選擇器分類

基礎(chǔ)選擇器

關(guān)系選擇器

屬性選擇器

偽類選擇器

偽元素選擇器

（2）選擇器語(yǔ)法的符號(hào)含義

E： 代表“Element”，即元素忧设；

S： 代表“Seletor”刁标，即選擇器；

attr： 代表“attribute”址晕，即屬性膀懈；

2、基礎(chǔ)選擇器

（1）標(biāo)簽選擇器：E

標(biāo)簽選擇器的形式上是一個(gè)標(biāo)簽名（一個(gè)單詞）谨垃。

比如：

P{ .... } div{ .... } img{ .... }

（2）類選擇器：.calss

類選擇器的形式上是一個(gè)英文點(diǎn)（.）后面緊跟一個(gè)類名（className）启搂。

類名是在標(biāo)簽上通過class屬性而設(shè)定。我們可以自己設(shè)定類名刘陶。

注意：

1胳赌， 一個(gè)類可以供多個(gè)標(biāo)簽使用！

2易核，一個(gè)標(biāo)簽可以同時(shí)設(shè)定多個(gè)類匈织，用空格隔開。

這樣設(shè)定后牡直，多個(gè)類所設(shè)定的屬性都可以作用在該標(biāo)簽上缀匕。

（3）id選擇器：#id

id選擇器的形式上是一個(gè)英文井號(hào)（#）后面緊跟一個(gè)id名。id名是在標(biāo)簽上通過id屬性而設(shè)定碰逸。我們可以自己設(shè)定id名乡小。

特別注意：

一個(gè)網(wǎng)頁(yè)中的id不能“重名”（但class名可以重復(fù)）。

（4）通配符選擇器： *

通配符選擇器非常簡(jiǎn)單饵史，就一個(gè)星號(hào)(*)满钟，表示“所有標(biāo)簽”，同得不多胳喷。

*{ .....聲明......}

表示所有標(biāo)簽都應(yīng)用該css樣式的設(shè)定湃番。

3、關(guān)系選擇器

關(guān)系選擇器是通過元素之間的“位置關(guān)系的特征”來(lái)確定所選元素吭露。

（1）子代選擇器：S1>S2

匹配S1中的下一級(jí)S2吠撮。下一級(jí)就是“子級(jí)”，或子代讲竿。

其中S1泥兰，S2都可以是獨(dú)立使用的選擇器（比如id選擇器，class選擇器，標(biāo)簽選擇器等）。

比如S1為div燥翅， S2為p，即形式為“div > p”削彬，就表示找出div中的所有子級(jí)p標(biāo)簽。

又比如：

• #p1>a{ ... } ：表示找出id為p1的標(biāo)簽中的所有子代a標(biāo)簽。
• .cc>p{ ... } ：表示找出class為cc的標(biāo)簽中的所有子代p標(biāo)簽吃警。
• #p2>.cc2>img{ ... } ：表示找出id為p2中的子代的class為cc2中的所有子代img標(biāo)簽糕篇。

（2）后代選擇器：S1 S2

匹配S1內(nèi)部的所有后代S2。

此時(shí)就不僅僅局限于子代標(biāo)簽了酌心，還包括孫代，曾孫代挑豌，等等安券。

簡(jiǎn)單說，就是找出放在S1所選中的標(biāo)簽中的所有S2所選中的標(biāo)簽氓英。

• div p{ ... } ：匹配div中的所有后代p標(biāo)簽侯勉，即凡是放在div中的p標(biāo)簽都會(huì)找出來(lái)。
• #p1 a{ ... } ：匹配id為p1的標(biāo)簽中的所有a標(biāo)簽铝阐，即只要a標(biāo)簽在#p1中就可以址貌。
• .cc p{ ... } ：匹配class為cc的標(biāo)簽中的所有p標(biāo)簽，即只要p標(biāo)簽在.cc中就可以徘键。
• \p2 .cc2 img{ ... } ：匹配id為p2中的class為cc2中的所有img標(biāo)簽练对。

（3）相鄰選擇器：S1+S2

匹配S1后面緊挨著的同級(jí)（兄弟）元素S2。

（4）兄弟選擇器：S1~S2

匹配S1后面的所有同級(jí)（兄弟）元素S2吹害。

4螟凭、屬性選擇器

屬性選擇器是通過元素的屬性的特征信息來(lái)確定所選元素。

（1）[attr]

匹配具有所給定屬性名稱的標(biāo)簽它呀。

其中attr是一個(gè)“示意性符號(hào)”螺男，表示“屬性名”。

• [color] { background: yellow; } //能選中具有color屬性的所有標(biāo)簽纵穿。
• [width] { border: 1px solid red; } //能選中具有width屬性的所有標(biāo)簽下隧。

（2）[attr="val"]

匹配具有某個(gè)屬性且屬性值為給定值的標(biāo)簽。

• [color=”red”] { background: yellow; } //能選中具有color屬性且值為”red”的所有標(biāo)簽谓媒。
• [width=”100”] { border: 1px solid red; } //能選中具有width屬性且值為”100”的所有標(biāo)簽淆院。
• <hr color=”red” />
• <table width=”100” >....</table>

（3）[attr~="val"]

匹配具有某個(gè)屬性且屬性值包含所給定單詞的標(biāo)簽。

注意：

? 必須是一個(gè)“單詞”形式篙耗，比如屬性值為”a dog”迫筑，則使用”dog”可以匹配，而使用”do”不能匹配宗弯。

? 對(duì)于中文脯燃，除非有明確的空格，否則一句連續(xù)的句子（含中文標(biāo)點(diǎn)符號(hào)）也只能算一個(gè)單詞蒙保。

• <p title=”a dog”>...</p>

• [title~=”dog”]{ .... } //可以選中上面那個(gè)p標(biāo)簽

• [title~=”do”]{ ..... } //選不上辕棚。

（4）[attr*="val"]

匹配具有某個(gè)屬性且屬性值包含給定的字符的標(biāo)簽。

• <p title=”a dog”>...</p>
• [title*=”dog”]{ .... } //可以選中上面那個(gè)p標(biāo)簽
• [title*=”do”]{ ..... } //也可以選上

（5）[attr^="val"]

匹配具有某個(gè)屬性且屬性值以給定的字符開頭的標(biāo)簽。

• <p title=”a dog”>...</p>
• [title^=”dog”]{ .... } //選不上
• [title^=”a”]{ .... } //能選上
• [title^=”a d”]{ ..... } //也可以選上

（6）[attr$="val"]

匹配具有某個(gè)屬性且屬性值以給定的字符結(jié)尾的標(biāo)簽逝嚎。

5扁瓢、偽類選擇器

偽類選擇器是通過單冒號(hào)（：）和特定的具有某種含義的單詞來(lái)確定所選元素。

所謂偽類選擇器补君，是相對(duì)于“類選擇器”來(lái)說的引几，對(duì)比如下：

類選擇器：

說明：類的名稱是由我們程序員來(lái)設(shè)定的，符合命名規(guī)范就行挽铁。

形式：.類名稱{ ... }

偽類選擇器：

說明：偽類的名稱是css標(biāo)準(zhǔn)中所預(yù)先設(shè)定的伟桅，我們不能自己設(shè)定∵淳颍可用的偽類名不多楣铁。

形式：:偽類名稱{ ... }

（1）:link, :visited, :hover, :active,

這4個(gè)偽類主要用于表示一個(gè)鏈接（也就是a標(biāo)簽）的4種不同狀態(tài)。

它們可以設(shè)定一個(gè)鏈接在不同狀態(tài)下的外觀表現(xiàn)（樣式表現(xiàn)）更扁。

• :link ——表示一個(gè)鏈接初始時(shí)候的狀態(tài)盖腕。
• :visited ——表示一個(gè)鏈接在訪問（點(diǎn)擊）過之后的狀態(tài)。
• :hover ——表示一個(gè)鏈接在“鼠標(biāo)移上去”（鼠標(biāo)懸停）的時(shí)候的狀態(tài)浓镜。
• :active ——表示一個(gè)鏈接在“活動(dòng)狀態(tài)”的時(shí)候的狀態(tài)溃列，通常就是點(diǎn)擊的瞬間（按住不放能看到）。

注意：

? :hover可以用于其它標(biāo)簽竖哩，并且經(jīng)常用哭廉！

? 對(duì)于a鏈接的這4個(gè)狀態(tài)，他們有順序問題相叁，必須按上述順序才有合理效果遵绰。

（2）E:focus

表示一個(gè)元素在成為可輸入狀態(tài)（獲得焦點(diǎn)）的時(shí)候，主要用于表單元素增淹。

其中“E”表示某個(gè)元素（或某個(gè)選擇器所選中的元素）椿访。

這樣連著寫，即表示該元素在獲得焦點(diǎn)的時(shí)候虑润，其樣式表現(xiàn)如何成玫。后面的“E”也都是這個(gè)意思。

也可以不用前面寫“E”拳喻，而是直接用“:focus”哭当，但實(shí)際應(yīng)用中，一般會(huì)在前面有這個(gè)限定冗澈。

比如：

• input:focus{ .... } //表示input元素在獲得焦點(diǎn)的時(shí)候
• :focus{ .... } //也可以不用input 钦勘，但此時(shí)其實(shí)所選擇的范圍擴(kuò)大了（不僅僅針對(duì)input元素）。

（3）E:first-child, E:last-child, E:only-child, E:nth-child(n)

這幾個(gè)偽類用于表示（或選中）“具有某種特征的子元素E”亚亲。

• E:first-child ——匹配作為父元素的第一個(gè)子元素E彻采。
• E:last-child ——匹配作為父元素的最后一個(gè)子元素E腐缤。
• E:only-child ——匹配作為父元素的唯一一個(gè)子元素E。
• E:nth-child(n) ——匹配作為父元素的第n個(gè)子元素E肛响。括號(hào)中的n是一個(gè)具體數(shù)字 岭粤，還可以這樣用：nth-child(2n+1）表示奇數(shù)項(xiàng)， nth-child(2n+2)表示偶數(shù)項(xiàng) 特笋。

注意：

上述也可以單用（不要冒號(hào)前面的部分）剃浇，但一般較少這樣用。

（4）E:empty雹有，E:checked偿渡，E:enabled，E:disabled

• E:empty

    匹配元素內(nèi)部為空（沒有內(nèi)容）的元素霸奕。其中“內(nèi)容”指的是一個(gè)標(biāo)簽內(nèi)是否有其他html代碼或文字。顯然吉拳，單標(biāo)簽內(nèi)是不可能有內(nèi)容的质帅。
  

• E:checked

    匹配被選中的元素（用于input且type為radio或checkbox的時(shí)候） 
  

• E:enabled

  匹配“可用的/有效的元素”（用于表單元素）。

• E:disabled

  匹配“不可用的/有效的元素”（用于表單元素）留攒。

顏色表示法（額外）

顏色有如下表示法 ：

? *英文單詞： red, blue, green, yellow, pink, purple

? *RGB表示法：

? 將一個(gè)顏色煤惩，使用紅（R，red）炼邀， 綠（G魄揉，green）， 藍(lán)（B拭宁，blue）來(lái)表示洛退。

? 這3個(gè)叫做“基本顏色”，都按0-255分為256個(gè)層級(jí)杰标。

? 所有顏色兵怯，都可以使用這3個(gè)顏色的不同層級(jí)（配比）來(lái)調(diào)配而成。

? 形式：rgb(紅的配比腔剂， 綠的配比媒区，藍(lán)的配比）；

? 舉例：

? color: rgb(255, 0, 0) //這是紅色

? color: rgb(0,255, 0); //這是綠色

? color:rgb(0, 0, 255); //藍(lán)色

? color:rgb(255, 255, 0); //黃色

? *RGBA表示法：

? A代表“透明度”掸犬，值從0到1的小數(shù)袜漩。0表示全透明。1表示不透明湾碎，此時(shí)就是RGB顏色

? 形式：rgba(紅的配比宙攻， 綠的配比，藍(lán)的配比胜茧，透明度）粘优；

? color: rgba(100, 30, 70, 0.5),

? color: rgba(255, 0, 0, 0.66) //這是紅色

? *16進(jìn)制表示法：

? 形式：#6個(gè)16進(jìn)制數(shù)字仇味！

? 前兩個(gè)數(shù)字表示“紅的配比”，中間兩數(shù)字表示綠的配比雹顺，后兩個(gè)數(shù)字表示藍(lán)的配比丹墨。

6、偽元素選擇器

偽元素選擇器是通過雙冒號(hào)（：：）和特定的具有某種含義的單詞來(lái)確定所選元素嬉愧。

偽元素選擇器通常是“本沒有這個(gè)元素（標(biāo)簽）”贩挣，但會(huì)創(chuàng)建出一個(gè)隱性元素并對(duì)其進(jìn)行樣式設(shè)定。

偽元素選擇器又稱為“偽對(duì)象選擇器”没酣。

（1）E::before

表示在元素E的內(nèi)部的最前面創(chuàng)建一個(gè)元素（偽元素）王财。

其中必須寫上一個(gè)屬性：content:”內(nèi)容”; //當(dāng)然，內(nèi)容可以為空裕便。

（2）E::after

表示在元素E的內(nèi)部的最后面創(chuàng)建一個(gè)元素（偽元素）绒净。

其中必須寫上一個(gè)屬性：content:”內(nèi)容”; //當(dāng)然，內(nèi)容可以為空偿衰。

（3）E::selection

表示將元素E中“選中的文字”單獨(dú)作為一個(gè)元素（偽元素）挂疆。

（4）E::first-letter

表示元素E中的“第一個(gè)字符”可以單獨(dú)作為一個(gè)元素（偽元素）。

（5）E::first-line

表示元素E中的“第一行”可以單獨(dú)作為一個(gè)元素（偽元素）下翎。

7缤言、常見選擇器的組合

選擇器的組合是將多個(gè)不同形式的選擇器組合起來(lái)以確定所選元素。

（1）E.className

舉例：

• div.c1{ .... }
• p.cc2{ .... }

注意：他們是“緊挨在一起的”视事！ 否則就成為了后代選擇器了胆萧。

（2）E#id

• div#id1{ ... }
• p#id2{ ... }

（3）E[屬性選擇器]

• [src] //找所有有src屬性的標(biāo)簽
• img[src] //找img標(biāo)簽并且有src屬性
• img[src*=”dog”] 找img標(biāo)簽并且有src屬性并且屬性中包含“dog”這個(gè)字符！

（4）并集選擇器：S1, S2

兩個(gè)選擇器俐东，可以使用一個(gè)英文逗號(hào)（,）連接起來(lái)跌穗。

表示這兩個(gè)選擇器，都使用同樣一個(gè)樣式設(shè)定（屬性設(shè)定）犬性。

比如：

• p, div{ ... }
• #price, .addr{ ... }
• p.cc, .cc, div .cc2{ ... } 瞻离。

（5）更復(fù)雜的選擇器組合舉例

• #main .container div { .... } ;
• #main .box>p[align=”center”] { .... }
• table#m2 div .box2 p:nth-child(2) { .... }
• div#m1 .box1 div input[type=’text’]:focus { .... }

8、css樣式的特性

（1）層疊性

所謂層疊性乒裆，是指對(duì)同一元素同一屬性的設(shè)定套利，后設(shè)定的某個(gè)樣式（屬性），會(huì)覆蓋之前設(shè)定的樣式鹤耍。

比如：

• .cc1{ color: red;}
• .cc1{color: blue;}
• <div class=”cc1”>文字內(nèi)容</div>

則class為cc1的元素中的文字顏色就是blue肉迫，即后者覆蓋了前者的設(shè)定。

分兩種情況：

• 兩個(gè)相同的選擇器稿黄，設(shè)置了同樣的屬性喊衫，后者覆蓋前者——層疊性體現(xiàn)之一 。
• 兩個(gè)不同但同級(jí)優(yōu)先性的選擇器杆怕，設(shè)置了同樣的屬性族购，也是后者覆蓋前者——體現(xiàn)之二 壳贪。

（2）繼承性

所謂繼承性，是指對(duì)某個(gè)元素所設(shè)定的樣式寝杖，不但影響該元素本身违施，還可能影響該元素的后代元素。

注意：

實(shí)際上繼承性不是普遍情況瑟幕，而只是少數(shù)一些屬性才具有繼承性（即能夠影響后代元素）磕蒲。

應(yīng)用中繼承性通常用在有關(guān)文字的屬性上。

（3）優(yōu)先性

所謂優(yōu)先級(jí)只盹，就是指一個(gè)標(biāo)簽的顯示效果（樣式表現(xiàn)）辣往，可能受若干個(gè)因素的影響，但哪一個(gè)因素的影響大殖卑，則最終效果就按該因素的設(shè)定站削，也就是“更優(yōu)先”的意思。

偽元素選擇器 > !important > 行內(nèi)樣式 > id選擇器 >類選擇器（或偽類選擇器） > 元素選擇器 > * > 繼承樣式 > 瀏覽器默認(rèn)樣式

其中孵稽，偽元素選擇器又有： ::first-letter > ::selection > ::first-line

上述加粗的部分實(shí)際應(yīng)用最常見钻哩。

什么是“!important”？

就是在一個(gè)屬性的設(shè)定中肛冶，在屬性值后面加“!important”標(biāo)識(shí)，然后在加分號(hào)（;）扯键，例如：

? .c1{ color: red!important; }

? #d1{ color: yellow; }

此時(shí)睦袖，如果上述兩個(gè)選擇器都能選中某一個(gè)元素，則其中的文字就是紅色（!important優(yōu)先了）

選擇器的優(yōu)先級(jí)怎么計(jì)算荣刑？

? 對(duì)于復(fù)合選擇器（比如div.c1馅笙， 或 #id1>.c2， 或#id2>.c3 p span厉亏，等等）董习，又該怎么確定他們的優(yōu)先級(jí)呢？

? 首先爱只，根據(jù)上述的基本優(yōu)先級(jí)原則皿淋，遵循“官大一級(jí)壓死人”的規(guī)則。

? 比如：

? 選擇器1： #id1{.....}

? 選擇器2： .c1>.c2>p{....}

? 則選擇器1優(yōu)先恬试；

? 其次窝趣，如果具有同級(jí)的優(yōu)先級(jí)，則比誰(shuí)的數(shù)量多训柴。

? 比如：

? 選擇器1： .cc1 .cc3 {.....}哑舒，

? 選擇器2： .cc1 .cc2 .cc3 {....}

? 則選擇器2優(yōu)先；

? 最后幻馁，綜合上述兩條規(guī)則就可以判斷出哪個(gè)是優(yōu)先的洗鸵。

三越锈、有關(guān)文字的屬性

1、字體屬性

字體屬性是用來(lái)設(shè)定“文字字形”的外觀表現(xiàn)膘滨，主要包括：

• color：顏色
• font-family：字體名稱
• font-size：大小
• font-style：是否斜體

font綜合屬性的語(yǔ)法：font：[ <' [font-style] '> || <' [font-weight] '> ]? <' [font-size] '> [ / <' [line-height] '> ]? <' [font-family] '> ];

2甘凭、文本屬性

文本屬性通常指的是作為文字內(nèi)容的整體性特性（而不是具體文字的表現(xiàn)特性）。

四踊东、有關(guān)盒子的屬性

盒子就是一個(gè)元素（標(biāo)簽）的所轄范圍北滥，簡(jiǎn)單來(lái)說，基本就是一個(gè)“矩形區(qū)域”闸翅。

1再芋、盒子的概述

所謂盒子，就是將html網(wǎng)頁(yè)中的標(biāo)簽在網(wǎng)頁(yè)版面中所占據(jù)的平面范圍坚冀，抽象出來(lái)的一個(gè)“視覺形狀”济赎。

一個(gè)最簡(jiǎn)單的理解就是：幾乎所有標(biāo)簽，都可以看做是一個(gè)“矩形盒子”记某，具有一定的寬高（區(qū)域）司训。

總體上來(lái)說，一個(gè)盒子液南，是由若干個(gè)部分構(gòu)成的壳猜，從內(nèi)到外依次包括：

? 盒子內(nèi)容區(qū)，內(nèi)邊距區(qū)滑凉，邊框统扳，外邊距區(qū)

box

content：內(nèi)容

padding：內(nèi)邊距，又稱為內(nèi)補(bǔ)白譬涡，是一片空白區(qū)域

border：邊框

margin：外邊距闪幽，又稱為外補(bǔ)白，也是一片空白區(qū)域

top涡匀，right盯腌，bottom，left：上陨瘩，右腕够，下级乍，左

特別注意：

1，一般情況下帚湘，一個(gè)盒子中放置內(nèi)容或其他元素（元素也是盒子）玫荣，實(shí)際是放在內(nèi)容區(qū)的。

2大诸，平常我們看不到內(nèi)邊距捅厂，邊框和外邊距，是因?yàn)樗麄兡J(rèn)都是0（寬度资柔，或厚度）焙贷。

2、盒子的寬高屬性width和height

設(shè)置盒子的寬高屬性贿堰，實(shí)際上設(shè)置的是盒子內(nèi)容區(qū)的寬高辙芍。

而盒子實(shí)際占據(jù)的區(qū)域的寬高，可以這樣來(lái)計(jì)算：

? 盒子所占寬：

? margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

? 盒子所占高 :

? margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom

除了這兩個(gè)基本寬高屬性羹与，還有以下4個(gè)范圍限定性寬高屬性故硅，有時(shí)候也會(huì)用一用：

min-width： 設(shè)定最小寬度

max-width： 設(shè)定最大寬度

min-height： 設(shè)定最小高度

max-height： 設(shè)定最大高度

3、邊框?qū)傩詁order

邊框?qū)傩跃褪窃O(shè)置一個(gè)盒子的邊框線的具體特性纵搁。

邊框線的特性有3個(gè)：

• border-style： 線型吃衅，屬性值通常有：solid(實(shí)線)， dashed(虛線)腾誉， dotted(點(diǎn)線)
• border-width： 線的粗細(xì)捐晶，長(zhǎng)度單位，比如1px
• border-color： 線的顏色妄辩，顏色值，比如red山上， rgb(255, 0, 0)眼耀， #FF3366

又由于一個(gè)盒子的邊框有4個(gè)方位(top, right, bottom, left)，則總體上就至少有12個(gè)邊框?qū)傩耘搴叮问綖椋?/p>

? border-方位-特性哮伟，比如：border-top-style， border-top-width妄帘，border-top-color楞黄， border-right-width， border-left-color抡驼，等等鬼廓。

? 示例：

? border-top-style: solid;

? border-right-color: #FF0000;

? border-left-width: 2px;

實(shí)際上碗殷，還有若干個(gè)“單邊綜合屬性”坐儿，比如：

? border-top：一次性設(shè)置上邊框線的特性岩梳；

? border-left：一次性設(shè)置左邊框線的特性啃匿；

應(yīng)用中，最常用的其實(shí)是“border”這一個(gè)最大的綜合屬性雷蹂，它一次性設(shè)置4個(gè)邊的3個(gè)特性伟端，比如：

? border： 1px solid red; //表示4變的邊框線都是寬度為1px的紅色實(shí)線。

4匪煌、內(nèi)邊距屬性padding

含義：內(nèi)邊距是指在盒子結(jié)構(gòu)中责蝠，盒子的邊框線和內(nèi)容之間的一段空白區(qū)域（內(nèi)容放不進(jìn)去）。

我們能設(shè)置的就是這個(gè)空白區(qū)域的大形ァ（寬度）霜医。同樣分4個(gè)方向，分別可以單獨(dú)設(shè)置：

padding-top：1px擎椰； //上內(nèi)邊距

padding-right：2px支子； //右內(nèi)邊距

padding-bottom：4px； //下內(nèi)邊距

padding-left：8px达舒； //左內(nèi)邊距

還有一個(gè)綜合屬性：

padding：寬度1【寬度2】【寬度3】【寬度4】值朋； //這個(gè)用的最多，推薦使用巩搏。

這個(gè)綜合屬性可以設(shè)置1-4個(gè)值昨登，不同個(gè)數(shù)的值，其含義不同贯底，如下所示：

• 1個(gè)值： 表示4個(gè)方向都是這個(gè)值丰辣。
• 2個(gè)值： 第1個(gè)表示上下邊距的值，第2個(gè)表示左右邊距的值 禽捆。
• 3個(gè)值： 第1個(gè)表示上邊距的值笙什，第2個(gè)表示左右邊距的值，第3個(gè)表示下邊距的值胚想。
• 4個(gè)值： 依次代表top琐凭， right， bottom浊服， right這4個(gè)方向的內(nèi)邊距的值统屈。

5、外邊距屬性

含義：外邊距是指在盒子結(jié)構(gòu)中牙躺，盒子的邊框線愁憔，跟盒子的外部其他元素之間的一段空白區(qū)域。

我們能設(shè)置的就是這個(gè)空白區(qū)域的大心蹩健（寬度）吨掌。

它的屬性設(shè)置和含義，跟內(nèi)邊距（padding）非常類似：

margin-top：1px； //上外邊距

margin-right：2px思犁； //右外邊距

margin-bottom：4px代虾； //下外邊距

margin-left：8px； //左外邊距

margin：寬度1 【寬度2】【寬度3】 【寬度4】激蹲； //同時(shí)設(shè)置4個(gè)方向棉磨，用的最多，推薦使用学辱。

外邊距的“重疊性”：

? 當(dāng)兩個(gè)垂直方向的外邊距（即margin-top和margin-bottom）挨在一起的時(shí)候（就是垂直方向上相鄰）乘瓤，則這兩個(gè)外邊會(huì)“重疊在一起”，表現(xiàn)為只有更大的那個(gè)外邊距的高度(本來(lái)“按理”是兩個(gè)相加的高度)策泣。

6衙傀、背景屬性background

含義：背景是指在盒子結(jié)構(gòu)中，襯托在邊框線范圍以內(nèi)的背景顏色或背景圖萨咕。

主要的背景屬性設(shè)置有：

設(shè)置背景顏色： background-color：yellow;

設(shè)置背景圖： background-image：url(圖片路徑); //注意统抬，圖片路徑是相對(duì)于當(dāng)前網(wǎng)頁(yè)或css文件(對(duì)外部樣式來(lái)說)

設(shè)置背景圖的位置（有背景圖的前提下有效）：background-position：水平位置 [，垂直位置]危队；

說明：

? 如果不設(shè)置該屬性聪建，默認(rèn)值為“0,0”，即在盒子的左上角茫陆。

? 可以設(shè)置1個(gè)值或2個(gè)值金麸；設(shè)置1個(gè)值的時(shí)候，第二個(gè)默認(rèn)為center（居中）簿盅。

? 水平位置：可以設(shè)置為長(zhǎng)度值挥下，或百分比，或以下固定值：left/center/right桨醋。

? 垂直位置：可以設(shè)置為長(zhǎng)度值棚瘟，或百分比，或以下固定值：/top/center/bottom

設(shè)置背景圖是否重復(fù)（有背景圖的前提下有效）：background-repeat：屬性值1 [,屬性值2]喜最；

有以下幾個(gè)值可用：

repeat： 重復(fù)解取，默認(rèn)值；

no-repeat： 不重復(fù)返顺；

repeat-x： 只在x方向重復(fù)；

repeat-y： 只在y方向重復(fù)蔓肯；

背景綜合屬性background：

? 可以同時(shí)設(shè)置上述幾個(gè)有關(guān)背景的屬性遂鹊，相互之間用空格隔開，比如：

? background：yellow蔗包； 只設(shè)置背景顏色秉扑；

? background：yellow url(./images/bg.jpg) no-repeat；

? background：yellow url(./images/bg.jpg) repeat-y lelft top；

? background：yellow url(‘/images.bg.jpg) repeat no-repeat 5px 10px舟陆；

7误澳、輪廓屬性outline

含義：輪廓指的是盒子邊框線外面再套一層“修飾性”線條，該線條只有視覺效果秦躯，不占版面空間忆谓。

實(shí)際上，如果有外邊距（margin）踱承，輪廓線是可以跟margin有重疊的倡缠。

輪廓屬性主要有：

outline-width： 輪廓線寬度

outline-style： 輪廓線線型

outline-color： 輪廓線顏色

outline-offset： 輪廓線距離邊框線的距離（間隙）

五、有關(guān)布局的屬性

1茎活、布局屬性

（1）盒子的顯示效果屬性

含義：指設(shè)置一個(gè)盒子（元素昙沦，標(biāo)簽）在網(wǎng)頁(yè)中的基本顯示特性，最常見的就是顯示為塊元素特性還是行內(nèi)元素特性载荔。

通過這個(gè)屬性盾饮，則所有表現(xiàn)型元素，都可以任意將其作為塊元素或者行內(nèi)元素來(lái)使用懒熙！

常用的屬性值有：

block： 顯示為塊狀元素

inline： 顯示為行內(nèi)元素

block-inline：顯示為行內(nèi)塊元素

? 含義：整體表現(xiàn)為塊元素(不會(huì)自動(dòng)折行)丘损，但可以跟其他行內(nèi)元素并行在一行(表現(xiàn)為行內(nèi)元素)。

? 說明：一個(gè)img就是典型的行內(nèi)塊元素（它本身不會(huì)折行煌珊，但一行可以放置多個(gè)）号俐。

none： 不顯示（隱藏元素）

關(guān)于元素按顯示特性分類：

塊狀元素：

元素獨(dú)占“一行”。

典型標(biāo)簽：div, p, h1~h6, pre, hr, ul, ol, li, dl, dt, dd, table定庵。

行內(nèi)元素：

元素在一行內(nèi)從左到右“流式顯示”吏饿，直到碰到行尾，再自動(dòng)換行下一行顯示蔬浙。

典型元素：span, a, b, strong, i, font, em,

行內(nèi)塊元素：

元素本身不換行（不折斷）猪落，但只要能顯示得下，則一行可以顯示多個(gè)（跟行內(nèi)元素一樣）畴博。

典型元素：

img, input, select, textarea, button, video, audio

特別注意：

• 行內(nèi)元素不能設(shè)置寬高值。行內(nèi)元素的寬高值由其中的內(nèi)容多少官疲、文字大小和行高決定途凫。
• 行內(nèi)元素不能設(shè)置上下外邊距和上下內(nèi)邊距（實(shí)際可以設(shè)置维费，但無(wú)效，不占空間）犀盟。
• 行內(nèi)元素可以設(shè)置邊框而晒，但上下邊框不占空間（左右邊框會(huì)占空間）。
• 行內(nèi)塊和塊元素都具有盒子的所有屬性阅畴，唯一區(qū)別是行內(nèi)塊可以多個(gè)出現(xiàn)在一行中倡怎。

（2）浮動(dòng)屬性float

① 浮動(dòng)的含義與作用：

浮動(dòng)就是讓一個(gè)元素往左或右邊“盡量擠靠”，以使其周邊文字（行內(nèi)元素）可以圍繞該浮動(dòng)元素顯示恶阴。

其典型的表現(xiàn)就是一張圖片向左對(duì)齊（align=”left”）的時(shí)候诈胜，圖片標(biāo)簽前后的文字都能夠繞著圖片展示。

讓圖片浮動(dòng)冯事，就能夠使其本身優(yōu)先靠在一邊（左邊或右邊）焦匈，而使“其他行內(nèi)元素”圍繞其展示。

浮動(dòng)屬性float的值包括：

left（向左浮動(dòng)）昵仅， right（向右浮動(dòng)）， none（不浮動(dòng)）够滑。

語(yǔ)法：

? float：left况毅； 或 float：right终娃；

② 浮動(dòng)的特性：

• 對(duì)行內(nèi)元素來(lái)說：浮動(dòng)元素會(huì)先于同一行中的行內(nèi)元素而占據(jù)其所設(shè)定方向的水平空間窍荧；
• 對(duì)塊狀元素來(lái)說：浮動(dòng)元素相當(dāng)于“浮起來(lái)了”咕痛，塊狀元素會(huì)被浮動(dòng)元素“遮擋”；
• 多個(gè)浮動(dòng)元素會(huì)依次往設(shè)定的方向“擠靠”，直到放不下，再往“下一行”，繼續(xù)“擠靠”错邦；
• 浮動(dòng)元素往下一行擠靠時(shí)魂拦，如碰到“突出物”谱姓，則會(huì)被“卡住”茄靠，但仍然按擠靠規(guī)則進(jìn)行顯示真竖；
• 浮動(dòng)盒子失去“垂直支撐力”讨韭，表現(xiàn)為不占它外層盒子高度疯搅，但仍然有寬度；

③ 浮動(dòng)的清除

當(dāng)一個(gè)盒子內(nèi)部出現(xiàn)浮動(dòng)元素，則該盒子不會(huì)被該浮動(dòng)元素“撐高”谁撼，也就是說屠缭，父盒子失去了理應(yīng)包住子盒子的高度奄喂。（當(dāng)然，如果父盒子中有其他非浮動(dòng)元素?fù)沃副唬簿途哂性撈渌歉?dòng)元素所應(yīng)該撐出的高度）

這通常都不符合正常的文檔布局的需要——正常的需要就是外層盒子需要包住內(nèi)層盒子。

這就需要清除浮動(dòng)了球化。

使用屬性clear菩浙，有常見的3個(gè)值：

clear: left:表示該元素左邊不要出現(xiàn)浮動(dòng)元素先嬉；

clear: right：表示該元素右邊不要出現(xiàn)浮動(dòng)元素；

clear:both：表示該元素兩邊都不要出現(xiàn)浮動(dòng)元素；——這是最常見的需求（場(chǎng)景）。

所謂清除浮動(dòng)，其實(shí)就是讓父盒子中的浮動(dòng)特性“終止”（結(jié)束）呼胚。這樣父盒子就具有了正常的高度，可以正常包住其內(nèi)部的浮動(dòng)盒子厨幻。

做法1：設(shè)置父盒子的overflow屬性為hidden；

/*css*/
.box1{
    ...
    overflow:hidden;
}
<!--html-->
<div class='box1'>
    <div class='inner'>文字</div>
</div>

做法2：在父盒子內(nèi)部的末尾添加一個(gè)“清除浮動(dòng)”的空盒子。

/*css*/
.box1{...}
.clear{
    clear:both;
}
.box1 .inner{...}
<!--html-->
<div class='box1'>
    <div class='inner'>文字</div>
    <div class='clear'></div>    <!--空盒子悄但，用于清除浮動(dòng)-->
</div>

做法3：給父盒子的末尾添加一個(gè)“清除浮動(dòng)”的偽元素（::after）净嘀。

/*css*/
.box1{...}
.box1::after{
    content:"";
    display:block;
    clear:both;
}
<!--html-->
<div class='box1'></div

（3）溢出屬性overflow

當(dāng)一個(gè)盒子里面有浮動(dòng)元素膜眠，則：

• 如果該盒子不設(shè)置高度辟躏，就應(yīng)該清除浮動(dòng)裹匙。
• 如果該盒子設(shè)置了高度惰匙，此時(shí)就應(yīng)該考慮溢出時(shí)的處理效果！
• 如果該盒子設(shè)置了高度，則里面盒子的浮動(dòng)雁比，清不清除都無(wú)關(guān)緊要。

含義：就是設(shè)置一個(gè)盒子內(nèi)部的內(nèi)容撤嫩，超出了該盒子的設(shè)定大小的時(shí)候偎捎，怎么顯示該內(nèi)容的問題。

overflow常用值有：

auto： 自動(dòng)程奠，按瀏覽器的默認(rèn)設(shè)置自動(dòng)處理们衙，可能各瀏覽器會(huì)有所不同欣鳖。

scroll： 滾動(dòng)友瘤，就是超出范圍的時(shí)候笛求，盒子出現(xiàn)滾動(dòng)條（像瀏覽器的滾動(dòng)條那樣）完沪。

hidden： 隱藏降传，就是將超出部分隱藏起來(lái)（視覺上不可見）柠掂。

visible： 顯示手素，就是雖然，超出去了，但仍然顯示出來(lái)硼补，這是這個(gè)屬性的默認(rèn)值，無(wú)需設(shè)置吐葵。

此時(shí)玛痊，雖然可能超出外層盒子，但不會(huì)影響外層盒子后續(xù)的位置（布局）狂打。

（4）可見性屬性visibility

含義：設(shè)置元素的可見性擂煞。主要有兩個(gè)值： 設(shè)置元素的可見性。主要有兩個(gè)值：visible：可見趴乡；hidden： 隱藏 对省。

特別注意：

設(shè)置visibility為hidden蝗拿，雖然元素不可見了，但元素原本所占的空間仍然存在（效果是一片空白）

對(duì)比：設(shè)置display為none蒿涎，也是隱藏蛹磺，但此時(shí)該元素不但不可見，而且不占版面空間同仆。

2萤捆、布局思想

（1）布局思想

表格布局思想：

? 使用表格，將頁(yè)面分割為若干區(qū)域：

? 縱向：就用表格的tr俗批。

? 橫向：就用表格的td實(shí)現(xiàn)俗或。

? 層層分割：每個(gè)區(qū)塊只考慮是“橫向”還是“縱向”。

? 表格布局思想岁忘，被拋棄的原因是：網(wǎng)頁(yè)展示速度慢辛慰！非常慢！

div+浮動(dòng)布局思想：

? 縱向：使用div干像，自然上下排列出來(lái)帅腌。

? 橫向：使用浮動(dòng)div，并做好清除浮動(dòng)工作（使浮動(dòng)元素不影響后續(xù)元素）麻汰。

? 層層分割：每個(gè)區(qū)塊只考慮是“橫向”還是“縱向”速客。

（2）定位屬性

定位就是通過有關(guān)定位的屬性來(lái)明確設(shè)定一個(gè)盒子的在以下兩個(gè)方面的位置：

? 1，在（x,y）平面上所處位置五鲫。

? 2溺职，在高度（z軸）方向的位置（層次）。

這是相對(duì)于一個(gè)盒子的“自然位置”和“浮動(dòng)位置”而言的位喂。

? 自然位置就是所謂的正常的文檔流所確定的位置浪耘。

? 浮動(dòng)位置就是由于浮動(dòng)的特性而確定的位置。

① 定位方式屬性position

position用于設(shè)定一個(gè)元素的位置按什么方式來(lái)確定塑崖。

通俗說就是設(shè)定元素“放在哪個(gè)位置”（可由4個(gè)定位屬性確定：top七冲，left, right, bottom）。

有如下4個(gè)值可用：

static： 靜態(tài)定位（其實(shí)就是沒有定位）

是一個(gè)元素的默認(rèn)定位方式规婆，也就是一個(gè)文檔中元素的正常文檔流所確定的定位澜躺。

對(duì)其給定定位位置（top，left, right, bottom）的值無(wú)效聋呢。

relative：相對(duì)定位

相對(duì)于其本來(lái)應(yīng)該所處的位置而設(shè)定一個(gè)相對(duì)性定位苗踪。

需給定位置（top颠区，left, right, bottom）

absolute：絕對(duì)定位

相對(duì)于其上層最近的一個(gè)非static定位元素而設(shè)定的一個(gè)絕對(duì)性定位削锰。

需給定位置（top，left, right, bottom）毕莱；

而如果其所有上級(jí)都沒有非static****定位元素器贩，就相對(duì)于窗口來(lái)定位——手冊(cè)上說的相對(duì)于body颅夺，是不準(zhǔn)確的！

fixed： 固定定位

相對(duì)于當(dāng)前網(wǎng)頁(yè)窗口而設(shè)定的一個(gè)絕對(duì)性定位蛹稍。

需給定位置（top吧黄，left, right, bottom）。

注意：

• relative定位雖然會(huì)改變?cè)氐奈恢盟艚悖挥绊懮霞?jí)盒子和相鄰盒子該有的正常寬高和位置拗慨。

• absolute定位和fixed定位的元素脫離了文檔流，也就是上級(jí)盒子中不會(huì)計(jì)算其寬高（像沒有一樣）

② 定位位置屬性：top奉芦，left赵抢，right，bottom

就是對(duì)于3種定位方式（relative声功， absolute烦却， fixed），所給定的具體位置值先巴。

可以是使用距離“上”其爵，“左”，“下”伸蚯，“右”各多少來(lái)定摩渺。

比如：

.cc1{
    position: absolute;
    left: 5px;  top: 10px;
}

注意：top和bottom不能同時(shí)用；left和right不能同時(shí)用剂邮！

③ 層疊屬性z-index

含義：

? 就是將一個(gè)元素（盒子）默認(rèn)情況下所展示在的那個(gè)平面（就是屏幕所在面）的垂直線當(dāng)做z軸方向（就是眼睛盯屏幕時(shí)的那個(gè)“視線”方向）证逻，朝眼睛方向?yàn)閦軸的正方向。則z-index可以設(shè)定一個(gè)元素（盒子）在z軸方向的“疊放層次”的高低抗斤，用整數(shù)表示囚企。越大值表示越高，也就是離眼睛越近瑞眼，自然就會(huì)覆蓋住比它低的其他盒子龙宏。

六、列表與表格樣式

列表樣式指的是ul（無(wú)序列表）和ol（有序列表）的表現(xiàn)特性伤疙；

表格樣式指的是table的表現(xiàn)特性银酗。

1、列表樣式

列表樣式主要是設(shè)置ul或ol前面的那個(gè)“列表符”的特性徒像，包括：

• list-style-type：用于設(shè)置列表樣式的類型黍特，比如原點(diǎn)(disc)，圓圈(circle)锯蛀，阿拉伯?dāng)?shù)字(decimal)灭衷，羅馬數(shù)字，英文字母旁涤。有了這個(gè)屬性翔曲，對(duì)ul和ol來(lái)說迫像，就沒有差別了！

• list-style-image：用于設(shè)置列列表前面的小圖標(biāo)（圖像）瞳遍，也就是說闻妓，用一個(gè)圖片來(lái)代替上面的列表符。

  如果設(shè)置了這項(xiàng)掠械，則list-style-type就失效由缆。

• list-style-position：用于設(shè)置列表項(xiàng)目符的位置，只有兩個(gè)值：outside(外面猾蒂，默認(rèn)）犁功，inside（里面）。指的是列表符婚夫，是放在li盒子的里面浸卦，還是放在li盒子的外面。

• list-style：上述3個(gè)屬性的綜合屬性案糙。

說明：實(shí)際應(yīng)用中限嫌，通常使用背景圖像來(lái)代替“l(fā)ist-style-type”和“l(fā)ist-style-image”。

2时捌、表格樣式

表格樣式主要是從整體上設(shè)置一個(gè)表格的外觀表現(xiàn)怒医，而不涉及到具體的每一個(gè)單元格。

表格樣式的屬性主要包括：

• border-collapse：設(shè)置表格的單元格邊線是否合并奢讨；有兩個(gè)值可用：separate（分離）稚叹，collapse（合并）
• border-spacin：設(shè)置表格單元格之間的間隙，長(zhǎng)度單位拿诸。注意：只有在border-collapse的值為separate時(shí)才有效梯皿。
• caption-side：設(shè)置表格標(biāo)題（caption標(biāo)簽）的放置位置邮辽，可用值有：top，bottom。（還有l(wèi)eft和right）斟薇。

七萄金、CSS3高級(jí)特性

1预愤、盒子新特性

（1）盒子陰影box-shadow

屬性：box-shadow

作用 ：用于設(shè)定一個(gè)盒子的陰影效果 钾虐。

形式： box-shadow：水平偏移值 垂直偏移值 【模糊值】【外延值】【顏色】【inset】；

說明：

• 至少設(shè)置兩個(gè)長(zhǎng)度值吏廉，分別表示陰影的水平偏移量和垂直偏移量泞遗，可以為負(fù)；
• 模糊值是設(shè)定陰影的模糊效果的寬度席覆，可以不設(shè)置史辙，則默認(rèn)為0；
• 外延值是設(shè)定陰影再“擴(kuò)大”的寬度，可以不設(shè)置髓霞，則默認(rèn)為0；
• inset表示設(shè)置“內(nèi)陰影”畦戒，可以不設(shè)置方库，則默認(rèn)為外陰影。

舉例：

.box1{ box-shadow: 2px 2px red; }

.box2{ box-shadow: 2px 5px 2px #00FFFF; }

.box3{ box-shadow: 2px 5px 2px 3px rgba(33, 33, 33, 0.5); }

.box4{ box-shadow: 2px 5px rgba(66,66,66,0.5) inset; }

（2）圓角邊框border-radius

屬性：border-radius

作用：用于設(shè)定一個(gè)盒子的圓角特性障斋。

形式：border-radius: 水平圓角半徑 [/ 垂直圓角半徑]纵潦；

說明：

• 垂直半徑可以省略，則其同水平半徑的值垃环。

• 半徑設(shè)置可以提供1~4個(gè)值邀层，具體如下。

  • 提供1個(gè)：4個(gè)角都為該值遂庄；

  • 提供2個(gè)：第1個(gè)表示上左和下右寥院，第2個(gè)表示上右和下左；

  • 提供3個(gè)：第1個(gè)表示上左涛目，第2個(gè)表示上右和下左秸谢；第3個(gè)表示下右；

  • 第供4個(gè)：分別代表4個(gè)角上的半徑（依次上左霹肝，上右估蹄，下右，下左）沫换。

舉例：

border-radius: 5px; //4個(gè)角半徑均為5px臭蚁；

border-radius: 5px/15px; //4個(gè)角水平半徑為5px，垂直半徑為15px讯赏；

border-radius: 5px 6px 7px 8px; //四個(gè)角半徑分別是5px垮兑，6px，7px漱挎，8px甥角；

border-radius: 5px 6px 7px 8px/15px 16px 17px 18px;

（3）圖像邊框border-image

① 原理說明：

圖像邊框是指使用一張圖片來(lái)作為一個(gè)盒子的邊框。其實(shí)就是將圖片作為背景圖鋪上到“邊框區(qū)域”上去识樱。但這個(gè)鋪設(shè)到邊框的圖片嗤无，并非像常規(guī)背景圖那樣簡(jiǎn)單直接地鋪設(shè)上去，而是有其特定的規(guī)則怜庸。

其鋪設(shè)原理是：

將要作為背景的圖片当犯，分割為9個(gè)部分（如上圖所示），然后4個(gè)角4個(gè)邊分別鋪設(shè)對(duì)應(yīng)部分割疾，中間區(qū)域就鋪設(shè)背景圖片的中間部分嚎卫。其中4個(gè)邊和中間區(qū)域，可以類似常規(guī)背景一樣進(jìn)行“平鋪(repeat)”,或進(jìn)行拉伸(縮放)。從而達(dá)到整個(gè)盒子的完美背景呈現(xiàn)拓诸。

② 主要屬性

邊框背景的主要屬性有：

• border-image-source：設(shè)置作為邊框背景的圖片源侵佃；

• border-image-slice ：設(shè)置要將邊框背景圖片進(jìn)行“切割”的分割方式。

  • 形式為：border-image-slice: 數(shù)值 [fill]; //特別注意：這里的數(shù)值不帶單位奠支！ 其中“數(shù)值”可以是1-4個(gè)值馋辈，分別代表上右下左4個(gè)方向的“切割厚度”。

  • fill代表“填充”倍谜，用于中間區(qū)域填充到盒子內(nèi)容區(qū)迈螟。

• border-image-width：設(shè)置圖片邊框的寬度，也可以設(shè)定1-4個(gè)值尔崔。

  • 通常設(shè)定為auto（自動(dòng)）答毫，此時(shí)就會(huì)使用border-image-slice所設(shè)定的切割厚度 。

• border-image-repeat：設(shè)置邊框背景的填充方式季春，可以設(shè)定1-2個(gè)值洗搂，表示橫向和縱向的填充方式。

  • 可用值如下：

  • stretch： 指定用拉伸方式來(lái)填充邊框背景圖载弄，這是默認(rèn)值蚕脏，也最常用，推薦使用侦锯。

  • repeat： 指定用重復(fù)平鋪方式來(lái)填充邊框背景圖驼鞭。類似背景圖的repeat，背景圖不改變大小 尺碰。

  • round： 指定用平鋪方式來(lái)填充邊框背景圖挣棕。圖片會(huì)根據(jù)邊框的尺寸動(dòng)態(tài) 調(diào)整圖片的大小直至正好可以鋪滿整個(gè)邊框。

  • space： 指定用平鋪方式來(lái)填充邊框背景圖亲桥。圖片會(huì)根據(jù)邊框的尺寸動(dòng)態(tài)調(diào)整圖片的之間的間距直至正好可以鋪滿整個(gè)邊框洛心。

注：有的瀏覽其中應(yīng)用邊框圖屬性需同時(shí)設(shè)定border屬性。

（4）背景圖高級(jí)特性

有關(guān)盒子的背景設(shè)置题篷，在CSS3中词身，又增加了幾個(gè)屬性，如下所示：

• background-attachment： 設(shè)置背景圖像的滾動(dòng)特性番枚，可用值有：

  • scroll： 相對(duì)于當(dāng)前盒子固定（盒子滾動(dòng)法严，則背景圖也會(huì)滾動(dòng)），這是默認(rèn)值葫笼。

  • local： 相對(duì)于當(dāng)前盒子的內(nèi)容固定（內(nèi)容滾動(dòng)深啤，則背景圖也會(huì)滾動(dòng)）。

  • fixed： 相對(duì)于當(dāng)前瀏覽器窗體固定（類似固定定位路星，即它會(huì)始終在窗口的某個(gè)位置）溯街。

• background-origin：設(shè)置背景圖像的參考原點(diǎn)（位置），實(shí)際就是背景出現(xiàn)的范圍〕饰簦可用值有：

  • border-box： 在boder區(qū)域范圍內(nèi)（含border）挥等。

  • padding-box：在padding區(qū)域范圍內(nèi)（含padding），這是默認(rèn)值堤尾。

  • content-box： 在內(nèi)容區(qū)域范圍內(nèi)肝劲。

  • 此屬性主要是跟background-position的位置計(jì)算有關(guān)。

• background-clip ：設(shè)置背景圖像向外裁剪的區(qū)域哀峻，裁剪范圍以外就被裁剪了(不顯示)涡相≌懿矗可用值有：

  • border-box： 從border區(qū)域外沿（即不含border）開始向外裁剪背景剩蟀，這是默認(rèn)值。

  • padding-box：從padding區(qū)域外沿（即不含padding）開始向外裁剪背景切威。

  • content-box： 從content區(qū)域外沿開始向外裁剪背景育特。

• background-size： 值1 [, 值2] 。設(shè)置背景圖像的大小先朦，可設(shè)置2個(gè)值缰冤，分別表示橫向和縱向的大小≡海可用值有：

  • 長(zhǎng)度： 用長(zhǎng)度值指定背景圖像大小棉浸。不允許負(fù)值。

  • 百分比： 用百分比指定背景圖像的縮放大小刺彩。不允許負(fù)值迷郑。

  • auto： 背景圖像的真實(shí)大小。

  • cover： 將背景圖像等比縮放到完全覆蓋容器创倔，背景圖像有可能超出容器嗡害。

  • contain： 將背景圖像等比縮放到寬度或高度與容器的寬度或高度相等，背景圖像不超出容器畦攘。

• 背景重復(fù)性的值在C3中多兩個(gè)可用的值：round霸妹，space

（5）漸變背景gradient

漸變背景其實(shí)是設(shè)置background-image屬性的值，設(shè)置的不是一個(gè)單一顏色知押，而是多個(gè)顏色叹螟，并按給定方式進(jìn)行漸變 。

① 線性漸變linear-gradient

• 含義：線性漸變是讓背景顏色按照某個(gè)方向（角度）的方式來(lái)進(jìn)行過渡變化台盯。

• 語(yǔ)法：background-image：linear-gradient([角度首妖，] 顏色1，顏色2 [爷恳，顏色n...] );

• 說明：

  • 角度以從下到上（12點(diǎn)整的方向）為0度有缆，順時(shí)針為正角度，默認(rèn)為180度。

  • 角度還可以使用to left棚壁，to right杯矩，to top， to bottom這幾個(gè)關(guān)鍵字袖外；

  • 至少設(shè)置2個(gè)顏色（這樣才能實(shí)現(xiàn)漸變）史隆；可設(shè)置多個(gè)顏色，都能自動(dòng)實(shí)現(xiàn)漸變曼验；

  • 每個(gè)顏色還可以設(shè)置“截止位置”泌射，表示該顏色在漸變中的“關(guān)鍵點(diǎn)”（位置），形式為：顏色 位置鬓照，比如：red 30px; 或 #00ff00 20%;

• 舉例：

  • background-image：linear-gradient(red, blue); //從上到下由紅色轉(zhuǎn)藍(lán)色

  • background-image：linear-gradient(90deg, red, blue); //從左到右由紅色轉(zhuǎn)藍(lán)色

  • background-image：linear-gradient(90deg, red, blue, green); //從左到右由紅色轉(zhuǎn)藍(lán)色再轉(zhuǎn)綠色

  • background-image：linear-gradient(45deg, red, blue 30%, green ); //從左下角到右上角熔酷，由紅色轉(zhuǎn)藍(lán)色到30%位置，然后再漸變?yōu)榫G色終止

② 徑向漸變r(jià)adial-gradient

• 含義：徑向漸變是讓背景顏色從某個(gè)中心點(diǎn)以圓或橢圓向外擴(kuò)散的方式來(lái)進(jìn)行過渡變化豺裆。

• 語(yǔ)法：background-image：radial-gradient( [形狀][大小] [at 位置拒秘，] 顏色1，顏色2 [臭猜，顏色n...])

• 說明：

  • 形狀可以是circle（圓）或ellipse（橢圓）躺酒，默認(rèn)是跟隨盒子（可能是圓，也可能是橢圓）蔑歌；

  • 大小是指漸變從圓心開始向外進(jìn)行過渡變化的距離（半徑）羹应，圓用一個(gè)值，橢圓用2個(gè)值（空格隔開）次屠；

    • 大小還可以使用如下4個(gè)關(guān)鍵字：

    • farthest-corner： 最遠(yuǎn)角园匹，表示從圓心開始，漸變到最遠(yuǎn)的角的位置帅矗。下面也類似偎肃；

    • farthest-side： 最遠(yuǎn)邊；

    • closest-corner： 最近角浑此；

    • closest-side： 最近邊累颂；

  • 位置可以是一個(gè)值（表示橫坐標(biāo)，縱坐標(biāo)默認(rèn)居中）凛俱，或2個(gè)值（橫縱坐標(biāo)紊馏，空格隔開）；位置還可以使用top蒲犬， right朱监， bottom，left原叮，center這5個(gè)關(guān)鍵字赫编；

  • 顏色至少包含2個(gè)巡蘸，每個(gè)顏色還可以設(shè)定“截止位置”；

    • background-image: radial-gradient(red, green, white); //默認(rèn)為適應(yīng)盒子擂送，并在中心
    • background-image: radial-gradient(circle,red, green, white); //設(shè)定為圓形
    • background-image: radial-gradient(circle at 60px 30px, red, green, white); //圓心位置為（60,30）
    • background-image: radial-gradient(farthest-side at 60px 30px, red, green, blue); //漸變到最遠(yuǎn)角
    • background-image: radial-gradient(circle closest-side, red, green, blue);//圓形悦荒，漸變到最近的邊
    • background-image: radial-gradient(100px, red, green, blue);//大小為100px(圓形)，默認(rèn)在中心位置
    • background-image: radial-gradient(100px 50px, red, green, blue);//大小為100px和50px(橢圓形)

2嘹吨、多欄布局column

（1）基本概念

所謂多欄布局搬味，就是一個(gè)盒子設(shè)置欄寬屬性或欄數(shù)量屬性，就構(gòu)成多欄布局蟀拷，則其中的內(nèi)容碰纬，會(huì)先在第一欄展示，第一欄展示滿后问芬，再展示到第二欄悦析，以此類推。

多欄布局最常見的就是雜志或報(bào)紙上常見的“分欄版面”愈诚。比如雜志最常用的是分為兩欄她按。

多欄布局通常用于盒子內(nèi)部主要以文字（行內(nèi)元素）為主的情形牛隅。

給一個(gè)盒子設(shè)定欄寬屬性或欄數(shù)量屬性（二選一）炕柔，就可以實(shí)現(xiàn)多欄布局效果。

（2）主要屬性

• 欄寬度屬性column-width
  • 設(shè)定分欄布局中一個(gè)欄的寬度值媒佣；實(shí)際寬度會(huì)根據(jù)外層盒子的寬度有所調(diào)整（可能變大）匕累。
• 欄數(shù)量屬性column-count
  • 設(shè)定分欄布局中的總欄數(shù)。
• columns屬性：
  • 上述column-width和column-count的綜合屬性默伍；
  • 使用形式：columns: 欄寬值 欄目數(shù)欢嘿；
  • 實(shí)際表現(xiàn)上，當(dāng)總寬度大于等于“欄寬x欄目數(shù)”時(shí)也糊，欄目數(shù)固定炼蹦，欄寬可能會(huì)有所調(diào)整（變大）。
  • 當(dāng)總寬度小于“欄寬x欄目數(shù)”時(shí)狸剃，欄目數(shù)會(huì)減少（保證欄寬不小于設(shè)定的欄寬）掐隐。
• 欄間隙屬性column-gap
  • 設(shè)定欄與欄之間的寬度值，默認(rèn)是font-size大谐佟（比如14px）
• 欄分割線屬性column-rule
  • 欄分割線屬性虑省，就是兩欄之間的線，如果不設(shè)定默認(rèn)就是“空的”僧凰，就沒有分割線探颈，只有間隙（gap）。
  • 欄分割線屬性類似邊框線（但只是一條線）训措，可以設(shè)定：線寬伪节，線型光羞，線色。
  • 有如下幾個(gè)屬性：
    • column-rule-width：設(shè)定線寬怀大，比如1px狞山，5px；
    • column-rule-style：設(shè)定線型叉寂，比如solid萍启，dashed，dotted屏鳍；
    • column-rule-color：設(shè)定線色勘纯，比如red， #ff9966钓瞭， rgb(200,100,0)
    • column-rule：上述3個(gè)屬性的綜合屬性驳遵。

3、彈性布局flex

（1）基本概念

彈性布局是指山涡，可以設(shè)定一個(gè)容器盒子中的若干個(gè)（數(shù)量可變的）子盒子堤结，在父盒子中的橫向或縱向有序整齊排列。其典型應(yīng)用就是頁(yè)面中的導(dǎo)航布局的實(shí)現(xiàn) 鸭丛。

彈性布局的實(shí)現(xiàn)竞穷，主要是在父盒子（容器盒子）上定義相應(yīng)的屬性，則其內(nèi)部的子盒子就能夠按照所定義的樣式進(jìn)行顯示鳞溉。

（2）主要屬性

彈性布局的主要屬性設(shè)置包括如下幾個(gè)：

• display: flex;

  • 說明：設(shè)置盒子的顯示模式為彈性盒模型瘾带，即該盒子成為了彈性盒模式的容器盒子。

• flex-direction:

  • 說明：設(shè)置彈性盒模式的子盒子的排列方式熟菲，有如下4個(gè)方式（4個(gè)屬性值）：
    • row：橫向排列
    • row-reverse：橫向排列看政，但順序反向
    • column：縱向排列
    • column-reverse：縱向排列，但順序反響

• flex-wrap：

  • 說明：設(shè)置彈性盒模式的子盒子超出時(shí)的換行特性抄罕，常用屬性值有：
    • nowrap：不換行允蚣，盡量在一行顯示，這是默認(rèn)值呆贿。此時(shí)有可能會(huì)超出父盒子（當(dāng)子盒子有最小寬度設(shè)置時(shí)）嚷兔。
    • wrap：自動(dòng)換行
    • wrap-reverse：換行，但反向顯示（即其實(shí)顯示到上一行去了）

• justify-content：

  說明：設(shè)置子盒子的主軸方向的一行中的排布方式榨崩。

  所謂主軸就是由flex-direction所決定的方向?yàn)橹鬏S谴垫，對(duì)應(yīng)另一個(gè)方向?yàn)檩o軸。

  假如flex-direction為column或column-reverse母蛛，則縱向?yàn)橹鬏S翩剪，橫向?yàn)檩o軸。

  • 常用屬性值有：
    • flex-start：子盒子從所設(shè)定的起始位置開始排列出來(lái)彩郊，空隙留后面前弯；
    • flex-end：子盒子從所設(shè)定的終止位置開始排列出來(lái)蚪缀，空隙留前面；
    • center：子盒子完全從居中的位置開始排列出來(lái)恕出，空隙留兩邊询枚；
    • space-between：子盒子兩邊緊靠父盒子，空隙留在相互的中間且均等浙巫；
    • space-around：子盒子均衡布置金蜀，分布給每個(gè)盒子的空隙都一樣。

兩個(gè)重要概念：主軸的畴，輔軸

主軸方向：平面直角坐標(biāo)系中X軸的方向渊抄。

輔軸方向：平面直角坐標(biāo)系中Y軸的方向。

flex-direction: row-reverse;

flex-wrap:wrap-reverse;

• align-content：

  說明：設(shè)置子盒子在輔軸方向的排布方式丧裁，大于一行且輔軸有多余空間時(shí)時(shí)才有效护桦。

  • 常用的屬性值有：
    • flex-start：子盒子從所設(shè)定的起始位置開始排列出來(lái)，空隙留后面煎娇；
    • flex-end：子盒子從所設(shè)定的終止位置開始排列出來(lái)二庵，空隙留前面；
    • center：子盒子完全從居中的位置開始排列出來(lái)缓呛，空隙留兩邊催享；
    • space-between：子盒子兩邊僅靠父盒子，空隙留在相互的中間强经；
    • space-around：子盒子均衡布置睡陪，空隙均衡出現(xiàn)寺渗；

• align-items：

  說明：設(shè)置子盒子在當(dāng)前行中輔軸方向的對(duì)齊方式匿情。

  • flex-start：子盒子定位于所設(shè)定的起始位置，空隙留后面信殊；
  • flex-end：子盒子定位于設(shè)定的終止位置炬称，空隙留前面；
  • center：子盒子定位于居中的位置涡拘，空隙留兩邊玲躯；
  • baseline：子盒子定位于基準(zhǔn)位置；
  • stretch：子盒子進(jìn)行拉伸（充滿縱軸）鳄乏；

4跷车、2D變換transform（2D）

（1）基本概念

2D變換的基本含義是：將瀏覽器頁(yè)面（電腦屏幕所在面）當(dāng)做一個(gè)二維平面，然后橱野，通過CSS的設(shè)置朽缴，使網(wǎng)頁(yè)元素能夠在這個(gè)平面上進(jìn)行“形狀變換”。

簡(jiǎn)單說就是水援，在一個(gè)元素的“本來(lái)”外觀表現(xiàn)上密强，可以對(duì)其實(shí)行：位移茅郎，旋轉(zhuǎn)，縮放或渤，斜拉變形等系冗。

（2）主要屬性

• transform：

  這是最主要的變換屬性；其實(shí)所有變換都是通過這個(gè)屬性薪鹦，使用不同的值來(lái)實(shí)現(xiàn)的掌敬。

  而所用不同的值，主要就是指定不同的變換函數(shù)（一個(gè)單詞）池磁，以及所需要變換的數(shù)值涝开；

  常用的2D變換形式如下：

  • transform: translatex(值)： 將元素水平移動(dòng)給定的值；
  • transform: translatey(值)： 將元素垂直移動(dòng)給定的值框仔；
  • transform: translate(x值舀武，y值)： 同時(shí)進(jìn)行水平和垂直移動(dòng)；
  • transform: rotate(角度值)： 將元素旋轉(zhuǎn)給定的角度离斩；
    • 旋轉(zhuǎn)的方向是：正值為順時(shí)針方向银舱，負(fù)值為逆時(shí)針方向；
  • transform: scalex(比例值)： x方向進(jìn)行縮放跛梗；
  • transform: scaley(比例值)： y方向進(jìn)行縮放寻馏；
  • transform: scale(x比值, y比值): 同時(shí)進(jìn)行水平和垂直方向的縮放；
  • transform: skewx(角度值)： 將元素從x方向拉伸給定的角度核偿；
  • transform: skewy(角度值)： 將元素從y方向拉伸給定的角度诚欠；
  • transform: skew(x角度,y角度): 將元素從x和y方向拉伸給定的角度；

  特別注意：

  對(duì)一個(gè)元素可以同時(shí)進(jìn)行多項(xiàng)變換漾岳。

  進(jìn)行多項(xiàng)變換時(shí)轰绵，多個(gè)變換屬性值要一并寫在一起，相互之間用空格隔開尼荆，類似這樣：

  ? transform: translatex(5px) translatey(10px) rotate(20deg) scale(1.5, 2);

  對(duì)于進(jìn)行了變換的元素左腔，雖然形狀或位置都可能變了，但并不影響其他元素(即不影響布局效果)捅儒。

• transform-origin：

  • 指定變換時(shí)的“原點(diǎn)”（基點(diǎn)）液样；默認(rèn)是該變換元素的“中心點(diǎn)”（center, center）；形式：

    transform-origin：水平坐標(biāo) 垂直坐標(biāo)巧还；

    其中： 水平坐標(biāo)可以用一個(gè)長(zhǎng)度值鞭莽，或百分比赘来，或left捞魁，center，right栗涂；

    ? 垂直坐標(biāo)可以用一個(gè)長(zhǎng)度值摇锋，或百分比丹拯，或top站超，center，bottom乖酬；

5死相、3D變換transform（3D）

（1）基本概念

3D變換是在2D變換的基礎(chǔ)上，再加上一個(gè)維度（z軸）咬像，構(gòu)成了三維空間算撮。

新加上的這個(gè)z軸，是跟網(wǎng)頁(yè)頁(yè)面（電腦屏幕）垂直的那個(gè)方向县昂，也就是眼睛到屏幕的“垂直線”肮柜。

相當(dāng)于將網(wǎng)頁(yè)元素（一個(gè)矩形的平面）置于3D空間中，并對(duì)其實(shí)行某種變換倒彰。

（2）主要屬性

3D變換仍然還使用2D變換的2個(gè)屬性（transform和transform-origin）审洞，不過在transform的屬性值中，又增加了若干變換函數(shù)待讳，以達(dá)到在3D空間中將盒子進(jìn)行某種變換操作的目的芒澜。

另外，對(duì)于3D變換创淡，還會(huì)多出來(lái)幾個(gè)屬性痴晦，分別用于設(shè)定3D變換場(chǎng)景下所需要的一些特征信息。

3D變換的主要屬性有：

• transform-style：

  用于設(shè)定元素變換的方式（2D還是3D）琳彩，默認(rèn)是flat（平面誊酌，也就是2D）；

  設(shè)置為preserve-3d露乏，就可以實(shí)現(xiàn)3D變換碧浊。

  注意：該屬性應(yīng)該設(shè)置在變換元素的父級(jí)元素上。

• perspective：

  透視距離施无，用于設(shè)定觀察3D視圖時(shí)眼睛離屏幕（也就是z=0）的距離辉词，即觀察點(diǎn)的遠(yuǎn)近。

  默認(rèn)透視距離是“無(wú)窮大”猾骡，即最遠(yuǎn)處。

  注意：該屬性應(yīng)該設(shè)置在變換元素的上級(jí)元素上敷搪。

• perspective-origin：

  透視點(diǎn)兴想，即觀察3D視圖時(shí)眼睛的位置，也就是眼睛直對(duì)屏幕的那個(gè)點(diǎn)在（x赡勘，y）坐標(biāo)系上的坐標(biāo)值嫂便。

  默認(rèn)為（center，center）闸与，也就是父元素的中心點(diǎn)毙替。

  注意：該屬性應(yīng)該設(shè)置在變換元素的上級(jí)素上岸售。

• transform-orgin ：

  含義跟2D變換一樣，用于指定元素變換時(shí)的“原點(diǎn)”（基點(diǎn)）厂画；

• transform：

  含義跟2D變換一樣凸丸，只是多了一些有關(guān)3D變換的變換函數(shù)，主要有：

  • translateX(x), translateY(y), translateZ(z), translate3d(x, y, z)：
  • rotateX(x角度), rotateY(y角度), rotateZ(z角度), rotate3d(x, y, z, deg)：旋轉(zhuǎn)變換袱院；其旋轉(zhuǎn)規(guī)則為：
    • 左手“抓住”某軸屎慢，大拇指指向該軸正方向，則正值會(huì)沿其余手指的方向旋轉(zhuǎn)忽洛，否則相反腻惠；
    • rotate3d中，x欲虚，y集灌，z是數(shù)值，是相對(duì)大小复哆，deg才是角度绝页。
  • scaleX(x), scaleY(y), scaleZ(z), scale3d(x, y, z)：縮放變換 。

（3）案例

<style>
        .box{
            border:solid 1px red;
            width: 800px;
            height:500px;
            margin:10px auto ;
            padding-top:50px;
        }
        .box>.pic{
            border:solid 2px blue;
            width:200px;
            height:300px;
            position:relative;
            margin:0 auto;
            perspective: 1000px;
            perspective-origin:center -100px;
            transform-style:preserve-3d;
        }
        .box>.pic>img{
            width:200px;
            height:300px;
            position:absolute;
            left:0;
        }
        .box>.pic>img:nth-child(1){
            transform:rotatey(0deg) translatez(300px);
        }
        .box>.pic>img:nth-child(2){
            transform:rotatey(40deg) translatez(300px);
        }
        .box>.pic>img:nth-child(3){
            transform:rotatey(80deg) translatez(300px);
        }
        .box>.pic>img:nth-child(4){
            transform:rotatey(120deg) translatez(300px);
        }
        .box>.pic>img:nth-child(5){
            transform:rotatey(160deg) translatez(300px);
        }
        .box>.pic>img:nth-child(6){
            transform:rotatey(200deg) translatez(300px);
        }
        .box>.pic>img:nth-child(7){
            transform:rotatey(240deg) translatez(300px);
        }
        .box>.pic>img:nth-child(8){
            transform:rotatey(280deg) translatez(300px);
        }
        .box>.pic>img:nth-child(9){
            transform:rotatey(320deg) translatez(300px);
        }

    </style>
</head>
<body>
    <div class="box">
        <div class="pic">
            <img src="images/girl1.jpg" alt="">
            <img src="images/girl2.jpg" alt="">
            <img src="images/girl3.jpg" alt="">
            <img src="images/girl4.jpg" alt="">
            <img src="images/girl5.jpg" alt="">
            <img src="images/girl6.jpg" alt="">
            <img src="images/girl7.jpg" alt="">
            <img src="images/girl8.jpg" alt="">
            <img src="images/girl9.jpg" alt="">
        </div>
    </div>

6寂恬、過渡效果transition

（1）基本概念

過渡（transition）是指续誉，能夠讓一個(gè)元素的屬性，從某個(gè)值初肉，變換到另一個(gè)值的時(shí)候酷鸦，不是表現(xiàn)為“立即實(shí)現(xiàn)”（突然變化），而是表現(xiàn)為“逐步變化”牙咏，則視覺效果看起來(lái)就是“動(dòng)畫效果”了 臼隔。

過渡效果在應(yīng)用中通常結(jié)合鼠標(biāo)的動(dòng)作而展現(xiàn)出來(lái)，最常見的就是使用“:hover”偽類妄壶。

過渡效果的設(shè)置主要設(shè)置如下幾項(xiàng)：

? 參與過渡的屬性名摔握，過渡的時(shí)長(zhǎng)，過渡的方式丁寄，以及過渡發(fā)生前的延遲時(shí)間氨淌。

（2）主要屬性

• transition-property：要用于實(shí)現(xiàn)過渡的屬性名；
• transition-duration：過渡時(shí)長(zhǎng)伊磺；比如：2s盛正；
• transition-timing-function：過渡方式；常用的過渡方式如下所示：
  • linear：線性過渡屑埋。
  • ease：平滑過渡豪筝，這是默認(rèn)值
  • ease-in：由慢到快。
  • ease-out：由快到慢 。
  • ease-in-out：由慢到快再到慢续崖。
• transition-delay：過渡效果發(fā)生前的延遲時(shí)長(zhǎng)敲街，比如：1s 。
• transition：以上4屬性的綜合屬性严望，并可以設(shè)定多屬性過渡（比如位置和顏色同時(shí)變化)多艇，形式如下：
  • transition：第1個(gè)過渡 【，第2個(gè)過渡】【著蟹，第3個(gè)過渡】 【......】墩蔓；
  • 每個(gè)過渡的形式為：過渡屬性名 過渡時(shí)長(zhǎng) 【過渡方式】【延遲時(shí)長(zhǎng)】；

代碼示例：

/*示例1*/
transition-property: width;
transition-duration: 2s;
transition-timing-function: ease-in-out;
trasitiion-delay: 3s;
/*示例2*/
transition: width  2s  ease-in-out  3s;
/*示例3*/
transition-property: width,  height,  background ;
transition-duration: 2s  3s  3s;
transition-timing-function: ease  ease-in-out  linear;
trasitiion-delay: 3s  2s  0s;
/*示例4*/
transition: width 2s  ease , height 2s 2s  linear, background 2s  4s ;

transition-timing-function的效果研究：

<style>
    /**
     * transition-timing-function：過渡方式萧豆；常用的過渡方式如下所示：
     * linear：線性過渡奸披。
     * ease：平滑過渡，這是默認(rèn)值
     * ease-in：由慢到快涮雷。
     * ease-out：由快到慢阵面。
     * ease-in-out：由慢到快再到慢。
     */
        .box{
            width:1000px;
            border:solid 1px red;
        }
        .box>div{
            width:100px;
            height:50px;
            border:solid 1px blue;
            margin:5px;
        }
        .box:hover>div{margin-left:850px;}

        .box>.box1{transition: margin-left  10s linear;}
        .box>.box2{transition: margin-left  10s ease;}
        .box>.box3{transition: margin-left  10s ease-in;}
        .box>.box4{transition: margin-left  10s ease-out;}
        .box>.box5{transition: margin-left  10s ease-in-out;}

    </style>
</head>
<body>
    <div class="box">
        <div class="box1">linear</div>
        <div class="box2">ease</div>
        <div class="box3">ease-in</div>
        <div class="box4">ease-out</div>
        <div class="box5">ease-in-out</div>
    </div>
</body>

7洪鸭、動(dòng)畫效果animation

（1）基本概念和語(yǔ)法

動(dòng)畫效果其實(shí)可以看著過渡效果的升華版：

? 過渡效果是實(shí)現(xiàn)元素在某個(gè)（或某些）屬性的兩個(gè)不同值之間的狀態(tài)變化效果样刷；

? 動(dòng)畫效果是預(yù)先定義好某個(gè)（或某些）屬性的多個(gè)不同值之間的狀態(tài)變化效果，并對(duì)之命名览爵，而后可多次應(yīng)用在不同的元素上置鼻。

簡(jiǎn)單說就是：

? 過渡效果是“實(shí)現(xiàn)某元素的某種狀態(tài)變化效果”，

? 動(dòng)畫效果是“定義某種狀態(tài)變化效果蜓竹，并可拿來(lái)用”箕母。

動(dòng)畫效果的基本語(yǔ)法如下：

<style>
@keyframes  動(dòng)畫名{
    0% {屬性設(shè)置。俱济。嘶是。}        /*表示動(dòng)畫的起始處/*
    ...... {屬性設(shè)置。蛛碌。聂喇。}    /*這表示還可以設(shè)置中間的若干狀態(tài)*/
    100% {屬性設(shè)置。蔚携。希太。}      /*表示動(dòng)畫的結(jié)束處/*
}
選擇器{
    animation：動(dòng)畫名 動(dòng)畫播放設(shè)置；       /*動(dòng)畫播放設(shè)置有若干項(xiàng)控制項(xiàng)*/
}
</style>

說明：

• 可以設(shè)置（定義）若干個(gè)動(dòng)畫(取不同名稱)浮梢，后續(xù)都可以用在不同的元素上（選擇器所決定）跛十；
• 每個(gè)動(dòng)畫可以定義若干個(gè)關(guān)鍵狀態(tài)（百分比決定），通常至少需要0%和100%秕硝；
• 每個(gè)狀態(tài)可以定義若干個(gè)屬性值，表示動(dòng)畫播放到該時(shí)刻時(shí)的元素外觀表現(xiàn)；
• 屬性的設(shè)置跟通常css的屬性設(shè)置一樣远豺，比如：color:red; width:200px; transform:rotate(90deg);
• 動(dòng)畫播放設(shè)置中可以設(shè)置若干項(xiàng)奈偏，比如：持續(xù)時(shí)間，播放方式躯护，延遲時(shí)間惊来，是否循環(huán)，等等棺滞；

（2）主要屬性

• animation-name：動(dòng)畫名裁蚁；
• animation-duration：動(dòng)畫持續(xù)時(shí)間；
• animation-timing-function：動(dòng)畫播放播放方式（效果）继准，也有如下幾個(gè)常用的效果名：
  • linear：線性過渡枉证，就是勻速進(jìn)行
  • ease：平滑過渡，這是默認(rèn)值
  • ease-in：由慢到快移必。
  • ease-out：由快到慢 室谚。
  • ease-in-out：由慢到快再到慢。
• animation-delay：動(dòng)畫播放前的延遲時(shí)間崔泵；
• animation-iteration-count：動(dòng)畫播放循環(huán)次數(shù)秒赤，使用數(shù)字或infinite（無(wú)限）；
• animation-direction：動(dòng)畫播放方向（正向還是反向）憎瘸，可用的值有：
  • normal：常規(guī)（就是從前往后播放）
  • reverse：反向（就是從后往前播放）
  • alternate：交替（就是先從前往后入篮，再?gòu)暮笸埃シ糯螖?shù)大于1次才有意義
  • alternate-reverse：反向交替（就是先從后往前幌甘，再?gòu)那巴螅┏笔郏シ糯螖?shù)大于1次才有意義
• animation-fill-mode：動(dòng)畫停止（播放結(jié)束）時(shí)元素停留的狀態(tài)，可用的值有：
  • forwards： 停留在前面（動(dòng)畫播放的結(jié)尾處）含潘；
  • backwards： 停留在后面（動(dòng)畫播放的開時(shí)處）饲做；
  • both： 兩邊都可停（動(dòng)畫停在哪邊就哪邊）；
• animation-play-state：設(shè)置動(dòng)畫啟動(dòng)或暫停遏弱，有兩個(gè)可用的值：
  • running： 運(yùn)行狀態(tài)（默認(rèn)值）盆均，也就是運(yùn)行動(dòng)畫效果；
  • paused： 暫停狀態(tài)漱逸，也就是動(dòng)畫效果運(yùn)行中停下來(lái)（此時(shí)如果需要還可以繼續(xù)運(yùn)行）泪姨；
• animation：上述屬性的綜合屬性，并依次按該順序列出（不需要的項(xiàng)直接省略）饰抒。

（3）案例

@keyframes  ani1{ 
    0%{     background:red;     transform:rotate(0deg);}
    100%{   background:blue;    transform:rotate(360deg);}
}
.c1{
    animation-name: ani1;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-iteration-count:infinite;
}

$keyframes  ani1{ 
    0%{     background:red;     transform:rotate(0deg);}
    100%{   background:blue;    transform:rotate(360deg);}
}
.c1{
    animation: ani1  3s  ease-in-out  infinite;
}

演示animation-direction肮砾，和animation-fill-mode：

    <style>
        @keyframes moveLeft2Right{
            0%{
                left:0px;
            }
            100%{
                left:800px;
            }
        }
        div{
            border:solid 1px red;
            width: 100px;
            height:50px;
            margin:5px;
            position:relative;
            left:0px;
            animation-name:moveLeft2Right;
            animation-timing-function:linear;
            animation-duration: 5s;
            animation-iteration-count:3;

        }
        .box1{
            animation-direction: normal;
            animation-fill-mode: forwards;
        }
        .box1:hover{
            animation-play-state:paused;
        }
        .box2{
            animation-direction: reverse;
            animation-fill-mode: backwards;
        }
        .box3{
            animation-direction: alternate;
            animation-fill-mode: both;
        }
        .box4{
            animation-direction: alternate-reverse;
            animation-fill-mode: both;
        }
    </style>
</head>
<body>
    <div class="box1">normal, forwards</div>
    <div class="box2">reverse, backwards</div>
    <div class="box3">alternate, both</div>
    <div class="box4">alternate-reverse, both</div>
</body>

連續(xù)播放效果：

    <style>
        @keyframes xuanzhuan{
            0%{
                transform:rotatex(-15deg) rotatey(0deg);
            }
            100%{
                transform:rotatex(-15deg) rotatey(360deg);
            }
        }
        .box{
            border:solid 0px red;
            width:960px;
            margin:50px auto 10px;
            perspective: 1200px;
            perspective-origin: center center;

        }
        .box>.container{
            border:solid 0px blue;
            width:200px;
            height:300px;
            position: relative;
            left:50%;
            margin-left:-100px;
            transform-style:preserve-3d;

            transform:rotatex(-15deg);

            animation-name: xuanzhuan;
            animation-duration: 6s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
        }
        .box>.container:hover{
            animation-play-state: paused;
        }
        .box>.container>img{
            width:200px;
            height:300px;
            position: absolute;
            left:0;
            top:0;
            transform-origin: center center;
        }
        .box>.container>img:nth-child(1){transform: rotatey(0deg) translatez(300px)}
        .box>.container>img:nth-child(2){transform: rotatey(40deg) translatez(300px)}
        .box>.container>img:nth-child(3){transform: rotatey(80deg) translatez(300px)}
        .box>.container>img:nth-child(4){transform: rotatey(120deg) translatez(300px)}
        .box>.container>img:nth-child(5){transform: rotatey(160deg) translatez(300px)}
        .box>.container>img:nth-child(6){transform: rotatey(200deg) translatez(300px)}
        .box>.container>img:nth-child(7){transform: rotatey(240deg) translatez(300px)}
        .box>.container>img:nth-child(8){transform: rotatey(280deg) translatez(300px)}
        .box>.container>img:nth-child(9){transform: rotatey(320deg) translatez(300px)}
    </style>
</head>
<body>
    <div class="box" title="場(chǎng)景，舞臺(tái)">
        <div class="container" title="容器">
            <img src="images/girl1.jpg" alt="">
            <img src="images/girl2.jpg" alt="">
            <img src="images/girl3.jpg" alt="">
            <img src="images/girl4.jpg" alt="">
            <img src="images/girl5.jpg" alt="">
            <img src="images/girl6.jpg" alt="">
            <img src="images/girl7.jpg" alt="">
            <img src="images/girl8.jpg" alt="">
            <img src="images/girl9.jpg" alt="">
        </div>
    </div>
</body>

一走一停播放效果的關(guān)鍵代碼：

        @keyframes xuanzhuan{
            0%{transform:rotatex(-15deg) rotatey(0deg);}
            /*表示從0%時(shí)間到2%時(shí)間袋坑，旋轉(zhuǎn)從0到40deg仗处，下同*/
            2%{transform:rotatex(-15deg) rotatey(40deg);}
            /*表示從2%時(shí)間到11%時(shí)間，旋轉(zhuǎn)不變，即不旋轉(zhuǎn)婆誓，下同*/
            11%{transform:rotatex(-15deg) rotatey(40deg);}

            13%{transform:rotatex(-15deg) rotatey(80deg);}
            22%{transform:rotatex(-15deg) rotatey(80deg);}
            
            24%{transform:rotatex(-15deg) rotatey(120deg);}
            33%{transform:rotatex(-15deg) rotatey(120deg);}

            35%{transform:rotatex(-15deg) rotatey(160deg);}
            44%{transform:rotatex(-15deg) rotatey(160deg);}

            46%{transform:rotatex(-15deg) rotatey(200deg);}
            55%{transform:rotatex(-15deg) rotatey(200deg);}

            57%{transform:rotatex(-15deg) rotatey(240deg);}
            66%{transform:rotatex(-15deg) rotatey(240deg);}

            68%{transform:rotatex(-15deg) rotatey(280deg);}
            77%{transform:rotatex(-15deg) rotatey(280deg);}

            79%{transform:rotatex(-15deg) rotatey(320deg);}
            88%{transform:rotatex(-15deg) rotatey(320deg);}

            90%{transform:rotatex(-15deg) rotatey(360deg);}
            99%{transform:rotatex(-15deg) rotatey(360deg);}
        }

滑動(dòng)門效果：

    <style>
        .nav{
            display:flex;
        }
        .nav>a{
            display: inline-block;
            height:35px;
            padding-left:7px;
            background: url(images/bg_r1_c1.png) left top no-repeat;
        }
        .nav>a:hover{
            background-image: url(images/blue_r1_c1.png);
        }
        .nav>a>span{
            display: inline-block;
            height:35px;
            line-height: 35px;
            padding-right:25px;
            background: url(images/bg_r1_c2.png) right top no-repeat;
        }
        .nav>a:hover>span{
            background-image: url(images/blue_r1_c2.png);
        }
    </style>
</head>
<body>
    <div class="nav">
        <a href=""><span>首頁(yè)</span></a>
        <a href=""><span>三個(gè)字</span></a>
        <a href=""><span>四字標(biāo)題</span></a>
        <a href=""><span>五個(gè)字標(biāo)題</span></a>
    </div>

手風(fēng)琴效果：

    <style>
        .box{
            display: flex;
            border:solid 1px red;
            width:600px;
            margin:0 auto;
        }
        .box>div{
            /*下一行表示吃环，如果容器盒子放下子盒子的設(shè)置寬度還有剩余，就去按該比例“分配”
            這里洋幻，因?yàn)樗衐iv都是1郁轻，所以就是均分剩余空隙*/
            flex:1;
            height:240px;
            width:100px;
            margin:1px;
            border:solid 1px blue;
            transition:flex 1s, background 1s;
        }
        .box>div:hover{
            flex:1.5;
            background: yellow;
        }

    </style>
</head>
<body>
    <div class="box">
        <div>內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1內(nèi)容1</div>
        <div>內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2內(nèi)容2</div>
        <div>內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3內(nèi)容3</div>
        <div>內(nèi)容4內(nèi)容4內(nèi)容4內(nèi)容4內(nèi)容4內(nèi)容4</div>
        <div>內(nèi)容5內(nèi)容5內(nèi)容5內(nèi)容5內(nèi)容5內(nèi)容5內(nèi)容5內(nèi)容5內(nèi)容5內(nèi)容5內(nèi)容5內(nèi)容5內(nèi)容5內(nèi)容5內(nèi)容5內(nèi)容5內(nèi)容5內(nèi)容5內(nèi)容5內(nèi)容5內(nèi)容5內(nèi)容5</div>
    </div>
</body>

八、額外

1文留、光標(biāo)形狀設(shè)置cursor

含義：

? 設(shè)置鼠標(biāo)在某個(gè)盒子上的時(shí)候的光標(biāo)形狀好唯。

形式：

? cursor：光標(biāo)形狀名；

常用的光標(biāo)形狀名有：

? default（默認(rèn)）, pointer（手形）, text（文本編輯形）, help（幫助）, wait（等待）燥翅。

在實(shí)際網(wǎng)頁(yè)中骑篙，我們常常并不使用a標(biāo)簽，但也同樣做出有a標(biāo)簽的效果（鏈接权旷，手的形狀）替蛉。

2、盒子縮放zoom

• 含義：

    用于設(shè)置某個(gè)盒子在其本來(lái)的大小基礎(chǔ)上進(jìn)行一定的大小縮放拄氯。
  

• 形式 ：

    zoom: 縮放比例躲查；              //縮放比例可以是數(shù)字或百分比。
  

說明：

? 它是對(duì)整個(gè)盒子進(jìn)行整體縮放译柏，無(wú)法做到橫向縱向單獨(dú)控制的縮放镣煮。

? 對(duì)比：transform:scale()可以實(shí)現(xiàn)橫向縱向單獨(dú)控制的縮放。

? zoom縮放的盒子是“實(shí)質(zhì)上”改變了大小鄙麦，因而也會(huì)影響其后續(xù)元素的位置典唇。

? 對(duì)比：transfor:scale()m實(shí)現(xiàn)的縮放不會(huì)影響后續(xù)元素的位置，只是視覺上的改變胯府。

3介衔、文字陰影text-shadow

• 形式：

  box-shadow：水平偏移值 垂直偏移值 【模糊值】【顏色】 ；

• 說明：

  偏移值可以為負(fù) 骂因。

  模糊值不能為負(fù)炎咖。

  顏色如不設(shè)置，則默認(rèn)隨字體顏色寒波。一般設(shè)置為灰色（gray）比較逼真乘盼。

  可以設(shè)置多個(gè)陰影，每個(gè)陰影的設(shè)置相互用逗號(hào)（俄烁，）隔開就可以绸栅。

• 舉例：

  .box1{ text-shadow: 2px 2px red; }

  .box2{ text-shadow: 2px 5px 2px #00FFFF; }

  .boxe{ text-shadow: 2px 5px 0 red, -2px -2px 0 #f0f0f0;

• 演示案例：

    <style>
        .box1{
            font-size:40px;
            text-shadow: 2px 2px 0px  red;
        }
        .box2{
            font-size:40px;
            text-shadow: 2px 2px 0px  red, -2px -2px 0px  red;
        }
        .box3{
            font-size:100px;
            background: gray;
            color:gray;
            text-shadow:-2px -2px 0 white, 2px 2px 0 black;
        }
        .box4{
            font-size:100px;
            background: gray;
            color:gray;
            text-shadow:-2px -2px 0 black, 2px 2px 0 white;
        }
    </style>
  </head>
  <body>
    <div class="box1">一些文字，some texts</div>
    <div class="box2">一些文字页屠，some texts</div>
    <hr>
    <h3>凹凸文字效果</h3>
    <div class="box3">一些文字粹胯，some texts</div>
    <div class="box4">一些文字蓖柔，some texts</div>
  </body>
  

  彩色文字：

  本質(zhì)： 就是用“圖”作為文字“筆畫線”的背景！

  這里的圖矛双，我們用這個(gè)：background-image: linear-gradient（）渊抽；

  再 結(jié)合這個(gè)屬性：background-clip：text蟆豫； /*背景從文字筆畫線以外裁切掉*/

  以及結(jié)合這個(gè)屬性：text-fill-color: transparent; //設(shè)置文字筆畫線為透明色议忽。

  舉例：

    <style>
          .box{
              display: inline-block;
              font-size: 30px;
              background-image:linear-gradient(90deg, red, orange, yellow, green, aqua, blue, purple, red);
              background-size: 100px; 100px;
              /*各瀏覽器的兼容代碼要卸載前面！*/
              -webkit-background-clip: text;
              background-clip:text; /*背景從文字比劃線以外裁切掉*/
              -webkit-text-fill-color: transparent;
              -moz-text-fill-color: transparent;
              text-fill-color:transparent;  /*文字為透明色*/
          }
    </style>
  <body>
      <div>
          <div class="box">
              一些文字十减。一些文字栈幸。一些文字。一些文字帮辟。一些文字速址。一些文字。
          </div>
      </div>
  </body>
  

4由驹、文字溢出text-overflow

設(shè)置一行文字在一行顯示不下但又不允許換行時(shí)的表現(xiàn)形式芍锚，有兩個(gè)可用值：

? text-overflow: clip | ellipsis

? clip：直接切掉（不顯示）；

? ellipsis: 切掉后續(xù)部分并添加英文省略號(hào)（...）

注意：

使用該屬性要求容器盒子設(shè)置overflow為非visible蔓榄，width為非auto并炮，且white-space為不允許換行（nowrap）。

white-space：用于設(shè)定文字在行尾碰到空格的時(shí)候甥郑，是否換行下來(lái)逃魄。

? 常用值：wrap（可換行，默認(rèn)值）澜搅； no-wrap（不可換行）

5伍俘、盒子模型box-sizing

含義：

? 所謂盒子模型，是指css中勉躺，設(shè)置一個(gè)盒子的寬高（width癌瘾，height）值，是按盒子的“內(nèi)容區(qū)”設(shè)置饵溅，還是按盒子的“邊框區(qū)”設(shè)置的問題妨退。

? 傳統(tǒng)上，設(shè)置盒子的寬高指的是設(shè)置盒子內(nèi)容區(qū)的寬高概说。

? 這個(gè)屬性就是可以改變這個(gè)特性碧注，可以將盒子的寬高屬性，指定為是盒子的邊框區(qū)域的寬高值糖赔。

可用值：

box-sizing: content-box; //內(nèi)容模式萍丐，也就是傳統(tǒng)的模式

box-sizing: border-box; //邊框模式，設(shè)置寬高值（width放典，height）包括了border在內(nèi)的范圍逝变。

內(nèi)容模式的盒子實(shí)際占據(jù)寬度為：

? margin-left + border-left + padding-left + width + padding-right + border-right + margin-right基茵；

邊框模式的盒子實(shí)際占據(jù)寬度為：

? margin-left + width + margin-right；

? 此模式有時(shí)候稱為“減模式”壳影，就是實(shí)際內(nèi)容區(qū)的寬度拱层，是從設(shè)置的寬度（width）減去border和padding

高度方向同理。

案例：

    <style>
    /**
     * 假設(shè)：
     * 1宴咧，整體寬度為300x280.
     * 2根灯， 主體灰色邊框線為1px
     * 3，公開課上面的紅色邊框線為2px掺栅。
     * 4烙肺，頭部區(qū)域高度（含邊框線）為40px。
     */
    .tab{
        box-sizing:border-box;
        width:300px;
        border:1px solid gray;
        border-top:none;
    }
    ul{
        list-style: none;
    }
    ul>li{
        text-indent: 25px;
        background:url(images/tubiao.png) no-repeat 0px 0px;
    }
    .top{
        overflow: hidden;/*清除浮動(dòng)*/
    }
    .top>.left{
        float:left;
        box-sizing: border-box;
        height:40px;
        border-top: solid 2px red;
        width:50%;
        line-height: 38px;
        text-align: center;
        font-size:18px;
        color:red;
    }
    .top>.right{
        float:right;
        box-sizing: border-box;
        height:40px;
        border: solid 1px gray;
        border-right:none;
        width:50%;
        padding-right:15px;
        line-height: 38px;
        text-align: right;
        background:#e0e0e0
    }
    </style>

6氧卧、居中大全

（1）文字居中：

左右居中：

? text-align:center;

垂直居中：

? 一行文字可以做到：

? line-height: 盒子高度桃笙；

（2）不同大小圖片在固定盒子中居中

方法1：

? 左右居中：

? 父盒子：text-align: center；

? 上下居中：

? 父盒子中： line-height: 父盒子高度

? 圖片本身： verticle-align:middle;

方法2：

? 圖片：positon: relative

? 左右居中：

? left: 50% 沙绝； 50%是父盒子的水平方向中間位置

? margin-left :-圖寬/2

? 上下居中：

? top: 50%搏明； 50%是父盒子的垂直方向中間位置

? margin-top: - 圖高/2

方法3：——兼容性好！

? 父盒子：

? display: table-cell; //將盒子轉(zhuǎn)換為單元格闪檬，此時(shí)其跟一個(gè)單元格一樣表現(xiàn)星著。

? 左右居中：

? 父盒子上：text-align: center;

? 上下居中：

? 父盒子上：verticle-align: middle;

方法4：——兼容性好！

? 左右上下居中：

? 圖片上： postion: relative;

? left:50%;

? top:50%

? transform: translate(-50%, -50%);