網站CSS盒模型

作者：佚名   時間：2014-03-18   分享到：

css模型假設HTML和XHTML元素總能裝在一個矩形框內，使用定義的屬性，可以控制包含文檔中的元素的框的大小、外觀和位置。
CSS格式化模型
    文檔的每個元素都可以裝在一個矩形框內，CSS制定者將這個框稱為“核心內容區”，并且用另外三個框來包圍它：補白、邊框和邊界。下圖顯示了這些框，還定義了一些有用的術語。

圖：CSS2格式化模型和術語

上、下、左外和右外邊緣界定了一個元素的內容區和其所有補白、邊框和邊界區域。內上、內下、左內和右內邊緣定義了核心內容區的范圍。圍繞元素的額外空間是內外邊緣之間的區域，包括補白、邊框和邊界。瀏覽器可能省略每個元素中任何或所有這些額外空間，而且對很多瀏覽器來說，內外邊緣也是可以被省略的。

當元素垂直相鄰的時候，上面元素的下邊界和下面元素的上邊界是重疊的，因此這些元素之間的總間隔是相鄰邊界中較大的部分。例如，如果一個段落的下邊界是1英寸，而下一個段落的上邊界是0.5英寸，兩個邊界中較大的那個1英寸就將是兩個段落之間的邊界區域。這種應用稱為邊界重疊（margin collapsing），這通常能得到較好的文檔顯示效果。  

水平相鄰元素沒有重疊的邊界。CSS2標準把相鄰水平邊界加在一起。例如，如果一個段落的左邊界是1英寸，與之相鄰的一幅畫的右邊界是0.5英寸，那么兩者之間總的間隔是1.5英寸。這個規則也適用于嵌套元素，因此一個部分中一個段落的左邊界與這個部分的左邊界和這個段落的左邊界之和相等。

如圖所示，元素的總寬度等于7項之和:左右邊界、左右邊框、左右補白和元素內容本身。這7項之和必須等于元素的寬度。在這7項中，只3項（元素寬度和它的左右邊界）可以設定為auto值，表示瀏覽器可以為那個屬性確定一個值。當確實需要時，瀏覽器將遵循以下規則：  

1.如果這些屬性沒有設為auto，而且總寬度小于父元素寬度，那么margin-right屬性將被設置為auto值，它可以變得足夠大，以使總寬度等于父元素的寬度。  

2.如果恰好有一個屬性被設置為auto，那個屬性將變得足夠大，以使總寬度等于父元素的寬度。  

3.如果width、margin-left和margin-right都被設置為auto，css2兼容瀏覽器將把margin-left和margin-right設置為0，而設置得width足夠大，以使總寬度等于父元素的寬度。  

4.如果左右邊界都設置為auto,它們總是會被設置為相同的值，以使這個元素在其父元素中是居中的。  

對浮動元素則有一些特殊規則。浮動元素（如指定為align=left的圖像）的邊界不會與包含元素的邊界重疊，除非浮動元素有負值邊界。  

瀏覽器會盡可能地把圖像及其邊界向段落的左上方移動，但并不與段落或文檔正文的左邊界或上邊界重疊。段落和正文的左邊界加在一起，而它們的上邊界重疊了。