css布局定位系列：（1）基本知識及正常流（Normal Flow）定位

 

英文原文地址：http://brainjar.com/css/positioning/default.asp

翻譯：零度，轉載請註明本文英文原文出處以及本文地址。由於我英文水平有限，有不懂的地方還請閱讀原文，歡迎交流！

查看W3C CSS 標準 推薦.

CSS 定位

理解怎麼布局頁面內容有助於我們更好的利用css布局。這篇文章給了CSS2 規範裡的一些方法和規則。它同時指出了一些我們需要留神的東西。

儘管規範適用於任何網頁展示裝置，這篇文章只集中考慮它是怎麼在瀏覽器裡工作的。為了簡單，我們忽略了許多細節。想要更精確的參考，請閱讀標準文檔。

記住一個特定的瀏覽器不支援某些特性或者不會正確執行這個特性是很重要的。同時，某些瀏覽器除了支援標準，它們還有會有少許的偏離，這些差異是需要我們注意的。

盒子模型

為了理解CSS定位，你必須首先理解盒子模型。為了顯示，文檔裡的每一個元素被認為是一個矩形盒子，這個盒子有一個內容域，內容域被padding、border和margin包圍.下面的插圖展示了各個不同的部分。

content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content

    margin     border     padding     content

Margin總是透明的。Border可以有不同的風格。為一個元素設定背景樣式將被應用到border裡的padding和內容域。為了能讓你看得更清晰，上面的padding域有一個很淺的灰暗背景。

當這篇文章涉及到盒子的時候，術語"margin edge"、"border edge"(margin邊、bodder邊)等指的是和上面盒子相似的外邊緣！

marging、border和padding都是可選的（可有可無的），為了計算位置和大小，如果沒有特別說明，它們有一個預設值零。如果需要，每一條可見邊都可以有不同的寬度（這裡指border的四條邊，因為只有border可見，譯者注）。Margin甚至可以有負值！

每一個盒子的寬度和高度等於margin外沿的寬度和高度。請注意盒子的大小並不總是內容域的大小（可以是）。

一個盒子可以包含任何數目的其他盒子，新增一個具有層次的盒子和插入一個頁面元素等價。瀏覽器視窗是所有層次的根項目。

盒子類型

盒子有兩種基本類型：block（塊級）和inline（行內，國內有時也譯為內嵌元素，意思一樣）。塊級盒子由P、DIV或者TABLE等元素產生。行內盒子由B、I或者SPAN等標記以及內容文本和圖片組成。

盒子的類型可以通過diplay屬性改變。比如給一個行內元素設定一個block值就可以使這個元素具有區塊層級元素的特徵。注意，如果你把display的屬性設為none,這個盒子是不會產生的，它不會被瀏覽器顯示，同樣的，這個盒子裡的任何元素都會被瀏覽器忽略，不管它們是否被聲明為其他的屬性！

一些特殊的元素比如list和table還有其他的盒類型。然而，如果是為了定位，這些元素的其他盒類型也會當作block或者inline看待，這裡就不考慮了。

包含塊

對一個塊級盒裡的所有元素來說，這個塊級盒可以看成它們的包含塊。例如以下代碼：

<div>
This is the first sentence.
<p>This is the second sentence.</p>
</div>

這個div元素就為第一行文本和下面的P元素建立了一個包含塊。P元素又為它裡頭的文本建立了另外一個包含塊。

注意到上面例子中的第一行文本產生了一個行類盒是很有意思的，在這裡認為下面的塊級盒圍繞在它的周圍。像這樣的匿名塊級盒被用來簡化定位處理。結果就是這樣的一個塊級盒將只能包含行內盒，或者只能包含塊級盒，甚至有些這樣的塊級盒只能圍繞在行內盒的周圍。

包含塊用來計算它裡頭元素盒的位置以及範圍。比如，如果一個元素的樣式是{width:50%}，它的寬度將被設定為包含塊的一半。

對於任何一個沒有絕對位置的元素，它的包含塊被認為是父級塊中內容邊沿與它最接近的塊級盒。如果不存在這樣的一個父級盒，那麼它的塊級盒就是瀏覽器視窗。我們分開考慮絕對位置元素。

定位元模式

CSS2裡有3種定位元模式：normal,float和absolute。每一種類型都有自己獨立的規則。每一個盒子只能使用這三種類型中的一種，不同盒子根據它們自己的定位和浮動樣式設定選擇不同的模型。

正常流（Normal Flow）

正常流是預設的定位方式。任何沒有具體指定{position:absolute}或者{position:fixed}屬性以及沒有被浮動的元素都將預設獲得此屬性。

在這種方式裡，塊級盒在它們的包含塊裡一個一個垂直延伸，行內盒在它們的包含塊裡從左至右的水平排布。

你應該注意到在正常流裡垂直邊距（vertical margin）是重疊的。也就是說，上下兩個塊級盒之間的邊距由它們之中邊距較大的元素決定，而不是他們的和！下面圖示說明了這一點。

content content content content content content content content content content content content content content content content content content content content content content content content content content content

當然，在水平方向上，區塊層級元素的邊距從來不會重疊。

如果需要，行內塊是可以被折斷的，當寬度受到限制的時候，它會自動移動到下一行。這可能會產生一些難看的效果如果行內塊有邊框的話。看下面的效果：

content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content

按照標準，上面兩條邊線的相交只應該顯示三條邊。沒有人說標準是完美的。

(未完待續~~~~·)