詳解CSS中三種基本的定位機制

CSS 定位機制

CSS 有三種基本的定位機制：普通流、浮動和絕對位置。

除非專門指定，否則所有框都在普通流中定位。也就是說，普通流中的元素的位置由元素在 (X)HTML 中的位置決定。

塊級框從上到下一個接一個地排列，框之間的垂直距離是由框的垂直外邊距計算出來。

行內框在一行中水平布置。可以使用水平內邊距、邊框和外邊距調整它們的間距。但是，垂直內邊距、邊框和外邊距不影響行內框的高度。由一行形成的水平框稱為行框（Line Box），行框的高度總是足以容納它包含的所有行內框。不過，設定行高可以增加這個框的高度。

在下面的章節，我們會為您詳細講解相對定位、絕對位置和浮動。

CSS position 屬性

通過使用 position 屬性，我們可以選擇 4 種不同類型的定位，這會影響元素框產生的方式。

position 屬性值的含義：

static

預設值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。元素框正常產生。區塊層級元素產生一個矩形框，作為文檔流的一部分，行內元素則會建立一個或多個行框，置於其父元素中。

relative

元素框位移某個距離。元素仍保持其未定位前的形狀，它原本所佔的空間仍保留。

absolute

元素框從文檔流完全刪除，並相對於其包含塊定位。包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所佔的空間會關閉，就好像元素原來不存在一樣。元素定位後產生一個塊級框，而不論原來它在正常流中產生何種類型的框。

fixed

元素框的表現類似於將 position 設定為 absolute，不過其包含塊是視窗本身。

inherit

規定應該從父元素繼承 position 屬性的值。

提示：相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對於它在普通流中的位置。

CSS 相對定位

設定為相對定位的元素框會位移某個距離。元素仍然保持其未定位前的形狀，它原本所佔的空間仍保留。

相對定位是一個非常容易掌握的概念。如果對一個元素進行相對定位，它將出現在它所在的位置上。然後，可以通過設定垂直或水平位置，讓這個元素“相對於”它的起點進行移動。

注意，在使用相對定位時，無論是否進行移動，元素仍然佔據原來的空間。因此，移動元素會導致它覆蓋其它框。

CSS 絕對位置

設定為絕對位置的元素框從文檔流完全刪除，並相對於其包含塊定位，包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所佔的空間會關閉，就好像該元素原來不存在一樣。元素定位後產生一個塊級框，而不論原來它在正常流中產生何種類型的框。

絕對位置使元素的位置與文檔流無關，因此不佔據空間。這一點與相對定位不同，相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對於它在普通流中的位置。

普通流中其它元素的布局就像絕對位置的元素不存在一樣。

對於定位的主要問題是要記住每種定位的意義。所以，現在讓我們複習一下學過的知識吧：相對定位是“相對於”元素在文檔中的初始位置，而絕對位置的元素的位置相對於最近的已定位祖先元素，如果元素沒有已定位的祖先元素，那麼它的位置相對於最初的包含塊。

注釋：根據使用者代理程式的不同，最初的包含塊可能是畫布或 HTML 元素。

提示：因為絕對位置的框與文檔流無關，所以它們可以覆蓋頁面上的其它元素。可以通過設定 z-index 屬性來控制這些框的堆放次序。

CSS 浮動

浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。

由於浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現得就像浮動框不存在一樣。

float 屬性定義元素在哪個方向浮動。以往這個屬性總應用於映像，使文本圍繞在映像周圍，不過在 CSS 中，任何元素都可以浮動。浮動元素會產生一個塊級框，而不論它本身是何種元素。

如果浮動非替換元素，則要指定一個明確的寬度；否則，它們會儘可能地窄。

行框和清理

浮動框旁邊的行框被縮短，從而給浮動框留出空間，行框圍繞浮動框。

因此，建立浮動框可以使文本圍繞映像：

要想阻止行框圍繞浮動框，需要對該框應用 clear 屬性。clear 屬性的值可以是 left、right、both 或 none，它表示框的哪些邊不應該挨著浮動框。

為了實現這種效果，在被清理的元素的上外邊距上添加足夠的空間，使元素的頂邊緣垂直下降到浮動框下面：

這是一個有用的工具，它讓周圍的元素為浮動元素留出空間。

讓我們更詳細地看看浮動和清理。假設希望讓一個圖片浮動到文字區塊的左邊，並且希望這幅圖片和文本包含在另一個具有背景顏色和邊框的元素中。您可能編寫下面的代碼：

