RTY 實踐出真知

簡單屬性選擇

如果希望選擇有某個屬性的元素，而不論屬性值是什么，可以使用簡單屬性選擇器。

例子 1

如果您希望把包含標(biāo)題（title）的所有元素變?yōu)榧t色，可以寫作：

*[title] {color:red;}

親自試一試

例子 2

與上面類似，可以只對有 href 屬性的錨（a 元素）應(yīng)用樣式：

a[href] {color:red;}

親自試一試

例子 3

還可以根據(jù)多個屬性進行選擇，只需將屬性選擇器鏈接在一起即可。

例如，為了將同時有 href 和 title 屬性的 HTML 超鏈接的文本設(shè)置為紅色，可以這樣寫：

a[href][title] {color:red;}

親自試一試

例子 4

可以采用一些創(chuàng)造性的方法使用這個特性。

例如，可以對所有帶有 alt 屬性的圖像應(yīng)用樣式，從而突出顯示這些有效的圖像：

img[alt] {border: 5px solid red;}

親自試一試

提示：上面這個特例更適合用來診斷而不是設(shè)計，即用來確定圖像是否確實有效。

例子 5：為 XML 文檔使用屬性選擇器

屬性選擇器在 XML 文檔中相當(dāng)有用，因為 XML 語言主張要針對元素和屬性的用途指定元素名和屬性名。

假設(shè)我們?yōu)槊枋鎏栂敌行窃O(shè)計了一個 XML 文檔。如果我們想選擇有 moons 屬性的所有 planet 元素，使之顯示為紅色，以便能更關(guān)注有 moons 的行星，就可以這樣寫：

planet[moons] {color:red;}

這會讓以下標(biāo)記片段中的第二個和第三個元素的文本顯示為紅色，但第一個元素的文本不是紅色：

<planet>Venus</planet> <planet moons="1">Earth</planet> <planet moons="2">Mars</planet> 

查看效果

根據(jù)具體屬性值選擇

除了選擇擁有某些屬性的元素，還可以進一步縮小選擇范圍，只選擇有特定屬性值的元素。

例子 1

例如，假設(shè)希望將指向 Web 服務(wù)器上某個指定文檔的超鏈接變成紅色，可以這樣寫：

a[] {color: red;}

親自試一試

例子 2

與簡單屬性選擇器類似，可以把多個屬性-值選擇器鏈接在一起來選擇一個文檔。

a[] {color: red;}

這會把以下標(biāo)記中的第一個超鏈接的文本大小加倍，但是第二個或第三個鏈接不受影響：

<a  title="W3School">W3School</a> <a  title="CSS">CSS</a> <a  title="HTML">HTML</a> 

親自試一試

例子 3

同樣地，XML 語言也可以利用這種方法來設(shè)置樣式。

下面我們再回到行星那個例子中。假設(shè)只希望選擇 moons 屬性值為 1 的那些 planet 元素：

planet[moons="1"] {color: red;}

上面的代碼會把以下標(biāo)記中的第二個元素變成紅色，但第一個和第三個元素不受影響：

<planet>Venus</planet> <planet moons="1">Earth</planet> <planet moons="2">Mars</planet> 

查看效果

屬性與屬性值必須完全匹配

請注意，這種格式要求必須與屬性值完全匹配。

如果屬性值包含用空格分隔的值列表，匹配就可能出問題。

請考慮一下的標(biāo)記片段：

<p class="important warning">This paragraph is a very important warning.</p> 

如果寫成 p[class="important"]，那么這個規(guī)則不能匹配示例標(biāo)記。

要根據(jù)具體屬性值來選擇該元素，必須這樣寫：

p[class="important warning"] {color: red;}

親自試一試

根據(jù)部分屬性值選擇

如果需要根據(jù)屬性值中的詞列表的某個詞進行選擇，則需要使用波浪號（~）。

假設(shè)您想選擇 class 屬性中包含 important 的元素，可以用下面這個選擇器做到這一點：

p[class~="important"] {color: red;}

親自試一試

如果忽略了波浪號，則說明需要完成完全值匹配。

部分值屬性選擇器與點號類名記法的區(qū)別

該選擇器等價于我們在類選擇器中討論過的點號類名記法。

也就是說，p.important 和 p["important"] 應(yīng)用到 HTML 文檔時是等價的。

那么，為什么還要有 "~=" 屬性選擇器呢？因為它能用于任何屬性，而不只是 class。

例如，可以有一個包含大量圖像的文檔，其中只有一部分是圖片。對此，可以使用一個基于 title 文檔的部分屬性選擇器，只選擇這些圖片：

