CSS 盒子模型 Box Model

所有html元素可以看作盒子，在css中，"box model"這一術語是用來設計和布局時使用。

css盒模型本質上是乙個盒子，封裝周圍的html元素，它包括：邊距，邊框，填充，和實際內容。

盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。

下面的說明了盒子模型(box model)：

不同部分的說明：

（1）語法：

border : border-width || border-style || border-color

（3）合併相鄰邊框：

border-collapse:collapse;

綜合寫法：

注意：padding 會撐開 帶有 width和height盒子 ！！！

（1）概述

margin屬性用於設定外邊距。 設定外邊距會在元素之間建立「空白」， 這段空白通常不能放置其他內容。

（2）外邊距實現盒子居中

可以讓乙個盒子實現水平居中，需要滿足一下兩個條件：

1、必須是塊級元素。

2、盒子必須指定了寬度（width）

然後就給左右的外邊距都設定為auto，就可使塊級元素水平居中。

.header

*

使用margin定義塊元素的垂直外邊距時，可能會出現外邊距的合併。

當上下相鄰的兩個塊元素相遇時，如果上面的元素有下外邊距margin-bottom，下面的元素有上外邊距margin-top，則他們之間的垂直間距不是margin-bottom與margin-top之和，而是兩者中的較大者。這種現象被稱為相鄰塊元素垂直外邊距的合併（也稱外邊距塌陷）。

（5）巢狀塊元素垂直外邊距的合併

對於兩個巢狀關係的塊元素，如果父元素沒有上內邊距及邊框，則父元素的上外邊距會與子元素的上外邊距發生合併，合併後的外邊距為兩者中的較大者，即使父元素的上外邊距為0，也會發生合併。

解決方案：

可以為父元素定義1畫素的上邊框或上內邊距。

可以為父元素新增overflow:hidden。
（6）content寬度和高度
使用寬度屬性width和高度屬性height可以對盒子的大小進行控制。
width和height的屬性值可以為不同單位的數值或相對于父元素的百分比%，實際工作中最常用的是畫素值。
大多數瀏覽器，如firefox、ie6及以上版本都採用了w3c規範，符合css規範的盒子模型的總寬度和總高度的計算原則是：
1、寬度屬性width和高度屬性height僅適用於塊級元素，對行內元素無效（img 標籤和 input除外）。
2、計算盒子模型的總高度時，還應考慮上下兩個盒子垂直外邊距合併的情況。
3、如果乙個盒子沒有給定寬度或者繼承父親的寬度，則padding 也會影響本盒子大小。
（7）盒子模型布局穩定性
按照優先使用寬度（width），其次使用內邊距（padding），再次外邊距（margin）。
width > padding > margin
原因：margin會有外邊距合併，還有ie6下面margin加倍的bug，所以最後使用。
padding會影響盒子大小，需要進行加減計算，其次使用。
width沒有問題，我們經常使用寬度剩餘法、高度剩餘法來做。
 
CSS盒子模型（Box Model）
所有html元素可以看作盒子，在css中，box model 這一術語是用來設計和布局時使用。css盒模型本質上是乙個盒子，封裝周圍的html元素，它包括 邊距，邊框，填充，和實際內容。盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。下面的說明了盒子模型 box model 不同部分的說明...
CSS盒子模型（Box Model）
作為css的重點，三大模組之一的盒子模型，這部分無論如何也要精通透徹。在任何乙個網頁當中，都有自己的布局方式，所謂網頁布局方式就是如何把網頁裡面的文字 很好的排版成美工設計的樣式，這時文字就如同牛奶需要用盒子裝起來，然後可以隨意的擺放它的位置。來看張圖，體會下盒子模型。其實,所有的標籤都會生成乙個矩...
CSS的盒子模型（Box Model）
盒子模型 box model 是 css 的核心，現代 web 布局設計簡單說就是一堆盒子的排列與巢狀，掌握了盒子模型與它們的擺放控制，會發現再複雜的頁面也不過如此。然而，任何美好的事物都有缺憾，盒子模型有兩種不同的詮釋，一種來自 ie6，一種來自w3c 標準瀏覽器。盒子模型 下圖就是乙個典型的盒子...