深入理解之margin属性（第三期）

一、margin与容器的尺寸

1. margin可以改变容器的尺寸
2. margin与可视尺寸
   （1）试用于没有设定width/height的普通block水平元素。float元素/absolute/fixed元素/inline水平元素/table-cell元素 是不可以的。
   （2）只试用于水平方向的尺寸
   例：可以实现一侧定宽的自适应布局

<img width="150px" style="float:left;">
<p style="margin-left:170px">这里是内容</p>

二、margin与百分比单位

1. 普通元素的百分比margin是相对于宽度的计算。
2. 绝对定位的元素百分比margin是相对于第一个定位祖先元素（relative/absolute/fixed）的宽度计算。

三、margin重叠问题

注1：只发生block水平元素，不包括float元素和absolute元素。
注2：不考虑书写格式（writing-mode），只发生在垂直方向。

1. 相邻的兄弟元素,下面代码中，两个p元素中间的距离是20，而非30；

<p>第一行</p>
<p>第二行</p>


//css
p{
	margin-top:20px;
	margin-bottom:10px;
}

2. 父级和第一个/最后一个子元素，对比二中，父元素与子元素发生重叠。

//对比1
<div class="father">
	<div class="son" style="margin-top:80px;">内容</div>
</div>

//对比二
<div class="father" style="margin-top:80px">
	<div class="son" style="margin-top:80px;">内容</div>
</div>

3. 空的block元素
例：高度只有10px，而非20px。

.block{
	margin:10px,0,10px,0;
}

4. block元素的其它条件:

• 元素没有border设置。
• 元素没有padding值。
• 里面没有inlie元素。
• 没有height或者min-height。
• margin的计算方法
• 正正取大值
• 正负值相加
• 负负最负值

5. margin重叠的意义

• 连续段落或列表的控制排版
• web中任何地方嵌套或直接嵌入放入任何div都不会影响到原来的布局，
• 遗落的任意多个<p>元素，不会影响到原来的阅读排版。
• 取消margin重叠：-webkit-margin-collapse：collapse（重叠）/discard（取消）/separate（分隔）

四、理解css中的margin：auto

1. 元素有时候，就算没有设置width或height，也会自动填充对应的方法。
   例：会自动填充满容器的宽度（阵对第一个父级相对定位元素）

div{
	position:absolute;
	left:0;
	right:0;
	background:00c1de;
}

2. 如果第一个block定值，一侧auto，那么auto为剩余空间大小。如果两侧均是auto，则平分剩余空间。
3. 图片的margin：0，aotu;不会水平居中是因为此时图片是inline水平元素。
4. writing-mode:vertical-lr;属性可以更改流的方向，实现垂直方向margin：auto;实现居中。
5. 经典的弹窗居中:

.father{
	position:relative;
	height:200px;
}


.son{
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;	
	width:500px;
	height:100px;
	margin:auto;
}

五、margin负值定位

1. 例如在ul下有多个li元素，每一个都有设置右边距10px;这时候就可以设置ul的maigin：-10px;来消除第一个多余的边距，且不会破坏布局（注：ul的宽度也要加上10px来容纳边距）

六、margin无效情况

1. inline水平元素的垂直margin无效。
   注：非替换元素，例如不是<img>元素
2. 在display:table-cell/display:table-row等声明的margin无效。
3. 绝对定位元素的非定位方位的margin值“无效”。注：看似无效，其实可以和父元素产生联系，比如margin值设置超过父元素的高度，父元素依旧会出现滚动条。
4. 距离不够，无法移动元素。如：两个宽度30px的块元素float：left，右边设置margin-left:20px;是没有效果的，需要将20px提升到30px以上才会移动右边的块元素。

后排提示：之前在慕课看到了这个系列的教程，来自于张鑫旭老师，有兴趣的朋友可以搜索看看，本人在此做一个学习记录。