完整的框模型(box model)
不同的寬度、高度、內邊距和外邊距相結合，就可以確定文件的布局。
大多數情況下，文件的高度和寬度由瀏覽器基於可用的顯示區域和其他一些因素自動確定。
1、元素框的最內部分是實際的內容。
2、直接包圍內容的是內邊距。內邊距呈現了元素的背景。內邊距的邊緣是邊框。
3、邊框以外是外邊距，外邊距預設是透明的，因此不會遮擋其後的任何元素。
水平格式化
1、width影響的是內容區的寬度，不是整個可見的元素框。
2、規則：正常流中塊級元素框的水平部分總和 == 父元素的width。
水平屬性
1、7大屬性： margin-left、border-left、padding-left、width、padding-right、border-right和margin-right。
2、只有width、以及左、右外邊距這3個屬性可以設定為auto。
使用auto
0個auto(3個屬性都設定為非auto的某個值)
會把margin-right強制為auto。
//假設7個屬性的和必須等於400px，那麼右外邊距的寬度將是200。
p p
負外邊距
divp
p.wide
父元素400px，但子元素有430px！
數學計算並沒有算錯：20px + 0 + 0 + 430px + 0 + 0 - 50px = 400px
注意：內邊距、邊框和內容寬高絕對不能為負，只有外邊距能小於0。
替換元素
非替換塊元素的所有規則同樣適用於替換元素，只有乙個例外：如果width為auto，元素的寬度則是內容的固有寬度。
垂直格式化
乙個元素的預設高度由其內容決定。
高度還會受到內容寬度的影響。
段落越窄，相應的就會越高，以便容納其中所有的內聯內容。
垂直屬性
1、(對應於水平格式化)7大屬性： margin-top,border-top,padding-top,height,padding-bottom,border-bottom,margin-bottom。
2、只有height、以及上、下外邊距這3個屬性可以設定為auto。
3、其他四個必須設為特定的值或缺省為0。
4、如果設定了border-style，邊框的寬度會設定為medium。
使用auto
如果正常流中乙個塊元素的margin-top或margin-bottom設定為auto，它會自動計算為0。
height必須設定為auto或者某種型別的非負值。
height為auto
①如果塊級正常流元素設定為height：auto，顯示時其高度恰好足以包含其內聯內容(包括文字)的行盒。會在段落上設定乙個邊框，並認為沒有內邊距，這樣下邊框剛好在文字最後一行的下面，上邊框剛好在文字第一行的上面。
②如果塊級正常流元素的高度設定為auto，而且只有塊級子元素，其預設高度將是從最高塊級子元素的外邊距邊界到最低塊級子元素外邊框邊界之間的距離。因此，子元素的外邊距會「超出」包含這些子元素的元素。
③如果塊級元素有上內邊距或下內邊距，或者有上邊框或下邊框，其高度則是從其最高子元素的上外邊距邊界到其最低子元素的下外邊距邊界之間的距離。
a paragraph.
another paragraph.
合併垂直外邊距
外邊距合併指的是，當兩個垂直外邊距相遇時，它們將形成乙個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。
可以看到每個列表項有10畫素的上外邊距和20畫素的下外邊距。但是上顯示的相鄰列表項之間的距離是20畫素，而不是30畫素。即會發生相鄰外邊距沿著豎軸合併。
外邊距甚至可以與自身發生合併。
假設有乙個空元素，它有外邊距，但是沒有邊框或填充。在這種情況下，上外邊距與下外邊距就碰到了一起，它們會發生合併：
如果這個外邊距遇到另乙個元素的外邊距，它還會發生合併：
負外邊距
如果垂直外邊距都設定為負值，瀏覽器會取兩個外邊距絕對值的最大值。
可以看到，列表項覆蓋超過一半，是取的-0.75em。
如果乙個正外邊距與乙個負外邊距合併，會從正外邊距減去這個負外邊距的絕對值。
可以看到，列表項合併後覆蓋了1-0.75 = 0.25em。
css變成塊級元素 css布局和居中的簡單實現
一列式布局是最基本的布局方式，通過直接建立乙個div就可以實現。圖中有兩種一列式的樣式，分別是寬度自適應螢幕 這是預設的塊級元素的屬性 另外一種是依據文件內容來填充寬度 通過設定float屬性來實現 二列式，即左右布局。實現方式可以通過設定box1 float box2 可以使用float，也可以直...
CSS塊級元素 內聯元素
在css盒子模型中，我們提到了html元素中的塊元素 block element 和內聯元素 inline element 那麼它們究竟是什麼呢？其實，這兩種元素都是html規範中的概念。塊元素 block element 一般是其他元素的容器元素，能容納其他塊元素或內聯元素。最常見的就是p和div...
CSS塊級元素 內聯元素
在css盒子模型中，我們提到了html元素中的塊元素 block element 和內聯元素 inline element 那麼它們究竟是什麼呢？其實，這兩種元素都是html規範中的概念。塊元素 block element 一般是其他元素的容器元素，能容納其他塊元素或內聯元素。最常見的就是p和div...