.news {background-color: gray;border: solid 1px black;}.news img {float: left;}.news p {float: right;}<p class="news"><img src="news-pic.jpg" /><p>some text</p></p>

這種情況下，出現了一個問題。因為浮動元素脫離了文檔流，所以包圍圖片和文本的 p 不佔據空間。

如何讓包圍元素在視覺上包圍浮動元素呢？需要在這個元素中的某個地方應用 clear：

不幸的是出現了一個新的問題，由於沒有現有的元素可以應用清理，所以我們只能添加一個空元素並且清理它。

.news {background-color: gray;border: solid 1px black;}.news img {float: left;}.news p {float: right;}<p class="news"><img src="news-pic.jpg" /><p>some text</p></p>

這樣可以實現我們希望的效果，但是需要添加多餘的代碼。常常有元素可以應用 clear，但是有時候不得不為了進行布局而添加無意義的標記。

不過我們還有另一種辦法，那就是對容器 p 進行浮動：

.news {background-color: gray;border: solid 1px black;float: left;}.news img {float: left;}.news p {float: right;}<p class="news"><img src="news-pic.jpg" /><p>some text</p></p>

這樣會得到我們希望的效果。不幸的是，下一個元素會受到這個浮動元素的影響。為瞭解決這個問題，有些人選擇對布局中的所有東西進行浮動，然後使用適當的有意義的元素（常常是網站的頁尾）對這些浮動進行清理。這有助於減少或消除不必要的標記。

對浮動模組使用負邊距可以覆蓋在相應的浮動模組上，負邊距的邊距屬性並不對其它模組的位置產生作用，他的移動參考點是以本身為參考的。這點和正邊距是大為不同的。正邊距以相鄰模組的位置為參考點進行移動，並對周圍模組進行合理地排擠。

元素置中：

用CSS讓元素置中顯示並不是件很簡單的事情—同樣的合法CSS置中設定在不同瀏覽器中的表現行為卻各有千秋。讓我們先來看一下CSS中常見的幾種讓元素水平置中顯示的方法。

　　1.使用自動外邊距實現置中
　　CSS中首選的讓元素水平置中的方法就是使用margin屬性—將元素的margin-left和margin-right屬性設定為auto即可。在實際使用中，我們可以為這些需要置中的元素建立一個起容器作用的p。需要特別注意的一點就是，必須為該容器指定寬度：

　p#container {　　margin-left: auto;　　margin-right: auto;　　width: 168px;　　}

　　在大多數主流瀏覽器中，這種方法都非常有效，即使是Windows平台上的IE6，在其標準相容模式（compliance mode）下也能夠正常顯示。但不幸的是，在更低版本的IE中，這種設定卻並不能實現置中效果。所以若想在實際項目中使用這種方法，那麼就要確保使用者的IE瀏覽器版本不低於6.0。
　　儘管在支援上不盡如人意，但大多數設計師都建議儘可能地使用這種方法。該方法也被認為是在各種用CSS實現元素水平置中方法中最正確、最合理的一種。
　　2.使用text-align實現置中
　　另一種實現元素置中的方法是使用text-align屬性，將該屬性值設定為center並應用到body元素上即可。這種做法是徹頭徹尾的hack，但它卻能相容大多數瀏覽器，所以在某些情況下也自然必不可少。
　　之所以說它是hack，是因為這種方法並沒有將文字屬性應用到文本上，而是應用到了作為容器的元素上。這也給我們帶來了額外的工作。在建立好布局必須的p之後，我們要按照如下代碼為body應用text-align屬性：

　body{　　text-align:center;　　}

　　之後會出現什麼問題嗎？body的所有子孫元素都會被置中顯示。
　　因此，我們就需要用再寫一條規則，讓其中的文本回到預設的居靠左對齊：

　p {　　text-align:left;　　}

　　可以想象這條附加的規則將帶來一些不便。另外，真正完全遵循標準的瀏覽器並不會改變容器的位置，而只會讓其中的文字置中顯示。
　　3.組合使用自動外邊距和文本對齊
　　因為文本對齊置中方式有著良好的向下相容性，且自動外邊距方式也被大多數當代瀏覽器支援，所以很多設計師將二者組合起來使用，以期讓置中效果得到最大限度的跨瀏覽器支援：

　body {　　text-align: center;　　}　　#container {　　margin-left: auto;　　margin-right: auto;　　border: 1px solid red;　　width: 168px;　　text-align: left　　}

