[align=center]盒子模型之元素css margin屬性[/align]
[b]1.1 概述[/b]
css margin外邊距/外補白邊距樣式屬性，設定物件四邊的外延邊距，沒有背景顏色也無顏色，即設定物件標籤之間距離間隔。
[b]1.2 margin語法[/b]
margin的值
可以為正整數和負整數+html單位；
可以為auto自動屬性(自動、自適應)；
可以為百分比（%）值。
例：div
[b]1.3單獨設定四邊間距屬性[/b]
margin-left，物件左邊外延邊距。
margin-right，物件右邊外延邊距。
margin-top，物件上邊外延邊距。
margin-bottom，物件下邊外延邊距。
[b]1.4 css margin縮寫簡寫[/b]
margin屬性css樣式，如遇到上下、左右、上下左右等情況可以優化。
1、只有上下情況縮寫
原始：margin-top:5px; margin-bottom:6px
縮寫簡寫為：margin:5px 0 6px 0或margin:5px auto 6px auto
2、只有左右情況縮寫
原始：margin-left:5px; margin-right:6px
縮寫簡寫為：margin:0 6px 0 5px或margin:auto 6px auto 5px
3、只有三邊情況縮寫
原始：margin-top:5px; margin-bottom:6px; margin-left:4px
縮寫：margin:5px 0 6px 4px或margin:5px auto 6px 4px
4、四邊相同值縮寫
原始：margin-top:5px; margin-bottom:5px; margin-left:5px; margin-right:5px
縮寫：margin:5px;
5、四邊不同值縮寫
原始：margin-top:5px; margin-bottom:6px; margin-left:7px; margin-right:8px
縮寫：margin:5px 8px 6px 7px;（上、右、下、左）
6、四邊其中上下值和左右值各相同縮寫
原始：margin-top:5px; margin-bottom:5px; margin-left:7px; margin-right:7px
縮寫：margin:5px 7px;
[b]1.5設定div盒子之間間距[/b]
1、設定物件的上下間距。
.div-a
2、設定物件左右距離。
.div-b
3、設定div盒子與上方相鄰間距。
.div-c
4、設定div盒子與下方相鄰距離。
.div-d
5、設定div盒子與左方相鄰間距。
.div-e
6、設定盒子與右方相鄰距離。
.div-f[/color]
[b]1.6 margin的疊加[/b]
兩個或更多個垂直邊距相遇時，它們將形成乙個外邊距。這個外邊距的高度等於兩個發生疊加的外邊距的高度中的較大者。
一般來說， 垂直外邊距疊加有三種情況：
元素自身疊加。當元素沒有內容（即空元素）、內邊距、邊框時，它的上下邊距就相遇了， 即會產生疊加（垂直方向）。 當為元素新增內容、 內邊距、 邊框任何一項， 就會取消疊加。
相鄰元素疊加。相鄰的兩個元素， 如果它們的上下邊距相遇，即會產生疊加。
包含（父子）元素疊加。包含元素的外邊距隔著父元素的內邊距和邊框，當這兩項都不存在的時候，父子元素垂直外邊距相鄰，產生疊加。新增任何一項即會取消疊加。
[color=red]注意：只有普通文件流中塊框的垂直外邊距才會發生外邊距疊加。行內框、浮動框或絕對定位框之間的外邊距不會疊加。[/color]
盒子模型（元素居中）
一 盒子垂直水平居中 1 定位 盒子寬高已知，position absolute left 50 top 50 margin left 自身一半寬度 margin top 自身一半高度 2 table cell布局 父級 display table cell vertical align middl...
盒子模型之元素寬高屬性
align center 盒子模型之元素寬高屬性 align b 1.1概述 b 每個元素都有乙個繼承的height和width屬性。根據元素的不同目的，可以修改元素的height和width值以覆蓋其預設值。乙個元素預設的height屬性由其內容決定。在垂直方向上所有元素都會盡可能的伸縮來適應內容...
盒子模型與怪異盒子模型
所有html元素可以看作盒子，在css中，box model 這一術語是用來設計和布局時使用。css盒模型本質上是乙個盒子，封裝周圍的html元素，它包括 邊距，邊框，填充，和實際內容。盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。下面的說明了盒子模型 box model content...