css 框模型要點

框模型的概述
這裏寫圖片描述
注意:外邊距可以是負值,而且在很多情況下都要使用負值的外邊距。
瀏覽器的兼容性
一旦頁面設計了合適的DTD(文檔類型定義:是一套爲了進行程序間的數據交換而建立的關於標記符的語法規則)
問題
IE 5 和 6 的呈現卻是不正確的。根據 W3C 的規範,元素內容佔據的空間是由 width 屬性設置的,而內容周圍的 padding 和 border 值是另外計算的。不幸的是,IE5.X 和 6 在怪異模式中使用自己的非標準模型。這些瀏覽器的 width 屬性不是內容的寬度,而是內容、內邊距和邊框的寬度的總和。
解決方案
迴避這個問題。也就是,不要給元素添加具有指定寬度的內邊距,而是嘗試將內邊距或外邊距添加到元素的父元素和子元素。

padding

1.語法

padding:10px 2em 0.25ex 10%//上右下左

2.內邊距的百分比
百分數值是相對於其父元素的 width 計算的
border
1.邊框繪製於背景之上
border-style邊框樣式

p{border-style:solid solid solid none;}

border-width

border-width:thin,thick

**注意**border-style的默認值:none
透明邊框

border-color:transparent;

注意:在 IE7 之前,IE/WIN 沒有提供對 transparent 的支持。在以前的版本,IE 會根據元素的 color 值來設置邊框顏色。

margin外邊框
1.語法

margin(auto auto auto 1px);//value copy

問題:Netscape 和 IE 對 body 標籤定義的默認邊距(margin)值是 8px。而 Opera 不是這樣。相反地,Opera 將內部填充(padding)的默認值定義爲 8px,因此如果希望對整個網站的邊緣部分進行調整,並將之正確顯示於 Opera 中,那麼必須對 body 的 padding 進行自定義。
解決方案

*{
    padding:0;
    margin:0;}
htmlbody{
    margin:0;
    padding:0;
}

外邊距合併

定義:外邊距合併指的是,當兩個垂直外邊距相遇時,它們將形成一個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。

當一個元素出現在另一個元素上面時,第一個元素的下外邊距與第二個元素的上外邊距會發生合併。請看下圖:
這裏寫圖片描述

當一個元素包含在另一個元素中時(假設沒有內邊距或邊框把外邊距分隔開),它們的上和/或下外邊距也會發生合併。請看下圖:
這裏寫圖片描述
假設有一個空元素,它有外邊距,但是沒有邊框或填充。在這種情況下,上外邊距與下外邊距就碰到了一起,它們會發生合併:
這裏寫圖片描述
如果這個外邊距遇到另一個元素的外邊距,它還會發生合併:
這裏寫圖片描述
這就是一系列的段落元素佔用空間非常小的原因,因爲它們的所有外邊距都合併到一起,形成了一個小的外邊距。

外邊距合併初看上去可能有點奇怪,但是實際上,它是有意義的。以由幾個段落組成的典型文本頁面爲例。第一個段落上面的空間等於段落的上外邊距。如果沒有外邊距合併,後續所有段落之間的外邊距都將是相鄰上外邊距和下外邊距的和。這意味着段落之間的空間是頁面頂部的兩倍。如果發生外邊距合併,段落之間的上外邊距和下外邊距就合併在一起,這樣各處的距離就一致了。
這裏寫圖片描述

注意:註釋:只有普通文檔流中塊框的垂直外邊距纔會發生外邊距合併。行內框、浮動框或絕對定位之間的外邊距不會合並。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章