img[title~="Figure"] {border: 1px solid gray;}

這個規(guī)則會選擇 title 文本包含 "Figure" 的所有圖像。沒有 title 屬性或者 title 屬性中不包含 "Figure" 的圖像都不會匹配。

親自試一試

子串匹配屬性選擇器

下面為您介紹一個更高級的選擇器模塊，它是 CSS2 完成之后發(fā)布的，其中包含了更多的部分值屬性選擇器。按照規(guī)范的說法，應(yīng)該稱之為“子串匹配屬性選擇器”。

很多現(xiàn)代瀏覽器都支持這些選擇器，包括 IE7。

下表是對這些選擇器的簡單總結(jié)：

可以想到，這些選擇有很多用途。

舉例來說，如果希望對指向 W3School 的所有鏈接應(yīng)用樣式，不必為所有這些鏈接指定 class，再根據(jù)這個類編寫樣式，而只需編寫以下規(guī)則：

a[href*="w3school.com.cn"] {color: red;}

親自試一試

提示：任何屬性都可以使用這些選擇器。

特定屬性選擇類型

最后為您介紹特定屬性選擇器。請看下面的例子：

*[lang|="en"] {color: red;}

上面這個規(guī)則會選擇 lang 屬性等于 en 或以 en- 開頭的所有元素。因此，以下示例標(biāo)記中的前三個元素將被選中，而不會選擇后兩個元素：

<p lang="en">Hello!</p> <p lang="en-us">Greetings!</p> <p lang="en-au">G'day!</p> <p lang="fr">Bonjour!</p> <p lang="cy-en">Jrooana!</p> 

親自試一試

一般來說，[att|="val"] 可以用于任何屬性及其值。

假設(shè)一個 HTML 文檔中有一系列圖片，其中每個圖片的文件名都形如 figure-1.jpg 和 figure-2.jpg。就可以使用以下選擇器匹配所有這些圖像：

img[src|="figure"] {border: 1px solid gray;}

親自試一試

當(dāng)然，這種屬性選擇器最常見的用途還是匹配語言值。

CSS ID 選擇器

在某些方面，ID 選擇器類似于類選擇器，不過也有一些重要差別。

語法

首先，ID 選擇器前面有一個 # 號 - 也稱為棋盤號或井號。

請看下面的規(guī)則：

*#intro {font-weight:bold;}

與類選擇器一樣，ID 選擇器中可以忽略通配選擇器。前面的例子也可以寫作：

#intro {font-weight:bold;}

這個選擇器的效果將是一樣的。

第二個區(qū)別是 ID 選擇器不引用 class 屬性的值，毫無疑問，它要引用 id 屬性中的值。

以下是一個實際 ID 選擇器的例子：

<p id="intro">This is a paragraph of introduction.</p>

親自試一試

類選擇器還是 ID 選擇器？

在類選擇器這一章中我們曾講解過，可以為任意多個元素指定類。前一章中類名 important 被應(yīng)用到 p 和 h1 元素，而且它還可以應(yīng)用到更多元素。

區(qū)別 1：只能在文檔中使用一次

與類不同，在一個 HTML 文檔中，ID 選擇器會使用一次，而且僅一次。

區(qū)別 2：不能使用 ID 詞列表

不用于類選擇器，ID 選擇器不能結(jié)合使用，因為 ID 屬性不允許有以空格分隔的詞列表。

區(qū)別 3：ID 能包含更多含義

類似于類，可以獨立于元素來選擇 ID。有些情況下，您知道文檔中會出現(xiàn)某個特定 ID 值，但是并不知道它會出現(xiàn)在哪個元素上，所以您想聲明獨立的 ID 選擇器。例如，您可能知道在一個給定的文檔中會有一個 ID 值為 mostImportant 的元素。您不知道這個最重要的東西是一個段落、一個短語、一個列表項還是一個小節(jié)標(biāo)題。您只知道每個文檔都會有這么一個最重要的內(nèi)容，它可能在任何元素中，而且只能出現(xiàn)一個。在這種情況下，可以編寫如下規(guī)則：

#mostImportant {color:red; background:yellow;}

這個規(guī)則會與以下各個元素匹配（這些元素不能在同一個文檔中同時出現(xiàn)，因為它們都有相同的 ID 值）：

<h1 id="mostImportant">This is important!</h1> <em id="mostImportant">This is important!</em> <ul id="mostImportant">This is important!</ul> 

親自試一試：

