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 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</p>
  這個例子包含了兩個元素：h1和p。這兩個元素的盒狀模型如下圖所示：為元素設定外邊距
一個元素有上（top）、下（bottom）、左（left）、右（right）四個邊。外邊距（margin）表示從一個元素的邊到相鄰元素(或者文檔邊界)之間的距離。可以參考第9課的圖示。在下面這個例子中，我們将了解如何為文檔本身（即body元素）定義外邊距。下圖顯示了我們對外邊距的要求。
    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;
  }
為元素設定内邊距

    h1 {
    background: yellow;
  }
  h2 {
    background: orange;
  }

    h1 {
    background: yellow;
    padding: 20px 20px 20px 80px;
  }
  h2 {
    background: orange;
    padding-left:120px;
  }
邊框

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

和

等元素分别定義不同的邊框。盡管其顯示效果也許并不那麼美觀，但是它很好地向你展示了多種變化的可能：

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 agatur
    et 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

的方式來表示這手牌：

#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;
  }

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

七.組織元素（span和div）

用span組織元素

用div組織元素

八：盒狀模型

CSS中的盒狀模型

邊框寬度[border-width]

邊框顔色[border-color]

邊框樣式[border-style]

一些示例

縮寫[border]

設定寬度[width]

設定高度[height]

浮動元素（float）

如何實作這個效果？

另一個例子：列

clear屬性

元素的定位

CSS定位的原理

絕對定位

相對定位

用z-index進行層次堆疊

繼續閱讀

CSS的僞元素和僞類的差別

css僞類與僞元素差別

CSS中僞類和僞元素的差別

CSS的僞類與僞元素的差別

css中僞類與僞元素的差別

談談css的僞類和僞元素

僞類與僞元素的差別僞類與僞元素的差別

web前端布局練手項目

CSS----對字号的控制:Points, ems, pixels, 及其它機關,關鍵字,比例參數

趕工心得（一）

兩種清除浮動的方法

如何成為一名.net 工程師?

tabpanel 使用問題

CSS之折疊菜單

DOM下元素 offset client scroll 相關屬性簡介

IE8 CSS設定DIV居中，添加“margin:0 auto”