你可以通過 CSS 來設置布局的炫酷效果。其中所涉及的部分高階技術并不是本文范疇。
當你設計一個簡單布局時, 你的樣式表與瀏覽器默認樣式表之間的交互、以及與布局引擎的交互都是相當復雜的。 這也是一個高階話題，并不在本文范疇。
本文主要介紹一些簡單的布局方法。（高階技術請參閱外部鏈接 學習高級布局）
當你想控制文檔布局時，就不得不改變它的結構。
頁面標記語言通常都會有公共標簽來創建結構。例如, 在 HTML 中你可以使用 div 元素來創建結構。
示例
在你的示例中, 編號段落并沒有自己的容器。
你的樣式表無法為這些段落畫出邊框，因為沒有選擇器指向它們。
為了解決這個問題, 你可以在段落之外添加一個“ 。這個標簽是唯一的，可以指定一個id屬性來標識:
<h3>Numbered paragraphs</h3><div id="numbered"> <p>Lorem ipsum</p> <p>Dolor sit</p> <p>Amet consectetuer</p> <p>Magna aliquam</p> <p>Autem veleum</p></div>現在可以通過樣式表在每個列表周圍畫出邊框了:
ul, #numbered { border: 1em solid #69b; padding-right:1em;}運行結果如下:
(A) The oceans
Arctic Atlantic Pacific Indian Southern(B) Numbered paragraphs
**1: **Lorem ipsum
**2: **Dolor sit
**3: **Amet consectetuer
**4: **Magna aliquam
**5: **Autem veleum
到目前為止，你可以通過像素來指定大小。這在有些情況下是非常合適的，比如電腦屏幕顯示。 但當用戶改變字體大小之后，你的布局可能會發生錯位。
因此，最好通過百分比或 ems (em) 來指定大小。 em 通常是指當前字體大小(字母m的寬度)。當用戶改變字體大小時，你的布局會自己修正。
示例
文本左邊的border通過像素來指定大小。
文本右邊的border通過 ems來指定大小。
在你的瀏覽器中，修改字體大小，會發現右邊的border會自己修正大小而左邊的不會:
RESIZE ME PLEASE
更多詳情
對于其它設備，其它的長度單位可能更合適。
在本指南中會有其它篇幅詳細介紹這一點。
更多詳情參見CSS說明中 Values .
有兩個屬性可以指定元素內容的對齊方式。你可以用它們來進行簡單的布局:
text-align
內容對齊。 可以使用下面幾個值： left, right, center, justify。
text-indent
指定內容縮進。
這兩個屬性可以應用于任何文本類內容，不只是純文本。 需要注意的是，它們會被元素的子元素繼承， 所以需要在子元素中將它們關閉，以免出現意想不到的效果。
示例
標題居中:
h3 { border-top: 1px solid gray; text-align: center;}輸出結果:
(A) The oceans
在 HTML 文檔中, 標題之后的內容并不屬于標題。當你對齊一個標題時，其后的元素不會繼承該樣式。
float 屬性強制元素靠左或靠右。 這是控制元素位置和大小的簡單方法。
本文剩下部分都是圍繞浮動元素展開。你可以使用 clear 屬性來避免其它元素受到浮動效果的影響。
示例
在你的示例中，list是根據窗口拉伸。你可以通過使用浮動元素來使它們靠左。
為了保證標題在正確的位置, 你必須為標題指定clear屬性來避免標題靠左:
ul, #numbered {float: left;}h3 {clear: left;}你可以為一個元素指定 position 屬性為以下值之一，來設置其位置。
這些是高階屬性。 可以通過簡單的方式來使用它們—這也是在基礎教程里提到它們的原因。但使用它們來實現復雜的布局會相對困難一些。
relative
通過為元素指定一個值，元素相對于其原來位置移動。也可以使用margin來達到同樣的效果。
fixed
為元素指定相對于窗口的確切位置 。即使文檔的其它元素出現滾動，元素位置仍然不變。
absolute
為元素指定相對于其父元素的確切位置。只有在父元素使用 relative, fixed or absolute 時才有效。你可以為任何父元素指定 position: relative;因為它不會產生移動。
static
默認值。當明確要關閉位置屬性時使用。
和 position 屬性(除了 static)一起使用的, 有下列屬性: top, right, bottom, left, width, height 通過設置它們來指定元素的位置或大小。
示例
為了放置兩個元素，一個在另外一個上方, 創建一個父容器來包含兩個子元素:
<div id="parent-div"> <p id="forward">/</p> <p id="back">/</p></div>在你的樣式表里，將父容器的position設置為 relative。無需為它設置任何具體變動。 將子元素的position屬性設置為 absolute:
輸出結果如下,反斜杠顯示在斜杠上方
更多詳情
更多詳情的postion說明在 CSS Specification 中占用了兩個章節: Visual formatting model 和 Visual formatting model details.
如果你的樣式表工作在多種瀏覽器環境下，你會發現不同瀏覽器對標準協議的解釋會有很多不同, 而且特定瀏覽器的特定版本可能存在BUG。
doc2.html, 和樣式表, style2.css, 使用之前的示例 文檔結構 and 浮動.在 浮動 示例中, 添加padding 來分離文本和右側border ,值設為0.5 em.新聞熱點
疑難解答
