CSS-基本視覺格式化

標籤：

塊元素

基本框

　　css假定每個元素都會產生一個或多個矩形框，這稱為元素匡。各元素框中心有一個內容區，周圍有可選的內邊距，邊框，外邊距。內容的背景也會應用到內邊距，外邊距通常是透明的，從中可以看到父元素的背景，內邊距不能是負值，外邊距可以。

　　邊框如果沒有設定顏色，那麼將取前景色彩，寬度絕對不能為負

包含塊

　　每個元素都相對於包含塊擺放，包含塊由最近的塊級祖先框、表儲存格或行內塊祖先框的內容邊界構成。

水平格式化

　　水平格式化的7大屬性：margin-left,border-left,padding-left,width,padding-right,border-right,margin-right.這7個屬性的值加在一起必須是元素包含塊的寬度，這往往是塊元素的父元素width。在這7個屬性中，只有width、以及左右外邊距這3個屬性可以設定為auto。

　　1、如果設定width，margin-left或margin-right中的某個值為auto，而餘下兩個屬性指定為特定的值，那麼設定為auto的屬性會確定所需要的長度，從而使元素框的寬度等於父元素的width。加入7個屬性的和必須等於400px，沒有設定內邊距和邊框，右外邊距和width設定為100,左外邊距設定為auto。那麼左外邊距的寬度將是200；

　　2、如果這3個屬性都設定為非auto的某個值，此時總會把margin-right強製為auto，如果width和外邊距都是100px，使用者代理程式將把右外邊距重設為auto，右外邊距的實際寬度則會根據auto值來設定。

　　3、如果兩個外邊距設定為auto，它們會設定為相等的長度；如果width和一個外邊距為auto，設定為auto的外邊距會減為0；width會設定為所需的值。

　　4、如果都為auto，則外邊距都為0，width會儘可能寬

邊框不能是百分比。

替換元素

　　非替換元素的所有規則同樣適用於替換元素，只有一個例外，如果width為auto，元素的寬度則是內容的固有寬度。

垂直格式化

　　在css中，可以對任何區塊層級元素設定顯示高度。

　　如果高度小於顯示內容所需的高度，瀏覽器會向元素增加一個捲軸。

垂直屬性

　　垂直格式化也有7個相關的屬性，margin-top、border-top、padding-top、height、padding-bottom、border-bottom、margin-bottom。

　　這7個屬性只有3個可以設定為auto，元素內容的height以及上下外邊距。上下內邊距和邊框都必須設定為特定的值。

　　如果一個塊元素的上下外邊距都是auto，它會自動計算為0.

行內元素

CSS-基本視覺格式化