1實線 可視尺寸 clientWidth（標準）
2虛線 佔據尺寸 outerWidth（jquery）
margin 影響可視尺寸
條件
1、適用於沒有設定width/height的普通block水平元素
float元素absolute/fixed元素 inline元素 table-cell元素排除
2、只適用於水平方向
案例
一側定寬的自適應佈局
百分比margin的計算規則
普通元素的百分比margin都是相對於容器的寬度計算
絕對定位元素的百分比margin相對於第一個定位祖先元素的寬度計算的。
案例
自適應矩形
margin 重疊通常特性
父子 margin重疊的條件
一、margin-top
1父元素非塊狀格式化上下文元素
2父元素沒有border-top
3父元素沒有padding-top
4父元素與第一個子元素之間沒有inline元素分隔
二、margin-bottom
1父元素非塊狀格式化上下文元素
2父元素沒有border-bottom
3父元素沒有padding-bottom
4父元素與最後一個子元素之間沒有inline元素分隔
5父元素沒有height ，min-height，max-height限制
空block元素髮生margin重疊的條件
1元素沒有border設置
2元沒有padding設置
3裏面沒有inline元素設置
4沒有height ，min-height
margin-auto
如果一側定值一側爲auto ，auto爲剩餘空間的大小，如果兩側均爲auto 則平分剩餘空間
爲什麼給圖片設置margin：0 auto 不水平居中
因爲圖片是inline-block元素 ，不會填充 剩餘空間
解決 加display：block
writling-mode垂直居中
writling-mode:vertical-lr 更改流爲垂直方向。
margin無效情況
1內聯元素垂直方向margin無效
2margin重疊
3display: table-cell/display:table-row無效
在谷歌瀏覽器下botton永遠是是inline-block元素