**001
**
**margin****百分比：****1.****普通元素相對父級容器的寬度計算。****2.****絕對定位元素相對于鄰近的被定位的父級元素寬度計算。****
**
**002
**
**margin****重疊通常特性****:****
1.block****水平元素****(****不包括****float****和****absolute****元素****)****
2.****不考慮****writing-mode,****只發生在垂直方向上****.****
margin****重疊****3****中情景****:****
1.****相鄰的兄弟元素****
2.****父級和第一個****/****最后一個子元素****
**
**
3.****空的****block****元素****
**
**
[圖片上傳中。。。（1）]
**
**003
**
**
**
可以利用margin屬性的負值來設置(margin**屬性會改變自適應寬度元素的寬度)
**
**
**
**004
**
Margin無效
**
**
**
1inline水平元素的垂直margin無效,以及無效的兩個前提,如圖**
2.margin****重疊****
**
3.然而,替換元素即便display設為table相關的,他們的margin值依然有效.button元素在不同瀏覽器的渲染行為** 還不一樣
**
在火狐中按照inline-block渲染
4.****絕對定位非定位方位的****margin****值****"****無效****".****
4.****絕對定位的****margin****一直有效只是不像普通元素一樣****,****可以影響兄弟元素****.****
4.****總結****:****如果絕對定位元素設置了left,沒有設置right.則設置margin-left父元素大小不變,子元素有margin.設置margin-right子元素沒有margin,但是父元素的大小改變**
**
5.如圖,div的margin-left并不是相對img的右邊緣,因為float元素不再文檔流中.當margin-left大于200px時,margin值就會有效**
**
在前一個元素浮動的時候,后一個元素的margin-left相對于父元素,而不是相對于浮動元素,就當左浮動元素不存在.
**
6.內聯特性導致的margin無效,img元素是內聯元素,它既要保持和行內元素比如X的基線對齊,又要接受行內元素無法跨出父元素邊框這個事實**.
**
**005
**
****margin-start****的作用****,****如圖****,****有三點****.margin-end****正好和****margin-start****行為相反****
****第2點中,改變水平流的方向的css描述是derection:rtl;
****第3點中,改變垂直流的方向的css描述是**writing-mode:vertical-lr;
**
**margin-before ****默認流向的情況下，等同于****margin-top****
margin-after 默認流向的情況下，等同于margin-bottom
**
****非常好的特性,margin-collapse,可以取消margin重疊.可惜只有webkit支持**
**
**
[圖片上傳中。。。（2）]
**
wc:????
