七.組織元素(span和div)

span和div元素用于組織和結構化文檔，并經常聯合class和id屬性一起使用。

在這一課中，我們將進一步探究span和div的用法，因為這兩個HTML元素對于CSS是很重要的。

用span組織元素

用div組織元素

用span組織元素

span元素可以說是一種中性元素，因為它不對文檔本身添加任何東西。但是與CSS結合使用的話，span可以對文檔中的部分文本增添視覺效果。

讓我們用一句本杰明·弗蘭克林(Benjamin Franklin)的名言來舉個例子：

早睡早起

使人健康、富裕又聰穎。

假設我們想用紅色來強調弗蘭克林先生所認為的“不要在睡眠中度過一天”的好處，我們可以用標簽來標記上述每一點好處。然后，我們將這幾個span設置為相同的class。這樣，我們稍后就可以在樣式表里針對這個class定義特定的樣式。

早睡早起

使人健康、

富裕

和聰穎。

相應的CSS代碼如下：

span.benefit {

color:red;

}

當然，你也可以采用id來為span元素添加樣式。不過正如我們在上一課所學的，如果采用id的話，你必須為這三個span元素各自分別指定一個唯一的id。

用div組織元素

如前面例子所示，span的使用局限在一個塊元素內，而div可以被用來組織一個或多個塊元素。

除去這點區別，div和span在組織元素方面相差無幾。讓我們來看一個例子。我們將歷屆美國總統按其所屬的政營分別組織為兩個列表：

在這里，我們可以采用跟上例同樣的方法來處理樣式表：

#democrats {

background:blue;

}

#republicans {

background:red;

}

八：盒狀模型

CSS中的盒狀模型(box model)用于描述一個為HTML元素形成的矩形盒子。盒狀模型還涉及為各個元素調整外邊距(margin)、邊框(border)、內邊距(padding)和內容的具體操作。下圖顯示了盒狀模型的結構：

CSS中的盒狀模型

上面的圖示看上去可能感覺有點理論化，好吧，讓我們試著用一個實例來解釋盒狀模型。在我們的例子中，有一個標題和一些文本。該例的HTML代碼如下(摘自世界人權宣言)：

Article 1:

All human beings are born free

and equal in dignity and rights.

They are endowed with reason and conscience

and should act towards one another in a

spirit of brotherhood

通過添加一些顏色及字體信息，該例可以有以下顯示效果：

這個例子包含了兩個元素：h1和p。這兩個元素的盒狀模型如下圖所示：

為元素設置外邊距

一個元素有上(top)、下(bottom)、左(left)、右(right)四個邊。外邊距(margin)表示從一個元素的邊到相鄰元素(或者文檔邊界)之間的距離。可以參考第9課的圖示。

在下面這個例子中，我們將了解如何為文檔本身(即body元素)定義外邊距。下圖顯示了我們對外邊距的要求。

滿足上述要求的CSS代碼如下：

body {

margin-top:100px;

margin-right:40px;

margin-bottom:10px;

margin-left:70px;

}

或者你也可以采用一種較優雅的縮寫形式：

body {

margin: 100px 40px 10px 70px;

}

幾乎所有元素都可以采用跟上面一樣的方法來設置外邊距。例如，我們可以為所有用

標記的文本段落定義外邊距：

body {

margin: 100px 40px 10px 70px;

}

p {

margin: 5px 50px 5px 50px;

}

為元素設置內邊距

內邊距(padding)也可以被理解成“填充物”。這樣理解是合理的，因為內邊距并不影響元素間的距離，它只定義元素的內容與元素邊框之間的距離。

下面我們通過一個簡單的例子來說明內邊距的用法。在這個例子中，所有標題都具有背景色：

h1 {

background: yellow;

}

h2 {

background: orange;

}

通過為標題設置內邊距，你可以控制在標題文本周圍填充多少空白：

h1 {

background: yellow;

padding: 20px 20px 20px 80px;

}

h2 {

background: orange;

padding-left:120px;

}

邊框

邊框(border)可以有多種用途，比如作為裝飾元素或者作為劃分兩物的分界線。在設置邊框方面，CSS為你提供了無盡選擇。

