簡單屬性選擇

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

例子 1

如果您希望把包含標題（title）的所有元素變為紅色，可以寫作：

*[title] {color:red;}

親自試一試

例子 2

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

a[href] {color:red;}

親自試一試

例子 3

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

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

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

親自試一試

例子 4

可以采用一些創造性的方法使用這個特性。

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

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

親自試一試

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

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

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

假設我們為描述太陽系行星設計了一個 XML 文檔。如果我們想選擇有 moons 屬性的所有 planet 元素，使之顯示為紅色，以便能更關注有 moons 的行星，就可以這樣寫：

planet[moons] {color:red;}

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

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

查看效果

根據具體屬性值選擇

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

例子 1

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

a[] {color: red;}

親自試一試

例子 2

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

a[] {color: red;}

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

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

親自試一試

例子 3

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

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

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

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

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

查看效果

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

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

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

請考慮一下的標記片段：

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

如果寫成 p[class="important"]，那么這個規則不能匹配示例標記。

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

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

親自試一試

根據部分屬性值選擇

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

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

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

親自試一試

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

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

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

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

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

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

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

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

親自試一試

子串匹配屬性選擇器

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

很多現代瀏覽器都支持這些選擇器，包括 IE7。

下表是對這些選擇器的簡單總結：

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

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

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

親自試一試

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

特定屬性選擇類型

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

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

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

<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"] 可以用于任何屬性及其值。

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

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

親自試一試

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

CSS ID 選擇器

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

語法

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

請看下面的規則：

*#intro {font-weight:bold;}

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

#intro {font-weight:bold;}

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

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

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

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

親自試一試

類選擇器還是 ID 選擇器？

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

區別 1：只能在文檔中使用一次

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

區別 2：不能使用 ID 詞列表

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

區別 3：ID 能包含更多含義

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

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

這個規則會與以下各個元素匹配（這些元素不能在同一個文檔中同時出現，因為它們都有相同的 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 元素設定樣式
• 為 id 為 mostImportant 的 em 元素設定樣式
• 為 id 為 mostImportant 的 ul 元素設定樣式

區分大小寫

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

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

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

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

CSS 類選擇器

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

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

提示：只有適當地標記文檔后，才能使用這些選擇器，所以使用這兩種選擇器通常需要先做一些構想和計劃。

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

修改 HTML 代碼

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

為了將類選擇器的樣式與元素關聯，必須將 class 指定為一個適當的值。請看下面的 HTML 代碼：

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

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

語法

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

*.important {color:red;}

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

.important {color:red;}

親自試一試

結合元素選擇器

類選擇器可以結合元素選擇器來使用。

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

p.important {color:red;}

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

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

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

親自試一試

CSS 多類選擇器

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

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

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

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

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

親自試一試

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

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

.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 都不能正確地處理多類選擇器。

選擇器分組

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

h2, p {color:gray;}

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

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

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

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

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

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

/* 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;} 

親自試一試

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

/* 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），顯示為一個星號（*）。該選擇器可以與任何元素匹配，就像是一個通配符。

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

* {color:red;}

親自試一試

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

聲明分組

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

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

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

但是上面這種做法的效率并不高。尤其是當我們為一個有多個樣式的元素創建這樣一個列表時會很麻煩。相反，我們可以將聲明分組在一起：

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 指定一個關鍵字，所以用戶代理會完全忽略這個 color 聲明（包括 background: black 部分）。這樣 h1 標題只會顯示為藍色，而沒有紅色背景，不過更有可能根本得不到藍色的 h1。相反，這些標題只會顯示為默認顏色（通常是黑色），而且根本沒有背景色。font: 28px Verdana 聲明仍能正常發揮作用，因為它確實正確地以一個分號結尾。

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

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

結合選擇器和聲明的分組

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

下面的規則為所有標題指定了一種復雜的樣式：

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

親自試一試

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

CSS 元素選擇器

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

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

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

親自試一試

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

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

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

親自試一試

類型選擇器

在 W3C 標準中，元素選擇器又稱為類型選擇器（type selector）。

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

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

h1 {font-family: sans-serif;}

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

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 元素選擇器（類型選擇器）可以設置 XML 文檔中元素的樣式。

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

CSS 浮動

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

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

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

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

CSS float 屬性

在 CSS 中，我們通過 float 屬性實現元素的浮動。

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

行框和清理

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

因此，創建浮動框可以使文本圍繞圖像：

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

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

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

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

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

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

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

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

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

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

不過我們還有另一種辦法，那就是對容器 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> 

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

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

CSS clear 屬性

我們剛才詳細討論了 CSS 清理的工作原理和 clear 屬性應用方法。如果您希望學習更多有關 clear 屬性的知識，請訪問參考手冊：CSS clear 屬性。

浮動和清理 實例

float 屬性的簡單應用

使圖像浮動于一個段落的右側。

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

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

帶標題的圖像浮動于右側

使帶有標題的圖像浮動于右側

使段落的首字母浮動于左側

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

創建水平菜單

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

創建無表格的首頁

使用浮動來創建擁有頁眉、頁腳、左側目錄和主體內容的首頁。

清除元素的側面

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

CSS 絕對定位

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

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

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

如下圖所示：

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

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

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

提示：因為絕對定位的框與文檔流無關，所以它們可以覆蓋頁面上的其它元素?？梢酝ㄟ^設置 z-index 屬性來控制這些框的堆放次序。

CSS 絕對定位實例

定位：絕對定位

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

CSS 相對定位

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

如果將 top 設置為 20px，那么框將在原位置頂部下面 20 像素的地方。如果 left 設置為 30 像素，那么會在元素左邊創建 30 像素的空間，也就是將元素向右移動。

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

如下圖所示：

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

CSS 相對定位實例

定位：相對定位

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

CSS 定位和浮動

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

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

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

一切皆為框

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

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

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

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

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

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

CSS 定位機制

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

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

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

行內框在一行中水平布置?？梢允褂盟絻冗吘?、邊框和外邊距調整它們的間距。但是，垂直內邊距、邊框和外邊距不影響行內框的高度。由一行形成的水平框稱為行框（Line Box），行框的高度總是足以容納它包含的所有行內框。不過，設置行高可以增加這個框的高度。

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

CSS position 屬性

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

position 屬性值的含義：

static

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

relative

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

absolute

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

fixed

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

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

實例

定位：相對定位

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

定位：絕對定位

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

定位：固定定位

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

使用固定值設置圖像的上邊緣

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

使用百分比設置圖像的上邊緣

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

使用像素值設置圖像的底部邊緣

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

使用百分比設置圖像的底部邊緣

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

使用固定值設置圖像的左邊緣

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

使用百分比設置圖像的左邊緣

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

使用固定值設置圖像的右邊緣

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

使用百分比設置圖像的右邊緣

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

如何使用滾動條來顯示元素內溢出的內容

本例演示當元素內容太大而超出規定區域時，如何設置溢出屬性來規定相應的動作。

如何隱藏溢出元素中溢出的內容

本例演示在元素中的內容太大以至于無法適應指定的區域時，如何設置 overflow 屬性來隱藏其內容。

如何設置瀏覽器來自動地處理溢出

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

設置元素的形狀

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

垂直排列圖象

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

Z-index

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

Z-index

上面的例子中的元素已經更改了Z-index。

CSS 定位屬性

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

外邊距合并

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

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

當一個元素出現在另一個元素上面時，第一個元素的下外邊距與第二個元素的上外邊距會發生合并。請看下圖：

親自試一試

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

親自試一試

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

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

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

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

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

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