• 為 id 為 mostImportant 的 h1 元素設(shè)定樣式
• 為 id 為 mostImportant 的 em 元素設(shè)定樣式
• 為 id 為 mostImportant 的 ul 元素設(shè)定樣式

區(qū)分大小寫

請注意，類選擇器和 ID 選擇器可能是區(qū)分大小寫的。這取決于文檔的語言。HTML 和 XHTML 將類和 ID 值定義為區(qū)分大小寫，所以類和 ID 值的大小寫必須與文檔中的相應(yīng)值匹配。

因此，對于以下的 CSS 和 HTML，元素不會變成粗體：

#intro {font-weight:bold;}  <p id="Intro">This is a paragraph of introduction.</p>

由于字母 i 的大小寫不同，所以選擇器不會匹配上面的元素。

CSS 類選擇器

類選擇器允許以一種獨立于文檔元素的方式來指定樣式。

該選擇器可以單獨使用，也可以與其他元素結(jié)合使用。

提示：只有適當(dāng)?shù)貥?biāo)記文檔后，才能使用這些選擇器，所以使用這兩種選擇器通常需要先做一些構(gòu)想和計劃。

要應(yīng)用樣式而不考慮具體設(shè)計的元素，最常用的方法就是使用類選擇器。

修改 HTML 代碼

在使用類選擇器之前，需要修改具體的文檔標(biāo)記，以便類選擇器正常工作。

為了將類選擇器的樣式與元素關(guān)聯(lián)，必須將 class 指定為一個適當(dāng)?shù)闹怠Ｕ埧聪旅娴?HTML 代碼：

<h1 class="important"> This heading is very important. </h1>  <p class="important"> This paragraph is very important. </p> 

在上面的代碼中，兩個元素的 class 都指定為 important：第一個標(biāo)題（ h1 元素），第二個段落（p 元素）。

語法

然后我們使用以下語法向這些歸類的元素應(yīng)用樣式，即類名前有一個點號（.），然后結(jié)合通配選擇器：

*.important {color:red;}

如果您只想選擇所有類名相同的元素，可以在類選擇器中忽略通配選擇器，這沒有任何不好的影響：

.important {color:red;}

親自試一試

結(jié)合元素選擇器

類選擇器可以結(jié)合元素選擇器來使用。

例如，您可能希望只有段落顯示為紅色文本：

p.important {color:red;}

選擇器現(xiàn)在會匹配 class 屬性包含 important 的所有 p 元素，但是其他任何類型的元素都不匹配，不論是否有此 class 屬性。選擇器 p.important 解釋為：“其 class 屬性值為 important 的所有段落”。 因為 h1 元素不是段落，這個規(guī)則的選擇器與之不匹配，因此 h1 元素不會變成紅色文本。

如果你確實希望為 h1 元素指定不同的樣式，可以使用選擇器 h1.important：

p.important {color:red;} h1.important {color:blue;} 

親自試一試

CSS 多類選擇器

在上一節(jié)中，我們處理了 class 值中包含一個詞的情況。在 HTML 中，一個 class 值中可能包含一個詞列表，各個詞之間用空格分隔。例如，如果希望將一個特定的元素同時標(biāo)記為重要（important）和警告（warning），就可以寫作：

<p class="important warning"> This paragraph is a very important warning. </p> 

這兩個詞的順序無關(guān)緊要，寫成 warning important 也可以。

我們假設(shè) class 為 important 的所有元素都是粗體，而 class 為 warning 的所有元素為斜體，class 中同時包含 important 和 warning 的所有元素還有一個銀色的背景 。就可以寫作：

.important {font-weight:bold;} .warning {font-weight:italic;} .important.warning {background:silver;} 

親自試一試

通過把兩個類選擇器鏈接在一起，僅可以選擇同時包含這些類名的元素（類名的順序不限）。

如果一個多類選擇器包含類名列表中沒有的一個類名，匹配就會失敗。請看下面的規(guī)則：

.important.urgent {background:silver;}

不出所料，這個選擇器將只匹配 class 屬性中包含詞 important 和 urgent 的 p 元素。因此，如果一個 p 元素的 class 屬性中只有詞 important 和 warning，將不能匹配。不過，它能匹配以下元素：

<p class="important urgent warning"> This paragraph is a very important and urgent warning. </p> 

親自試一試

重要事項：在 IE7 之前的版本中，不同平臺的 Internet Explorer 都不能正確地處理多類選擇器。

選擇器分組

假設(shè)希望 h2 元素和段落都有灰色。為達到這個目的，最容易的做法是使用以下聲明：

