css中的格式化編排

垂直方向上的格式化編排比較簡單，影響垂直方向上的格式化編排主要有高度和上下邊界值

高度分兩種情況

1 元素的高度比元素的內容大，這種情況下，多餘的高度會空出來，就好像補白(padding)一樣。

2 元素的的高度比元素的內容小，這種情況下，ie會自動擴充元素框的高度來容納超出的內容，而火狐中，多餘的內容會溢位。

上下邊界值有乙個被設定成auto，那麼它們會被重置為0。

水平方向上的格式編排比較複雜，它涉及到7屬性:margin-left border-left padding-left width pading-right border-right margin-right。這7個屬性加起來的總和等於父元素的width。

這7個屬性中，只有三個屬效能被設定為auto，它們是margin-left width margin-right，其他的都不能設定為auto，而其他的必須設定為特定的值，否則，預設情況下為0。被設定成auto的值會根據情況自動分配，以使得這7個屬性值加起來等於父元素寬度。

下面我們來看這三個屬性使用auto的4種情況，使用的例子是，乙個div(背景色為green)，寬度為400px，div裡面有乙個段落(背景色為orange)，沒有padding和border:

1 三個屬性均不設定auto

第一種情況是，這三個值加起來比div的寬度小，p ,那麼margin-right被重置為auto,如下:

此時margin-right的值為200px。

第二種情況是，這三個值加起來要比div寬度大， p,margin-right也被重置為auto,如下:

此時margin-right的值為100px。

2 三個屬性中有乙個被設定為auto

2.1 若width被設定成auto， p :

width此時的值為200px。

2.2 若margin-left被設定為auto， p :

此時margin-left為100px。

2.3 若margin-right被設定為auto，p :

margin-right為100px。

3 若三個值中有兩個值是auto

3.1 margin-left和margin-right是auto p :

火狐裡面:

margin-left和margin-right為150px，即元素位於div**，這也是塊級元素居中的方式。

3.2 margin-left和width為auto，p :

被設定成auto的邊界被當成0處理。

3.3 margin-right和width為auto， p :

情況與3.2相同。

4 若三個值都設定為auto，那麼兩邊界值被置為0 p :

此時width的寬度最大，為400px。

上面的情況中測試的時候html頁面加入了dtd檔案

doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" ""
>

如果沒有可能不一樣。