　　可是這始終是個hack，無論如何也算不上完美。我們還是需要為置中容器中的文本編寫附加的規則，但至少在各個瀏覽器中看起來都不錯。
　　4.負外邊距解決方案
　　負外邊距解決方案遠不是僅僅為元素添加負外邊距這麼簡單。這種方法需要同時使用絕對位置和負外邊距兩種技巧。
　　下面是該方案的具體實現方法。首先，建立一個包含置中元素的容器，然後將其絕對位置於相對頁面左邊邊緣50%的位置。這樣，該容器的左外邊距將從頁面50%寬度的位置開始算起。
　　然後，將容器的左外邊距值設定為負的容器寬度的一半。這樣即可將該容器固定在頁面水平方向的中點。

　#container {　　background: #ffc url(mid.jpg) repeat-y center;　　position: absolute;　　left: 50%;　　width: 760px;　　margin-left: -380px;　　}

　　看，沒有任何hack！雖然這並不是首選的解決方案，但也是個不錯的方法，且適用性極廣—甚至在Netscape Navigator 4.x中都沒有任何問題，很令人吃驚，不是嗎？所以若想得到最廣泛的瀏覽器支援，那麼這種方法將會是最好的選擇。

替換和不可替換元素：

元素是文檔結構的基礎，在CSS中，每個元素產生了一個包含了元素內容的框（box，也譯為“盒子”）。但是不同的元素顯示的方式會有所不同，例如<p>和<span>就不同，而<strong>和<p>也不一樣。在文件類型定義（DTD）中對不同的元素規定了不同的類型，這也是DTD對文檔之所以重要的原因之一。

1. 替換和不可替換元素

從元素本身的特點來講，可以分為替換和不可替換元素。

a) 替換元素

替換元素就是瀏覽器根據元素的標籤和屬性，來決定元素的具體顯示內容。

例如瀏覽器會根據<img>標籤的src屬性的值來讀取圖片資訊並顯示出來，而如果查看(X)HTML代碼，則看不到圖片的實際內容；又例如根據<input>標籤的type屬性來決定是顯示輸入框，還是選項按鈕等。

(X)HTML中的<img>、<input>、<textarea>、<select>、<object>都是替換元素。這些元素往往沒有實際的內容，即是一個空元素，例如：

<img src=”cat.jpg” /><input type="submit" name="Submit" value="提交" />

瀏覽器會根據元素的標籤類型和屬性來顯示這些元素。可替換元素也在其顯示中產生了框。

b) 不可替換元素

(X)HTML 的大多數元素是不可替換元素，即其內容直接表現給使用者端（例如瀏覽器）。例如：

<p>段落的內容</p>

段落<p>是一個不可替換元素，文字“段落的內容”全被顯示。

2. 顯示元素

除了可替換元素和不可替換元素的分類方式外，CSS 2.1中元素還有另外的分類方式：區塊層級元素（block-level）和行內元素（inline-level，也譯作“內聯”元素）。

a) 區塊層級元素

在視覺上被格式化為塊的元素，最明顯的特徵就是它預設在橫向充滿其父元素的內容地區，而且在其左右兩邊沒有其他元素，即區塊層級元素預設是獨佔一行的。

典型的區塊層級元素有：<p>、<p>、<h1>到<h6>，等等。

通過CSS設定了浮動（float屬性，可向左浮動或向右浮動）以及設定顯示（display）屬性為“block”或“list-item”的元素都是區塊層級元素。

但是浮動元素比較特殊，由於浮動，其旁邊可能會有其他元素的存在。而“list-item”（清單項目<li>），會在其前面產生圓點符號，或者數字序號。

b) 行內元素

行內元素不形成新內容塊，即在其左右可以有其他元素，例如<a>、<span>、<strong>等，都是典型的行內級元素。

display屬性等於“inline”的元素都是行內元素。幾乎所有的可替換元素都是行內元素，例如<img>、<input>等等。

不過元素的類型也不是固定的，通過設定CSS 的display屬性，可以使行內元素變為區塊層級元素，也可以讓區塊層級元素變為行內元素。

在一種情況下，即使沒有進行顯式定義，也會建立區塊層級元素。這種情況發生在把一些文本添加到一個區塊層級元素（比如p）的開頭。即使沒有把這些文本定義為段落，它也會被當作段落對待：

<p>some text<p>Some more text.</p></p>

在這種情況下，這個框稱為無名塊框，因為它不與專門定義的元素相關聯。