h2, p {color:gray;}

將 h2 和 p 選擇器放在規(guī)則左邊，然后用逗號分隔，就定義了一個規(guī)則。其右邊的樣式（color:gray;）將應(yīng)用到這兩個選擇器所引用的元素。逗號告訴瀏覽器，規(guī)則中包含兩個不同的選擇器。如果沒有這個逗號，那么規(guī)則的含義將完全不同。參見后代選擇器。

可以將任意多個選擇器分組在一起，對此沒有任何限制。

例如，如果您想把很多元素顯示為灰色，可以使用類似如下的規(guī)則：

body, h2, p, table, th, td, pre, strong, em {color:gray;}

提示：通過分組，創(chuàng)作者可以將某些類型的樣式“壓縮”在一起，這樣就可以得到更簡潔的樣式表。

以下的兩組規(guī)則能得到同樣的結(jié)果，不過可以很清楚地看出哪一個寫起來更容易：

/* no grouping */ h1 {color:blue;} h2 {color:blue;} h3 {color:blue;} h4 {color:blue;} h5 {color:blue;} h6 {color:blue;}  /* grouping */ h1, h2, h3, h4, h5, h6 {color:blue;} 

親自試一試

分組提供了一些有意思的選擇。例如，下例中的所有規(guī)則分組都是等價的，每個組只是展示了對選擇器和聲明分組的不同方法：

/* group 1 */ h1 {color:silver; background:white;} h2 {color:silver; background:gray;} h3 {color:white; background:gray;} h4 {color:silver; background:white;} b {color:gray; background:white;}  /* group 2 */ h1, h2, h4 {color:silver;} h2, h3 {background:gray;} h1, h4, b {background:white;} h3 {color:white;} b {color:gray;}  /* group 3 */ h1, h4 {color:silver; background:white;} h2 {color:silver;} h3 {color:white;} h2, h3 {background:gray;} b {color:gray; background:white;} 

親自試一試：

• group 1
• group 2
• group 3

請注意，group 3 中使用了“聲明分組”。稍后我們會為您介紹“聲明分組”。

通配符選擇器

CSS2 引入了一種新的簡單選擇器 - 通配選擇器（universal selector），顯示為一個星號（*）。該選擇器可以與任何元素匹配，就像是一個通配符。

例如，下面的規(guī)則可以使文檔中的每個元素都為紅色：

* {color:red;}

親自試一試

這個聲明等價于列出了文檔中所有元素的一個分組選擇器。利用通配選擇器，只需敲一次鍵（僅一個星號）就能使文檔中所有元素的 color 屬性值指定為 red。

聲明分組

我們既可以對選擇器進行分組，也可以對聲明分組。

假設(shè)您希望所有 h1 元素都有紅色背景，并使用 28 像素高的 Verdana 字體顯示為藍色文本，可以寫以下樣式：

h1 {font: 28px Verdana;} h1 {color: blue;} h1 {background: red;} 

但是上面這種做法的效率并不高。尤其是當(dāng)我們?yōu)橐粋€有多個樣式的元素創(chuàng)建這樣一個列表時會很麻煩。相反，我們可以將聲明分組在一起：

h1 {font: 28px Verdana; color: white; background: black;}

這與前面的 3 行樣式表的效果完全相同。

注意，對聲明分組，一定要在各個聲明的最后使用分號，這很重要。瀏覽器會忽略樣式表中的空白符。只要加了分號，就可以毫無顧忌地采用以下格式建立樣式：

h1 {   font: 28px Verdana;   color: blue;   background: red;   } 

親自試一試

怎么樣，上面這種寫法的可讀性是不是更強。

不過，如果忽略了第二個分號，用戶代理就會把這個樣式表解釋如下：

h1 {   font: 28px Verdana;   color: blue background: red;   } 

親自試一試

因為 background 對 color 來說不是一個合法值，而且由于只能為 color 指定一個關(guān)鍵字，所以用戶代理會完全忽略這個 color 聲明（包括 background: black 部分）。這樣 h1 標(biāo)題只會顯示為藍色，而沒有紅色背景，不過更有可能根本得不到藍色的 h1。相反，這些標(biāo)題只會顯示為默認顏色（通常是黑色），而且根本沒有背景色。font: 28px Verdana 聲明仍能正常發(fā)揮作用，因為它確實正確地以一個分號結(jié)尾。

與選擇器分組一樣，聲明分組也是一種便利的方法，可以縮短樣式表，使之更清晰，也更易維護。

