**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:����
