《精通CSS》定位

標籤：style   class   blog   code   http   ext   

　　定位部分包含了兩個模型：視覺格式化模型和定位模型。理解這兩個模型的細微差異是非常重要的，因為它們一起控制著如何在頁面上布置每個元素。

　　/**********視覺格式化模型***************/

　　p、h1、div等元素常常被稱為區塊層級元素，與此相反，strong和span等元素稱為行內元素。區塊層級元素顯示為一塊內容，即“塊框”，它們顯示為一塊內容。行內元素顯示在一行上。

　　display屬性可以改變元素的顯示類型，通過將display設定為block，可以讓行內元素表現的像區塊層級元素一樣，然而將display設定為none，讓產生的元素根本沒有框，這樣，這個框及其內容就不再顯示，不佔用文檔中的空間。

　　CSS中有三種基本的定位機制：普通流、浮動和絕對位置。除非專門制定，否則所有框都在普通流中定位。

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

　　行內框在一行中水平布置。可以使用水平填充、邊框和空白邊調整它們的水平間距(如)。但是垂直填充、邊框和空白邊不會影響行內框的高度。由一行形成的水平框稱為行框，行框的高度總是足以容納它包含的所有行內框。但是，設定行高可以增加這個框的高度。

　　框可以按照(X)HTML元素的嵌套方式包含其他框。大多數框由顯示定義的元素組成。但是，在一中情況下，即使沒有進行顯示定義，也會建立區塊層級元素。這種情況就是把一些文本添加到一個塊級框(比如div)的開頭。即使沒有把這些文本定義為段落，它也會被當做段落對待：

1 <div>2 some text3 <p>Some more text</p>4 </div>

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

　　區塊層級元素內的文本行也會發生類似的情況，假設有一個包含三行文本的段落。每行文本形成一個無名行框。

　　/**********視覺格式化模型***************/

　　/**********相對定位***************/

　　相對定位是一個非常容易掌握的概念，如果對一個元素進行相對定位，它將出現在它所出現的位置上。然後，可以通過設定垂直或水平位置，讓這個元素“相對於”它的起點開始移動。如果將top設成20像素，那麼框將出現在原位置頂部的下面20像素的地方。如果將left設成20像素，那麼會在元素左邊建立20像素的空間，也就是將元素向右移動。

 

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

　　/**********相對定位***************/