提示：在規(guī)則的最后一個聲明后也加上分號是一個好習(xí)慣。在向規(guī)則增加另一個聲明時，就不必擔(dān)心忘記再插入一個分號。

結(jié)合選擇器和聲明的分組

我們可以在一個規(guī)則中結(jié)合選擇器分組和聲明分組，就可以使用很少的語句定義相對復(fù)雜的樣式。

下面的規(guī)則為所有標(biāo)題指定了一種復(fù)雜的樣式：

h1, h2, h3, h4, h5, h6 {   color:gray;   background: white;   padding: 10px;   border: 1px solid black;   font-family: Verdana;   } 

親自試一試

上面這條規(guī)則將所有標(biāo)題的樣式定義為帶有白色背景的灰色文本，其內(nèi)邊距是 10 像素，并帶有 1 像素的實心邊框，文本字體是 Verdana。

CSS 元素選擇器

最常見的 CSS 選擇器是元素選擇器。換句話說，文檔的元素就是最基本的選擇器。

如果設(shè)置 HTML 的樣式，選擇器通常將是某個 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身：

html {color:black;} h1 {color:blue;} h2 {color:silver;} 

親自試一試

可以將某個樣式從一個元素切換到另一個元素。

假設(shè)您決定將上面的段落文本（而不是 h1 元素）設(shè)置為灰色。只需要把 h1 選擇器該為 p：

html {color:black;} p {color:gray;} h2 {color:silver;} 

親自試一試

類型選擇器

在 W3C 標(biāo)準(zhǔn)中，元素選擇器又稱為類型選擇器（type selector）。

“類型選擇器匹配文檔語言元素類型的名稱。類型選擇器匹配文檔樹中該元素類型的每一個實例。”

下面的規(guī)則匹配文檔樹中所有 h1 元素：

h1 {font-family: sans-serif;}

因此，我們也可以為 XML 文檔中的元素設(shè)置樣式：

XML 文檔：

<?xml version="1.0" encoding="ISO-8859-1"?> <?xml-stylesheet type="text/css" href="note.css"?> <note> <to>George</to> <from>John</from> <heading>Reminder</heading> <body>Don't forget the meeting!</body> </note> 

CSS 文檔：

note   {   font-family:Verdana, Arial;   margin-left:30px;   }  to   {   font-size:28px;   display: block;   }  from   {   font-size:28px;   display: block;   }  heading   {   color: red;   font-size:60px;   display: block;   }  body   {   color: blue;   font-size:35px;   display: block;   } 

查看效果

通過上面的例子，您可以看到，CSS 元素選擇器（類型選擇器）可以設(shè)置 XML 文檔中元素的樣式。

如果您需要更多關(guān)于為 XML 文檔添加樣式的知識，請訪問 w3school 的 XML 教程。

CSS 浮動

請看下圖，當(dāng)把框 1 向右浮動時，它脫離文檔流并且向右移動，直到它的右邊緣碰到包含框的右邊緣：

再請看下圖，當(dāng)框 1 向左浮動時，它脫離文檔流并且向左移動，直到它的左邊緣碰到包含框的左邊緣。因為它不再處于文檔流中，所以它不占據(jù)空間，實際上覆蓋住了框 2，使框 2 從視圖中消失。

如果把所有三個框都向左移動，那么框 1 向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前一個浮動框。

如下圖所示，如果包含框太窄，無法容納水平排列的三個浮動元素，那么其它浮動塊向下移動，直到有足夠的空間。如果浮動元素的高度不同，那么當(dāng)它們向下移動時可能被其它浮動元素“卡住”：

CSS float 屬性

在 CSS 中，我們通過 float 屬性實現(xiàn)元素的浮動。

如需更多有關(guān) float 屬性的知識，請訪問參考手冊：CSS float 屬性。

行框和清理

浮動框旁邊的行框被縮短，從而給浮動框留出空間，行框圍繞浮動框。

因此，創(chuàng)建浮動框可以使文本圍繞圖像：

要想阻止行框圍繞浮動框，需要對該框應(yīng)用 clear 屬性。clear 屬性的值可以是 left、right、both 或 none，它表示框的哪些邊不應(yīng)該挨著浮動框。

為了實現(xiàn)這種效果，在被清理的元素的上外邊距上添加足夠的空間，使元素的頂邊緣垂直下降到浮動框下面：

這是一個有用的工具，它讓周圍的元素為浮動元素留出空間。

讓我們更詳細地看看浮動和清理。假設(shè)希望讓一個圖片浮動到文本塊的左邊，并且希望這幅圖片和文本包含在另一個具有背景顏色和邊框的元素中。您可能編寫下面的代碼：

