利用DIV+CSS建網站時精準定位網站塊元素的位置
作者：佚名 時間：2014-03-19 分享到：
在網站初期建站布局時，會牽扯到一系列的元素位置定位問題，我們可以用下列屬性來控制網站塊元素的位置。
網站CSS的margin屬性
和邊框屬性一樣，不同的邊界（margin）屬性允許控制元素四周的空白區，也就是它的邊框以外的部分。邊界總是透明的，允許背景顏色或背景圖像透過它顯示出來。因此，可以只指定邊界的大小:它沒有顏色或顯示樣式。
margin-left、margin-right、margin-top和margin-bottom屬性都按受長度或百分比值，指定元素周圍保留多少空白。此外，關鍵字auto告訴能夠識別樣式的瀏覽器，要恢復到正常情況下元素周圍的邊界。百發比值是相對于元素寬度計算出來的。如果沒有指定，默認邊界是0。
以下都是有效的邊界設定：
body{margin-left:lin; margin-top:0.5in; margin-right:lin}
p {margin-left: -0.5cm}
img{margin-left:10%}
第一個示例在整個文檔的左右各創建了1英寸的邊界，在文檔上部創建了半英寸的邊界。第二個示例把<p>標簽向左邊界左移了半厘米。最后的標例在<img>標簽左側創建了父元素寬度10%的邊界。
如同縮略border屬性一樣，可以使用縮略邊輪界屬性來定義所有四個邊界，用1到4個值按表8-1描述的順序來設定四個邊界的屬性。使用這個標記，前面一個示例的<body>邊界可以被指定如下：
網站CSS的padding屬性body{margin：0.5in lin}
margin-left和margin-right屬性與width屬性相互作用來決定元素的總寬度。
與邊界屬性一樣，不同的補白(padding)屬性允許控制元素周圍補白區域，也就是元素內容區和邊框之間的區域。
補白總是用背景色或背景圖像來實現的。因此，可以只指路定補白的大小； 它沒有顏色或顯示樣式屬性。
padding-left、padding-right、padding-top和padding-bottom屬性都接受長度或百分比值，指定能識別樣式的瀏覽器應該在元素周圍保留的空間。百分比值是根據元素寬度來計算的。默認補白是0。
以下是有效的補白設置:
p{padding-left:0.5cm}
img{padding-left:10%}
第一個示例在<p>標簽內容及其左邊框之間創建0.5厘米的補白，后一個示例在<img>標簽左側創建了一個等于父元素寬度10%的補白。
像縮略margin和border屬性一樣，可以使用縮略padding屬性來定義所有四個補白量，用1~4個值按表描述的順序來指定補白屬性。
ovreflow屬性ovreflow屬性告訴瀏覽器該如何處理溢出元素顯示區域的內容。此屬性的默認值是visible，它告訴瀏覽器要顯示所有內容，即使內容超出了元素顯示區域也要使其可見。
出于比較謹慎的考慮，你總是想要瀏覽器顯示文檔中的所有內容。但是在很少的情況下，元素可能會重疊在一起，這樣的顯示效果非常糟糕。為了避免這種麻煩，可以將ovreflow屬性設置為hidden、scroll或者auto。
hedden值強迫瀏覽器隱藏所有雪中出分配空間的內容，使其對用戶來說不可見。值scroll會為元素創建滾動條，瀏覽者用它就可以看到隱藏的內容。但是，即使內容沒有超出顯示范圍，也會添加滾動條。
如果添加固定的滾動條，當動態文檔中元素內容的大小發生變化時，可以確保滾動條不會變來變去。這樣做的缺陷是滾動條會造成某種干擾，并轉移人們的注意力。對ovreflow屬性運用auto值就可以避免所有這些情況。當設置為auto時，滾動條僅會在需要的時候才出現。如果元素內容改變時沒有出現剪切現象時，會從該元素中去除滾動條。
position屬性如果沒有受到什么干擾，瀏覽器會把元素顯示在一起，并在顯示屏上按順序為它們定位。將CSS2的position屬性與top、bottom、left和right屬性結合起來使用，就可以改變這種行為。
如果position屬性設置為static,會應用常規的HTMl/XHTML布局和定位規則，并由瀏覽器決定元素的框的左邊緣和上邊緣。要使元素相對于其包含的流移動。可以將position屬性設置為relative。在這種情況下，top、bottom、left和right屬性都用來計算框相對于其在流中正常位置所處的位置。隨后的元素都不會受到這種位置改變的影響，而且放在流中的方式就仿佛沒有移動過元素一樣。
將position屬性設置為absolute,這樣可以從包含文本流中去除元還給，而且隨后的元素可以相應地向前移動。然后使用top、bottom、left和right屬性，相對于包含塊計算出元素的位置。這種定位允許將元素放在關于其元素的固定位置，查會隨著包含元素的移動而移動。
最后，將position屬性設置為fixed，這樣會把元素相對于其顯示的頁面或窗口進行定位。像absolute定位一樣，從包含流中去除元素時，其他的元素也會相應發生移動。top、bottom、left和right屬性都用來設置元素相對于包含窗口或頁面所處的位置。請注意，對于持續進行的媒體而言（像滾動的瀏覽器顯示），元素只在所需的位置上顯示一次。對于打印媒體來說，元素打印在每個頁面指定的位置上。可以使用fixed定義將標題和角注放在瀏覽器窗口的上部和底部，或者放在每個打印好的頁面的上邊和下邊。
top、bottom、left和right屬笥都接受長度或百分比值。當position屬性設置為relative時，百分份是以元素框的大小為根據的。當position設置為absolut或fixed時，百分比是以元素框的大小為根據的。當position設置為absolut或fixed時，百分比則以包含元素的框的大小為依據。在使用長度值時，它們指定了從元素的包含框對應的邊緣開始的偏移量。例如，要定位一個其底部在瀏覽器窗口（或者打印的頁面）底部上方1厘米處的元還給，會把position屬性設置為fixed，并將bottom屬性設置為1cm。