邊框寬度[border-width]

邊框寬度由CSS屬性border-width定義，其值可以是“thin”(薄)、“medium”(普通)或“thick”(厚)等，也可以是像素值。如下圖所示：

邊框顏色[border-color]

CSS屬性border-color用于定義邊框的顏色。其值就是正常的顏色值，例如：“#123456”、 “rgb(123,123,123)”、“yellow”等。

邊框樣式[border-style]

邊框樣式有多種可供選擇。下圖顯示了8種不同樣式的邊框在Internet Explorer 5.5里的實際顯示效果。在這個例子里，我們為這8種邊框都選擇了“金色(gold)”作為邊框顏色、“厚(thick)”作為邊框寬度。當然，這只是個例子，你可以為邊框設置別的顏色和厚度。

如果你不想有任何邊框，可以為它取值為“none”或者“hidden”。

一些示例

我們可以將上面三個有關邊框的CSS屬性組合起來使用，從而制造出多種多樣的變化。來舉個例子，我們要為一個文檔中的h1、h2、ul和p等元素分別定義不同的邊框。盡管其顯示效果也許并不那么美觀，但是它很好地向你展示了多種變化的可能：

h1 {

border-width: thick;

border-style: dotted;

border-color:gold;

}

h2 {

border-width: 20px;

border-style: outset;

border-color: red;

}

p {

border-width: 1px;

border-style: dashed;

border-color: blue;

}

ul {

border-width: thin;

border-style: solid;

border-color: orange;

}

我們也可以為上邊框、下邊框、右邊框、左邊框分別指定特定的CSS屬性。具體做法如下例所示：

h1 {

border-top-width: thick;

border-top-style: solid;

border-top-color: red;

border-bottom-width: thick;

border-bottom-style: solid;

border-bottom-color: blue;

border-right-width: thick;

border-right-style: solid;

border-right-color: green;

border-left-width: thick;

border-left-style: solid;

border-left-color: orange;

}

縮寫[border]

跟許多其他屬性一樣，你也可以將有關邊框的CSS屬性縮寫為一個border屬性。讓我們看一個例子：

p {

border-width: 1px;

border-style: solid;

border-color: blue;

}

可被縮寫為：

p {

border: 1px solid blue;

}

設定寬度[width]

你可以通過width屬性來設定一個元素的寬度，即在水平方向上的尺寸。

下面是一個簡單的例子，它為我們提供了一個可以容納文本的盒子：

div.box {

width: 200px;

border: 1px solid black;

background: orange;

}

設定高度[height]

注意上一個例子，盒子里內容的長短決定了盒子的高度。你可以通過height屬性來設定一個元素的高度。比方說，我們要把上面那個例子中的盒子高度設定為500像素：

div.box {

height: 500px;

width: 200px;

border: 1px solid black;

background: orange;

}

浮動元素(float)

我們可以通過CSS屬性float令元素向左或向右浮動。也就是說，令盒子及其中的內容浮動到文檔(或者是上層盒子)的右邊或者左邊(參見第9課關于盒狀模型的描述)。下圖闡明了其原理：

如何實現這個效果？

上例的HTML代碼如下所示：

causas naturales et antecedentes,

idciro etiam nostrarum voluntatum...

要實現圖片向左浮動、而且被文字環繞的效果，你只需先設定圖片所在盒子的寬度，然后再把CSS屬性float設為left即可：

#picture {

float:left;

width: 100px;

}

另一個例子：列

浮動也可以用于實現在文檔中分列。要創建多個列，你需要在HTML代碼里用div來結構化想要的各個列：

下面，我們把各列的寬度設定為“33%”，并通過定義float屬性令各列向左浮動：

#column1 {

float:left;

width: 33%;

}

#column2 {

float:left;

width: 33%;

}

#column3 {

float:left;

width: 33%;

}

float屬性的值可以是left、right或者none。

clear屬性

CSS屬性clear用于控制浮動元素的后繼元素的行為。

缺省地，后繼元素將向上移動，以填補由于前面元素的浮動而空出的可用空間。在前面的例子中，文本自動上移到了比爾蓋茨的圖片旁。