.news {   background-color: gray;   border: solid 1px black;   }  .news img {   float: left;   }  .news p {   float: right;   }  <div class="news"> <img src="news-pic.jpg" /> <p>some text</p> </div> 

這種情況下，出現(xiàn)了一個問題。因為浮動元素脫離了文檔流，所以包圍圖片和文本的 div 不占據(jù)空間。

如何讓包圍元素在視覺上包圍浮動元素呢？需要在這個元素中的某個地方應(yīng)用 clear：

不幸的是出現(xiàn)了一個新的問題，由于沒有現(xiàn)有的元素可以應(yīng)用清理，所以我們只能添加一個空元素并且清理它。

.news {   background-color: gray;   border: solid 1px black;   }  .news img {   float: left;   }  .news p {   float: right;   }  .clear {   clear: both;   }  <div class="news"> <img src="news-pic.jpg" /> <p>some text</p> <div class="clear"></div> </div> 

這樣可以實現(xiàn)我們希望的效果，但是需要添加多余的代碼。常常有元素可以應(yīng)用 clear，但是有時候不得不為了進行布局而添加無意義的標(biāo)記。

不過我們還有另一種辦法，那就是對容器 div 進行浮動：

.news {   background-color: gray;   border: solid 1px black;   float: left;   }  .news img {   float: left;   }  .news p {   float: right;   }  <div class="news"> <img src="news-pic.jpg" /> <p>some text</p> </div> 

這樣會得到我們希望的效果。不幸的是，下一個元素會受到這個浮動元素的影響。為了解決這個問題，有些人選擇對布局中的所有東西進行浮動，然后使用適當(dāng)?shù)挠幸饬x的元素（常常是站點的頁腳）對這些浮動進行清理。這有助于減少或消除不必要的標(biāo)記。

事實上，W3School 站點上的所有頁面都采用了這種技術(shù)，如果您打開我們使用 CSS 文件，您會看到我們對頁腳的 div 進行了清理，而頁腳上面的三個 div 都向左浮動。

CSS clear 屬性

我們剛才詳細討論了 CSS 清理的工作原理和 clear 屬性應(yīng)用方法。如果您希望學(xué)習(xí)更多有關(guān) clear 屬性的知識，請訪問參考手冊：CSS clear 屬性。

浮動和清理 實例

float 屬性的簡單應(yīng)用

使圖像浮動于一個段落的右側(cè)。

將帶有邊框和邊界的圖像浮動于段落的右側(cè)

使圖像浮動于段落的右側(cè)。向圖像添加邊框和邊界。

帶標(biāo)題的圖像浮動于右側(cè)

使帶有標(biāo)題的圖像浮動于右側(cè)

使段落的首字母浮動于左側(cè)

使段落的首字母浮動于左側(cè)，并向這個字母添加樣式。

創(chuàng)建水平菜單

使用具有一欄超鏈接的浮動來創(chuàng)建水平菜單。

創(chuàng)建無表格的首頁

使用浮動來創(chuàng)建擁有頁眉、頁腳、左側(cè)目錄和主體內(nèi)容的首頁。

清除元素的側(cè)面

本例演示如何使用清除元素側(cè)面的浮動元素。

CSS 絕對定位

絕對定位使元素的位置與文檔流無關(guān)，因此不占據(jù)空間。這一點與相對定位不同，相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對于它在普通流中的位置。

普通流中其它元素的布局就像絕對定位的元素不存在一樣：

#box_relative {   position: absolute;   left: 30px;   top: 20px; } 

如下圖所示：

絕對定位的元素的位置相對于最近的已定位祖先元素，如果元素沒有已定位的祖先元素，那么它的位置相對于最初的包含塊。

對于定位的主要問題是要記住每種定位的意義。所以，現(xiàn)在讓我們復(fù)習(xí)一下學(xué)過的知識吧：相對定位是“相對于”元素在文檔中的初始位置，而絕對定位是“相對于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相對于”最初的包含塊。

注釋：根據(jù)用戶代理的不同，最初的包含塊可能是畫布或 HTML 元素。

提示：因為絕對定位的框與文檔流無關(guān)，所以它們可以覆蓋頁面上的其它元素。可以通過設(shè)置 z-index 屬性來控制這些框的堆放次序。

CSS 絕對定位實例

定位：絕對定位

本例演示如何使用絕對值來對元素進行定位。

CSS 相對定位

