Java程式員從笨鳥到菜鳥之（十七）CSS基礎積累總結（下）

七.組織元素（span和div）

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

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

• 用span組織元素
• 用div組織元素

用span組織元素

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

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

<p>早睡早起使人健康、富裕又聰穎。</p>

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

<p>早睡早起使人<span class="benefit">健康</span>、<span class="benefit">富裕</span>和<span class="benefit">聰穎</span>。</p>

相應的CSS代碼如下：

span.benefit {color:red;}

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

用div組織元素

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

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

<div id="democrats"><ul><li>富蘭克林·D·羅斯福</li><li>哈利·S·杜魯門</li><li>約翰·F·甘迺迪</li><li>林登·B·約翰遜</li><li>吉米·卡特</li><li>比爾·克林頓</li></ul></div><div id="republicans"><ul><li>德懷特·D·艾森豪</li><li>理查德·尼克森</li><li>傑拉爾德·福特</li><li>羅納德·雷根</li><li>喬治·布希</li><li>喬治·W·布希</li></ul></div>

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

#democrats {background:blue;}#republicans {background:red;}

八：盒狀模型

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

CSS中的盒狀模型

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

<h1>Article 1:</h1><p>All human beings are born freeand equal in dignity and rights.They are endowed with reason and conscienceand should act towards one another in aspirit of brotherhood</p>
通過添加一些顏色及字型資訊，該例可以有以下顯示效果：
這個例子包含了兩個元素：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;}
幾乎所有元素都可以採用跟上面一樣的方法來設定外邊距。例如，我們可以為所有用<p>標記的文本段落定義外邊距：
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
  
border-color
  
border-style
  
一些樣本
  
縮寫 [border]
 
邊框寬度[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代碼如下所示：
<div id="picture"><img src="bill.jpg" alt="Bill Gates"></div><p>causas naturales et antecedentes, idciro etiam nostrarum voluntatum...</p>
要實現圖片向左浮動、而且被文字環繞的效果，你只需先設定圖片所在盒子的寬度，然後再把CSS屬性float設為left即可：
#picture {float:left;width: 100px;}
另一個例子：列
浮動也可以用於實現在文檔中分列。要建立多個列，你需要在HTML代碼裡用div來結構化想要的各個列：
<div id="column1"><p>Haec disserens qua de re agaturet in quo causa consistat non videt...</p></div><div id="column2"><p>causas naturales et antecedentes, idciro etiam nostrarum voluntatum...</p></div><div id="column3"><p>nam nihil esset in nostra potestate si res ita se haberet...</p></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”，那麼該盒子的上邊距將始終處於前面的浮動盒子（如果存在的話）的下邊距之下。
<div id="picture"><img src="bill.jpg" alt="Bill Gates"></div><h1>Bill Gates</h1><p class="floatstop">causas naturales et antecedentes, idciro etiam nostrarum voluntatum...</p>
要避免文本上移到圖片旁，我們可以在CSS中添加以下代碼：
#picture {float:left;width: 160px;}.floatstop {clear:both;}
元素的定位
CSS定位令你可以將一個元素精確地放在頁面上你所指定的地方。聯合使用定位與浮動（參見第13課），你將能夠建立多種進階而精確的布局。
本課我們將討論以下內容：
 

  
CSS定位的原理
  
絕對位置
  
相對定位
 
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;}