clear屬性的值可以是left、right、both或none。原則是這樣的：如果一個盒子的clear屬性被設為“both”，那么該盒子的上邊距將始終處于前面的浮動盒子(如果存在的話)的下邊距之下。

Bill Gates

causas naturales et antecedentes,

idciro etiam nostrarum voluntatum...

要避免文本上移到圖片旁，我們可以在CSS中添加以下代碼：

#picture {

float:left;

width: 160px;

}

.floatstop {

clear:both;

}

元素的定位

CSS定位令你可以將一個元素精確地放在頁面上你所指定的地方。聯合使用定位與浮動(參見第13課)，你將能夠創建多種高級而精確的布局。

本課我們將討論以下內容：

CSS定位的原理

把瀏覽器窗口想象成一個坐標系統：

CSS定位的原理是：你可以將任何盒子(box)放置在坐標系統的任何位置上。

假設我們要放置一個標題。通過使用盒狀模型(參見第9課)，標題將顯示如下:

如果我們要把這個標題放置在距文檔頂部100像素、左邊200像素的地方，我們可以在CSS中輸入以下代碼：

h1 {

position:absolute;

top: 100px;

left: 200px;

}

得到的顯示效果如下：

正如你所看到的，采用CSS定位技術來放置元素是非常精確的。相對于使用表格、透明圖像或其他方法而言，CSS定位要簡單得多。

絕對定位

一個采用絕對定位的元素不獲得任何空間。這意味著：該元素在被定位后不會留下空位。

要對元素進行絕對定位，應將position屬性的值設為absolute。接著，你可以通過屬性left、right、top和bottom來設定將盒子放置在哪里。

舉個絕對定位的例子，假如我們要在文檔的四個角落各放置一個盒子：

#box1 {

position:absolute;

top: 50px;

left: 50px;

}

#box2 {

position:absolute;

top: 50px;

right: 50px;

}

#box3 {

position:absolute;

bottom: 50px;

right: 50px;

}

#box4 {

position:absolute;

bottom: 50px;

left: 50px;

}

相對定位

要對元素進行相對定位，應將position屬性的值設為relative。絕對定位與相對定位的區別在于計算位置的方式。

采用相對定位的元素，其位置是相對于它在文檔中的原始位置計算而來的。這意味著，相對定位是通過將元素從原來的位置向右、向左、向上或向下移動來定位的。采用相對定位的元素會獲得相應的空間。

舉個相對定位的例子，我們可以相對于三張圖片在頁面上的原始位置來對它們進行相對定位。注意這些圖片將在文檔中各自的原始位置處留下空位。

#dog1 {

position:relative;

left: 350px;

bottom: 150px;

}

#dog2 {

position:relative;

left: 150px;

bottom: 500px;

}

#dog3 {

position:relative;

left: 50px;

bottom: 700px;

}

用z-index進行層次堆疊

CSS可以處理高度、寬度、深度三個維度。在前面的課程中，我們已經了解了前兩個維度。在本課中，我們將學習如何令不同元素具有層次。簡言之，就是關于元素堆疊的次序問題。

為此，你可以為每個元素指定一個數字(z-index)。其原理是：數字較大的元素將疊加在數字較小的元素之上。

比方說，我們正在打撲克，并且拿了一手同花大順。我們可以通過為各張牌設定一個z-index的方式來表示這手牌：

在這個例子中，我們采用了1-5五個連續的數字來表示堆疊次序，但是你也可以用五個不同的其他數字來取得同樣的效果。這里的要點在于：用數字的大小次序反映希望的堆疊次序。

撲克牌這個例子的代碼可以這樣寫：

#ten_of_diamonds {

position: absolute;

left: 100px;

top: 100px;

z-index: 1;

}

#jack_of_diamonds {

position: absolute;

left: 115px;

top: 115px;

z-index: 2;

}

#queen_of_diamonds {

position: absolute;

left: 130px;

top: 130px;

z-index: 3;

}

#king_of_diamonds {

position: absolute;

left: 145px;

top: 145px;

z-index: 4;

}

#ace_of_diamonds {

position: absolute;

left: 160px;

top: 160px;

z-index: 5;

}