相對定位是一個非常容易掌握的概念。如果對一個元素進行相對定位，它將出現(xiàn)在它所在的位置上。然后，可以通過設(shè)置垂直或水平位置，讓這個元素“相對于”它的起點進行移動。

如果將 top 設(shè)置為 20px，那么框?qū)⒃谠恢庙敳肯旅?20 像素的地方。如果 left 設(shè)置為 30 像素，那么會在元素左邊創(chuàng)建 30 像素的空間，也就是將元素向右移動。

#box_relative {   position: relative;   left: 30px;   top: 20px; } 

如下圖所示：

注意，在使用相對定位時，無論是否進行移動，元素仍然占據(jù)原來的空間。因此，移動元素會導(dǎo)致它覆蓋其它框。

CSS 相對定位實例

定位：相對定位

本例演示如何相對于一個元素的正常位置來對其定位。

CSS 定位和浮動

CSS 為定位和浮動提供了一些屬性，利用這些屬性，可以建立列式布局，將布局的一部分與另一部分重疊，還可以完成多年來通常需要使用多個表格才能完成的任務(wù)。

定位的基本思想很簡單，它允許你定義元素框相對于其正常位置應(yīng)該出現(xiàn)的位置，或者相對于父元素、另一個元素甚至瀏覽器窗口本身的位置。顯然，這個功能非常強大，也很讓人吃驚。要知道，用戶代理對 CSS2 中定位的支持遠勝于對其它方面的支持，對此不應(yīng)感到奇怪。

另一方面，CSS1 中首次提出了浮動，它以 Netscape 在 Web 發(fā)展初期增加的一個功能為基礎(chǔ)。浮動不完全是定位，不過，它當(dāng)然也不是正常流布局。我們會在后面的章節(jié)中明確浮動的含義。

一切皆為框

div、h1 或 p 元素常常被稱為塊級元素。這意味著這些元素顯示為一塊內(nèi)容，即“塊框”。與之相反，span 和 strong 等元素稱為“行內(nèi)元素”，這是因為它們的內(nèi)容顯示在行中，即“行內(nèi)框”。

您可以使用 display 屬性改變生成的框的類型。這意味著，通過將 display 屬性設(shè)置為 block，可以讓行內(nèi)元素（比如 <a> 元素）表現(xiàn)得像塊級元素一樣。還可以通過把 display 設(shè)置為 none，讓生成的元素根本沒有框。這樣的話，該框及其所有內(nèi)容就不再顯示，不占用文檔中的空間。

但是在一種情況下，即使沒有進行顯式定義，也會創(chuàng)建塊級元素。這種情況發(fā)生在把一些文本添加到一個塊級元素（比如 div）的開頭。即使沒有把這些文本定義為段落，它也會被當(dāng)作段落對待：

<div> some text <p>Some more text.</p> </div> 

在這種情況下，這個框稱為無名塊框，因為它不與專門定義的元素相關(guān)聯(lián)。

塊級元素的文本行也會發(fā)生類似的情況。假設(shè)有一個包含三行文本的段落。每行文本形成一個無名框。無法直接對無名塊或行框應(yīng)用樣式，因為沒有可以應(yīng)用樣式的地方（注意，行框和行內(nèi)框是兩個概念）。但是，這有助于理解在屏幕上看到的所有東西都形成某種框。

CSS 定位機制

CSS 有三種基本的定位機制：普通流、浮動和絕對定位。

除非專門指定，否則所有框都在普通流中定位。也就是說，普通流中的元素的位置由元素在 (X)HTML 中的位置決定。

塊級框從上到下一個接一個地排列，框之間的垂直距離是由框的垂直外邊距計算出來。

行內(nèi)框在一行中水平布置。可以使用水平內(nèi)邊距、邊框和外邊距調(diào)整它們的間距。但是，垂直內(nèi)邊距、邊框和外邊距不影響行內(nèi)框的高度。由一行形成的水平框稱為行框（Line Box），行框的高度總是足以容納它包含的所有行內(nèi)框。不過，設(shè)置行高可以增加這個框的高度。

在下面的章節(jié)，我們會為您詳細講解相對定位、絕對定位和浮動。

CSS position 屬性

通過使用 position 屬性，我們可以選擇 4 種不同類型的定位，這會影響元素框生成的方式。

position 屬性值的含義：

static

元素框正常生成。塊級元素生成一個矩形框，作為文檔流的一部分，行內(nèi)元素則會創(chuàng)建一個或多個行框，置于其父元素中。

relative

元素框偏移某個距離。元素仍保持其未定位前的形狀，它原本所占的空間仍保留。

absolute

