正常流中塊級元素框中的水平部分總和就等於父元素的width。
水平屬性
水平格式化的七大屬性：
margin-left+ border-left+ padding-left +width+ padding-right+ border-right margin-right =元素框的寬度=父元素的width值
margin，width——可設定為auto
padding，border——必須設定為特定的值,不設定則預設為0
使用auto
其中乙個取auto——如果設定margin，width中某個值為auto，那麼設定為auto的屬性會確定所需的長度，從而使元素框寬度等於父元素的width。
都為特定值——如果margin和width均指定為特定值，則這些格式化屬於過分受限，此時總會把margin-left強制為auto。
不止乙個auto
兩個取auto，width和乙個margin為auto,另乙個margin取特定值——設定為auto的margin取0
兩個取auto，兩個margin取auto,width取特定值——居中
三個均取auto——margin取0,width設定所需值，使得元素完全填充包含塊。
負外邊距
七個屬性中，只有外邊距可取負值，但要記住七個屬性的總和要等於父元素的width。
在width取為auto時，通過指定乙個負外邊距可以得到乙個更寬的子元素。
當三個屬性均取特定值，且其總和超過父元素width，由於水平屬性過分受限時由乙個規則，要求重置右外邊距，也會得到乙個負右外邊距。
百分數
替換元素
非替換元素的所有規則同樣適用於替換元素，只有乙個例外：如果width取值為auto，元素的寬度則為內容的固有寬度。
如果乙個替換元素的width屬性不同於其固有寬度，那麼height值也會成比例變化，除非height自己也顯示的設定為乙個特定的值。反之亦然。
乙個元素的預設高度由其內容決定
垂直屬性
水平格式化的七大屬性：
margin-top+ border-top+ padding-top +height+ padding-bottom+ border-bottom+ margin-bottom =元素框的高度=父元素的height值
margin，width——可設定為auto
padding，border——必須設定為特定的值,不設定則預設為0
不同於水平格式化，如果正常流中乙個塊元素的margin-top或margin-bottom設定為auto，他會自定計算為0（也就是說，不能很容易的將正常流元素在其包含塊中垂直居中）
百分數高度
如果乙個塊級正常流元素的height值設定為乙個百分數，這個值則是包含塊height的乙個百分數。
如果沒有顯示宣告包含快的height，百分數高度會重置auto
auto高度
如果塊級正常流元素設定為height:auto，顯示時其高度將恰好足以包含其內聯內容的行盒。
如果塊級正常流元素設定為height:auto，而且只有塊級子元素，其高度將是不包含子元素margin值的高度。
如果塊級元素有border或padding，則其高度為包含子元素margin值的高度。（垂直外邊距的合併）
合併垂直外邊距
垂直相鄰外邊距會發生合併，並且這種合併行為值應用於外邊距。如果元素有內邊距或邊框，它們絕對不會合併。
垂直相鄰外邊距都大於等於0，外邊距會取較大的乙個
垂直相鄰外邊距都為負數，取絕對值大的那個。
一正一負，則取正數減負數的絕對值的絕對值。
css變成塊級元素 CSS 塊級元素
完整的框模型 box model 不同的寬度 高度 內邊距和外邊距相結合，就可以確定文件的布局。大多數情況下，文件的高度和寬度由瀏覽器基於可用的顯示區域和其他一些因素自動確定。1 元素框的最內部分是實際的內容。2 直接包圍內容的是內邊距。內邊距呈現了元素的背景。內邊距的邊緣是邊框。3 邊框以外是外邊...
CSS塊級元素 內聯元素
在css盒子模型中，我們提到了html元素中的塊元素 block element 和內聯元素 inline element 那麼它們究竟是什麼呢？其實，這兩種元素都是html規範中的概念。塊元素 block element 一般是其他元素的容器元素，能容納其他塊元素或內聯元素。最常見的就是p和div...
CSS塊級元素 內聯元素
在css盒子模型中，我們提到了html元素中的塊元素 block element 和內聯元素 inline element 那麼它們究竟是什麼呢？其實，這兩種元素都是html規範中的概念。塊元素 block element 一般是其他元素的容器元素，能容納其他塊元素或內聯元素。最常見的就是p和div...