margin 学习笔记

margin 百分比

普通元素的百分比指margin相对于容器的宽度计算

绝对定位元素百分比margin值相对于第一个定位祖先元素（rleative/absolute/fixed）计算

1 2	img{margin:10%} .absoulte-img{margin:10%;postion:absolute}

eg.自适应的矩形

margin 重叠，overflow阻止margin重叠

1 2	.box{background-color: olive;overflow: hidden;} .box > div{margin: 50%;}

1
2
3

<div class="box">
<div></div>
</div>

margin重叠

1.block水平元素（不包含 float absolute）
2.只发生在垂直方向（writing-model 可以修改重叠的方向）margin-bottom margin-top

条件：
1 相邻兄弟
2 父集和第一个或最后一个元素
3.空的block元素（自己和自己重叠）

eg.父集和第一个或最后一个元素

1
2
3

.father{
background: #f0f093;
}


<div class="father">
<div class="son" style="margin-top: 80px;"></div>
</div>
<div class="father" style="margin-top: 80px;">
<div class="son" ></div>
</div>
<div class="father" style="margin-top: 80px;">
<div class="son" style="margin-top: 80px;"></div>
</div>

margin-top 重叠

父元素非块状格式化上下文元素（格式化上下文元素：bfc元素）??
父元素没有border-top设置
父元素没有padding-top设置
父元素和第一个元素没有inline元素分隔 (inline元素:文字、图片等)

margin-bottom 重叠

父元素非块状格式化上下文元素（格式化上下文元素：）
父元素没有border-bottom 设置
父元素没有padding-bottom 设置
父元素和最后一个元素没有inline元素分隔
父元素没有设置height min-height max-height

eg.解决margin-top重叠

1
2
3

.father{
background: #f0f093;
}

<div class="father" style="overflow: hidden">
    <div class="son" style="margin-top: 80px;"></div>
</div>
<div class="father" style="border: 1px red;">
    <div class="son" style="margin-top: 80px;"></div>
</div>
<div class="father" style="padding : 1px;">
    <div class="son" style="margin-top: 80px;"></div>
</div>
<div class="father"> &nbps;
<div class="son" style="margin-top: 80px;"></div>
</div>

<div class="father" style="overflow: hidden">
    <div class="son" style="margin-bottom: 80px;"></div>
</div>
<div class="father" style="border: 1px red;">
    <div class="son" style="margin-bottom: 80px;"></div>
</div>
<div class="father" style="padding : 1px;">
    <div class="son" style="margin-bottom: 80px;"></div>
</div>
<div class="father" >
<div class="son" style="margin-bottom: 80px;"></div> &nbps;
</div>
<div class="father" style="height: 100px;">
<div class="son" style="margin-bottom: 80px;"></div>
</div>

空的block元素（自己和自己重叠）条件
元素没有设置 border 值
元素没有设置 padding 值
元素内没有 inline 元素
元素没有设置 height min-height [max-height??] 值

margin 计算规则

1 正正取大值
2 正负值取相加值
3 负负值取最负值

/*最后一个元素移除或位置调换，不会破坏原来布局*/
.list{
margin-top: 15px;
margin-bottom: 15px;
}

margin auto

margin auto 自动填充的特性，block 的默认为width:100%;如果设置width:500px;剩余空间的500px就是被margin:auto自动填充的

.parent{
	width:1000px;
}
.child{
	width:500px;
}

<div class="parent">
	<div class="child"></div>
</div>
```		
auto 的计算方法 
- margin-left/margin-right 一侧为定值 auto = (parent.width-child.width-margin[left,right])
- margin-left,margin-right auto  auto = (parent.width-child.width)/2
margin : auto 垂直布局中的原因，height不自动填充容器，所以无法分配
垂直居中
writing-mode:vertical-lr 更改流为垂直方向，实现垂直居中
<iframe width="100%" height="500" src="https://jsfiddle.net/yangjl/3f8Lqnz9/embedded/html,css,result/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
#### margin 负值
eg1. 两端对齐
eg2.等高布局
eg3.两栏自适应布局
<iframe  src="https://jsfiddle.net/yangjl/4qj1hm7p/embedded/html,css,result/" allowfullscreen="allowfullscreen" frameborder="0" width="100%" height="500"></iframe>
#### margin 无效
1.非替换内联元素 ,正常书写模式,垂直方向无效.
2.重叠问题导致
3.display:table-cell/table-row 无效 table-cation/inline-table 有效.table-cell (chrome/firefox inline-block渲染行为,IE table-cell 渲染行为)
4.positon:absolute,非定位方位 margin “无效”. 
```css
/** 
 * margin-top,margin-left 生效，margin-bottom,margin-right不生效
 *positon:absolute :破坏性属性，脱离文档流
**/
img{top:10%;left:30%;positon:absolute;} 
/** 
* margin-bottom,margin-right 生效，margin-top,margin-left 不生效
 *positon:absolute :破坏性属性，脱离文档流
**/
img{bottom:10%;right:30%;}

5.margin 针对于容器填充。对于 img float导致的无效，待补充例子

6.内联元素，margin失效【文字基线对齐】

margin start/end

正常流向: margin-start == margin-left ,两者重叠不累加

水平流向: margin-start == margin-right

垂直流向: margin-start == margin-top [writing-mode:vertical-lr]


img{
	margin-left:100px;
	-webkit-margin-start:100px;
	-moz-margin-start:100px;
	margin-start:100px;
}
img{
	margin-left:100px;
	-webkit-margin-start:100px;
	-moz-margin-start:100px;
	margin-start:100px;
	direction:ltr;
}