元素框從文檔流完全刪除，并相對于其包含塊定位。包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關(guān)閉，就好像元素原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。

fixed

元素框的表現(xiàn)類似于將 position 設(shè)置為 absolute，不過其包含塊是視窗本身。

提示：相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對于它在普通流中的位置。

實例

定位：相對定位

本例演示如何相對于一個元素的正常位置來對其定位。

定位：絕對定位

本例演示如何使用絕對值來對元素進行定位。

定位：固定定位

本例演示如何相對于瀏覽器窗口來對元素進行定位。

使用固定值設(shè)置圖像的上邊緣

本例演示如何使用固定值設(shè)置圖像的上邊緣。

使用百分比設(shè)置圖像的上邊緣

本例演示如何使用百分比值設(shè)置圖像的上邊緣。

使用像素值設(shè)置圖像的底部邊緣

本例演示如何使用像素值設(shè)置圖像的底部邊緣。

使用百分比設(shè)置圖像的底部邊緣

本例演示如何使用百分比值設(shè)置圖像的底部邊緣。

使用固定值設(shè)置圖像的左邊緣

本例演示如何使用固定值設(shè)置圖像的左邊緣。

使用百分比設(shè)置圖像的左邊緣

本例演示如何使用百分比值設(shè)置圖像的左邊緣。

使用固定值設(shè)置圖像的右邊緣

本例演示如何使用固定值設(shè)置圖像的右邊緣。

使用百分比設(shè)置圖像的右邊緣

本例演示如何使用百分比值設(shè)置圖像的右邊緣。

如何使用滾動條來顯示元素內(nèi)溢出的內(nèi)容

本例演示當(dāng)元素內(nèi)容太大而超出規(guī)定區(qū)域時，如何設(shè)置溢出屬性來規(guī)定相應(yīng)的動作。

如何隱藏溢出元素中溢出的內(nèi)容

本例演示在元素中的內(nèi)容太大以至于無法適應(yīng)指定的區(qū)域時，如何設(shè)置 overflow 屬性來隱藏其內(nèi)容。

如何設(shè)置瀏覽器來自動地處理溢出

本例演示如何設(shè)置瀏覽器來自動地處理溢出。

設(shè)置元素的形狀

本例演示如何設(shè)置元素的形狀。此元素被剪裁到這個形狀內(nèi)，并顯示出來。

垂直排列圖象

本例演示如何在文本中垂直排列圖象。

Z-index

Z-index可被用于將在一個元素放置于另一元素之后。

Z-index

上面的例子中的元素已經(jīng)更改了Z-index。

CSS 定位屬性

CSS 定位屬性允許你對元素進行定位。

外邊距合并

外邊距合并（疊加）是一個相當(dāng)簡單的概念。但是，在實踐中對網(wǎng)頁進行布局時，它會造成許多混淆。

簡單地說，外邊距合并指的是，當(dāng)兩個垂直外邊距相遇時，它們將形成一個外邊距。合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者。

當(dāng)一個元素出現(xiàn)在另一個元素上面時，第一個元素的下外邊距與第二個元素的上外邊距會發(fā)生合并。請看下圖：

親自試一試

當(dāng)一個元素包含在另一個元素中時（假設(shè)沒有內(nèi)邊距或邊框把外邊距分隔開），它們的上和/或下外邊距也會發(fā)生合并。請看下圖：

親自試一試

盡管看上去有些奇怪，但是外邊距甚至可以與自身發(fā)生合并。

假設(shè)有一個空元素，它有外邊距，但是沒有邊框或填充。在這種情況下，上外邊距與下外邊距就碰到了一起，它們會發(fā)生合并：

如果這個外邊距遇到另一個元素的外邊距，它還會發(fā)生合并：

這就是一系列的段落元素占用空間非常小的原因，因為它們的所有外邊距都合并到一起，形成了一個小的外邊距。

外邊距合并初看上去可能有點奇怪，但是實際上，它是有意義的。以由幾個段落組成的典型文本頁面為例。第一個段落上面的空間等于段落的上外邊距。如果沒有外邊距合并，后續(xù)所有段落之間的外邊距都將是相鄰上外邊距和下外邊距的和。這意味著段落之間的空間是頁面頂部的兩倍。如果發(fā)生外邊距合并，段落之間的上外邊距和下外邊距就合并在一起，這樣各處的距離就一致了。

注釋：只有普通文檔流中塊框的垂直外邊距才會發(fā)生外邊距合并。行內(nèi)框、浮動框或絕對定位之間的外邊距不會合并。