CSS中的盒模型
CSS的盒模型描述了一些長方形盒子，這些長方形盒子被用來表示文檔樹中的元素，并根據視覺格式化模型進行定位。
1. 盒子的尺寸
每個盒子都有一個content區域（比如文本、圖片等）和可選的包圍content區域的padding、borde、margin區域。這些區域的大小由下面定義的屬性決定。下圖這些區域的相互關系以及與margin、border和padding相關的術語。
margin、border和padding可以被拆分成top、right、bottom和left段，舉例來說，上圖中的"LM"就表示left margin，"RP"表示 right padding，"TB"表示top border等等。
如上四個區域（content、padding、border和margin）的周界叫做邊界（edge），所以，每個盒子都有四種邊界：
content edge 或者說 inner edge
content edge 包圍由盒子寬度和高度決定的長方形，而這個長方形區域通常取決于元素的渲染內容。四個content邊決定了盒子的content box。
padding edge
padding edge包圍盒子的padding區域。如果padding的寬度為0，則padding edge與content edge相同。四個padding邊決定了盒子的padding box。
border edge
border edge包圍盒子的border區域。如果border的寬度為0，則border edge與padding edge相同。四個border邊決定了盒子的border box。
margin edge 或者說 outer edge
margin edge包圍盒子的margin區域。如果margin的寬度為0，則margin edge與border edge相同。四個margin邊決定了盒子的margin box。
每個邊界都可以被拆分成top，right，bottom和left邊。
一個盒子的content area（content width和content height），取決于如下這些因素： 生成盒子的元素是有設置了width和height屬性，盒子是否包含文本或其他盒子，盒子是否是表格等。
content，padding，border區域的背景樣式有元素的background屬性指定，而margin區域的背景永遠是透明的。
2. margin，padding，和border的例子
這個例子展示了margin，padding和border直接如何相互影響。
這段代碼最終將會在文檔樹中產生一個UL元素和兩個LI子元素。
下面的這兩張圖中，第一張圖展示了上面的代碼最終顯示的樣式。第二張圖展示了UL元素的margin，padding，border之間的關系以及與它的子LI元素之間的關系。
說明：
- 每個LI盒子的content width由從上到下計算而來；每個LI盒子的包含塊由UL元素產生。
- 每個LI盒子的margin box的高度由盒子的content height加上上下padding，再加上上下border，再加上上下margin計算而來。注意，LI盒子之間的豎直margin合并（collapse）了。
- 每個LI盒子的right padding被通過padding屬性設置為0。這個效果在第二張圖中被很明顯的展示出來。
- LI盒子的margin是透明的，因此我們看到的是UL元素padding和content區域的背景色黃色。
- 第二個LI元素通過border-style屬性指定了虛線border。
3. 外邊距屬性： margin-top，margin-right，margin-bottom，margin-left和margin
外邊距屬性指定了一個盒子的margin區域的寬度。"margin"屬性設置四個邊的margin，而其他的外邊距屬性只指定單獨一邊。這些屬性可以應用于所有元素，但是豎直的margin對不可替代的行內元素（non-replaced inline element）沒有任何影響。
上面這些屬性的取值類型如下：
<絕對數值>
采用固定的寬度
<百分比>
根據盒子的包含塊的寬度來計算百分比。注意，這對margin-top和margin-bottom同樣適用。如果包含塊的寬度由這個元素決定，那么在CSS2.1中，結果為未定義。
auto
自動
外邊距屬性值可以為負，但是這可能有特定的實現限制。
margin-top，margin-right，margin-bottom和margin-left指定了盒子的上、右、下、左外邊距。這些屬性可以被應用于除表格顯示類型(除了table-caption，table和inline-table)以外的所有元素。margin-top和margin-bottom對不可替代的行內元素不起作用。
margin屬性是以上四個屬性的簡寫，可以同時設置這四個屬性。如果指定了一個值，那么應用于所有的邊。如果指定了兩個值，那么第一個值設置top和bottom margin，第二個值設置left和right margin。如果設置了三個值，那么第一個值設置top margin，第二個值設置left和right margin，第三個值設置bottom margin。如果設置了四個值，那么依次設置top，right，bottom和left margin。
3.1 合并margin
在CSS中，兩個或多個盒子（這些盒子可能是也可能不是兄弟盒子）的相鄰的margin會合并成一個單一的margin。外邊距合并也叫塌陷（collapse）。
相鄰的豎直margin會合并，除了：
- 根元素的盒子的margin不合并
- 如果有清除（clearance）的元素的top和bottom margin相鄰，那么這個盒子的margin會與后面跟隨緊鄰的兄弟盒子的margin合并，但是合并后的margin不會與父塊的bottom margin合并。
水平的margin從來不合并。
兩個margin相鄰，當且僅當：
- 都屬于在同一個塊格式化上下文中的正常文檔流中的塊級盒子
- 沒有行盒子（line box），沒有清除（clearance），沒有padding也沒有border分隔。（注意，某些零高度的行盒子會被會略，參見視覺格式化模型）
- 都屬于豎直相鄰的盒子的邊，也就是說：
- 一個盒子的top margin和這個盒子的第一個流內孩子盒子的top margin
- 盒子的bottom margin和這個盒子的下一個流內兄弟盒子的top margin
- 最后一個孩子盒子的bottom margin和它的父盒子的bottommargin（如果父盒子的高度是自動（auto）計算而來）
- 一個盒子的top和bottom margin，前提是這個盒子沒有建立新的塊格式化上下文，計算出來的min-height為0，height為0或auto，沒有在正常文檔流中的子元素。
如果一個合并后的margin的某個子margin與一個其他的margin是相鄰的，那么合并后的margin也認為與這個margin相鄰。
相鄰的margin可能由彼此不相鄰或彼此不互為祖先后代的元素產生。
上面這句話表明：
- 浮動盒子的margin和其他任何盒子的margin不合并，即使是浮動盒子與其流內的子盒子的margin也不合并。
- 建立新的塊格式化上下文的元素（比如浮動元素和overflow的值不是visible的元素）的margin不與他們的流內的子元素的marign合并。
- 絕對定位的盒子的margin不合并，即使與他們的流內子盒子也不合并。
- 行內塊盒子的margin不合并，即使與他們的流內子盒子也不合并。
- 一個流內塊級盒子的bottom margin總是與它的下一個緊隨著的流內塊級兄弟盒子的top margin合并，除非這個兄弟盒子有清除（clearance）。
- 流內塊級元素的top margin會與它的第一個流內塊級子元素的top margin合并，前提是這個盒子沒有top border、top padding，并且子元素沒有應用清除。
- 一個height為auto，min-height為0的流內塊級盒子的bottom margin與它的最后一個流內塊級子盒子的bottom margin合并，前提是這個盒子沒有bottom padding、bottom border并且子盒子的bottom margin沒有與其他的應用了清除的top margin合并。
- 一個盒子本身的margin會合并，前提是這個盒子的min-hieght屬性設置為0，這個盒子沒有top或bottom border，沒有top或bottom padding，它的height為0或者為auto，并且它不包含任何行盒子，所有的流內子盒子的margin也合并。
當兩個或多個margin合并是，合并后的margin的寬度為所有合并的寬度的最大值。如果有margin的值為負值，那么最后的合并margin絕對值值將是最大的正值扣除這個負值的所得。如果所有的margin為負，那么最后合并margin絕對值值將是0扣除最大的負值所得。
如果一個盒子的top和bottom margin相鄰，那么margin可能直接穿過它。在這個情況下，元素的位置就取決于它與和它有margin合并的元素的關系：
- 如果元素的margin與它的父元素的top margin合并，那么這個元素的top border與父元素的的相同。
- 否則，要么元素的父元素沒有參與margin合并，要么父元素只有bottom margin參與合并，那么這個元素的top border edge將與它有一個非0 bottom border時的top border edge一樣。
注意，被合并穿過（collapsed through）的元素的位置對與他進行margin合并的元素位置沒有任何影響，只有在給元素的子元素進行布局的時候才會參考top border edge的位置。
4. 內邊距屬性: padding-top, padding-right, padding-bottom, padding-left和padding
內邊距屬性指定了盒子的padding區域的寬度。"padding"屬性設置四個邊的padding，而其他四個屬性設置特定邊的padding。
以上屬性的取值類型如下：
<絕對數值>
采用固定的寬度
<百分比>
根據盒子的包含塊的寬度來計算百分比。注意，這對padding-top和padding-bottom同樣適用。如果包含塊的寬度由這個元素決定，那么在CSS2.1中，結果為未定義。
不像外邊距屬性，內邊距屬性的值不能為負。
padding-top，padding-right，padding-bottom，padding-left這四個屬性指定了盒子的上、右、下、左邊的padding，可以應用于除了table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column以外的所有元素。
padding是上面四個屬性的簡寫形式，如果指定了一個值，那么應用于所有的邊。如果指定了兩個值，那么第一個值設置top和bottom padding，第二個值設置left和right padding。如果設置了三個值，那么第一個值設置top padding，第二個值設置left和right padding，第三個值設置bottom padding。如果設置了四個值，那么依次設置top，right，bottom和left padding。
5. 邊框屬性
邊框屬性指定了盒子的border area的寬度、顏色和樣式。這些屬性可以應用于任何元素。
5.1 邊框寬度： border-top-width, border-right-width, border-bottom-width, border-left-width 和 border-width
邊框寬度屬性指定了border area的寬度。取值如下：
thin
細邊框
medium
中等寬度邊框
thick
粗邊框
<絕對數值>
邊框的粗細由指定的數值確定，不能為負。
前三個值的具體大小由UA決定，但是必須滿則下面這個條件：
border-top-width, border-right-width, border-bottom-width, border-left-wdith四個屬性分別指定了上、右、下、左四個邊的邊框寬度。他們可以被應用于任何元素。
border-width是上面四個屬性的簡寫形式，如果指定了一個值，那么應用于所有的邊。如果指定了兩個值，那么第一個值設置top和bottom border width，第二個值設置left和right border width。如果設置了三個值，那么第一個值設置top border width，第二個值設置left和right border width，第三個值設置bottom border width。如果設置了四個值，那么依次設置top，right，bottom和left border width。
5.2 邊框顏色： border-top-color, border-right-color, border-bottom-color, border-left-color 和 border-color
邊框顏色屬性指定了盒子邊框的顏色。
邊框顏色屬性取值為：
<顏色>
具體的顏色值
transparent
邊框透明，但是依然保持有寬度。
border-top-color, border-right-color, border-bottom-color, border-left-color指定了上、右、下、左四個邊框的顏色，可以被應用于所有元素。
border-color屬性是上面四個屬性的簡寫形式，它的取值與四個屬性的對應關系與border-width相同。
如果一個元素的邊框顏色沒有指定，那么UA可能會使用元素的color屬性指定的顏色來作為邊框的顏色。
5.3 邊框樣式： border-top-style, border-right-style, border-bottom-style, border-left-style 和 border-style
邊框樣式屬性指定了盒子邊框線條的樣式（實線、雙實線、虛線等）。屬性的取值如下:
none
沒有邊框，即邊框的寬度為0.
hidden
與none相同。
dotted
邊框是一系列的點。
dashed
邊框是虛線。
solid
邊框是實線。
double
邊框是雙實線，兩條實線加上之間的寬度等于border-width的值。
groove
邊框看起來像是嵌入到畫布中一樣（邊框凹陷效果）。
ridge
與groove的效果相反，邊框看起來像是凸起來了（邊框凸起效果）。
inset
邊框使得盒子像是嵌入到畫布中一樣（盒子凹陷效果）。
outset
與inset的效果相仿，邊框使得盒子像是凸起來了（盒子凸起效果）。
所有的邊框都繪制在盒子的背景之上，邊框的顏色取決于元素的邊框顏色屬性。
border-top-style, border-right-style, border-bottom-style, border-left-style、右、下、左四個邊框的樣式，可以被應用于所有元素。
border-style屬性是上面四個屬性的簡寫形式，它的取值與四個屬性的對應關系與border-width相同。
因為邊框樣式的初始值為none，所有如果沒有設置邊框樣式的話，盒子的邊框不可見。
5.4 簡寫的邊框屬性： border-top, border-right, border-bottom, border-left 和 border
border-top, border-right, border-bottom和border-left屬性是盒子上、右、下、左邊框寬度、樣式和顏色的簡寫形式。如：
h1 { border-bottom: thick solid red }被省略的屬性將使用它們的初始值。
H1 { border-bottom: thick solid }border屬性可以同時設置盒子的四個邊框的寬度、顏色和樣式。不像margin和padding屬性，border屬性不能給四個邊框設置不同的值。
考慮如下樣式，
blockquote {border: solid red;border-left: double;color: black; }左邊框的顏色為黑色，其他邊框的顏色為紅色。因為border-left覆蓋了border屬性對左邊框的設置，但是border-left沒有設置邊框顏色，所有使用了color屬性指定的顏色。
6. 雙向上下文中的行內元素的盒模型
對于每個行盒子，UA必須按照視覺順序（非邏輯順序）為這些行內盒子設置margin、border和padding。
當元素的direction屬性值為ltr是，元素的第一個行盒子的最左邊的行內盒子擁有left margin，left border和left padding，最后一個行盒子的最右邊的行內盒子擁有right padding， right border和right margin。
當元素的direction屬性值為rtl是，元素的第一個行盒子的最右邊的行內盒子擁有right margin，right border和right padding，最后一個行盒子的最左邊的行內盒子擁有left padding， left border和left margin。
轉載于:https://www.cnblogs.com/tangshiguang/p/6745512.html
總結
- 上一篇： SpringMVC之Http标准的头部信
- 下一篇： 嵌入式第一周学习总结