-
margin与可视尺寸，适用范围：
1、没有设定width/height的普通block水平元素
2、只适用于水平方向尺寸
实际应用：一侧定宽的自适应布局（原理是因为margin改变了区域的可视区域大小）
<img width="150" style="float:left">
<p style="margin-left:170px">图片左浮<p> -
margin与占据尺寸
1、block/inline-block水平元素均适用
2、与有没有设定width/height值无关
3、适用于水平方向和垂直方向 -
margin与百分比单位
1、普通元素的百分比margin都是相对于容器的宽度计算的。并不是分别根据宽高计算的。
2、绝对定位元素的百分比margin是相对于第一个定位祖先元素（relative/absolute/fixed）的宽度计算的。与普通元素的区别是不按照直接容器进行计算。 -
margin重叠
通常特性：
1、只发生在block水平元素（不包括float和absolute元素）
2、不考虑writing-mode，只发生在垂直方向（margin-top/margin-bottom）
三种情景：
1、相邻的兄弟元素
2、父级和第一个/最后一个子元素
Paste_Image.png
Paste_Image.png
干掉父元素、子元素margin-top重叠的几个办法：
a、父元素块状格式化上下文元素
b、父元素设置border-top
c、父元素设置padding-top
d、父元素和第一个子元素之间增加一个inline元素分割
3、空的block元素
空的block元素margin重叠的条件
a、元素没有Border设置
b、元素没有padding值
c、里面没有inline元素
d、没有height，或者min-height
-
margin重叠计算规则
1、正在取大值
2、正负值相加
3、负负最负值 -
margin重叠的意义：
1、连续段落或列表之类，如果没有margin重叠，首尾项间距会和其他兄弟标签1:2关系，排版不自然
2、web中任何地方嵌套或直接放入任何裸div，都不会影响原来的布局
3、遗落的空任意多个<p>元素，不要影响原来的阅读排版。 -
margin:auto的机制
如果一侧定值，一侧auto，auto为剩余空间大小，如果两侧均是auto，则平分剩余空间。
两个常见疑问：
1、为何图片用此办法不居中？因为图片是inline-block水平，而inline-block水平是没有剩余空间可以利用的，故无法水平居中！！！
2、为何容器定高，设置margin:auto不能实现垂直居中？因为垂直方向不会自动填充，没有可以利用的剩余空间。
元素居中的两种办法：
a、修改文档流方向，默认方向为水平方向。使用writing-mode:vertical-lr，可将元素置为垂直方向，从而使用以上特性达到垂直方向居中，但是无法实现水平方向居中。
b、利用absolute的拉伸特性，增加垂直方向剩余面积，然后使用margin:auto即可水平、垂直居中。IE8+
position:absolute;
left:0;right:0;top:0;botton:0;
width:100px;height:100px;
margin:auto;
ps:如果宽度不足以分配，那么也不会达到居中效果。 -
margin无效的几种情况
1、inline水平元素的垂直margin无效(非替换元素，如img)
2、margin重叠
3、display:table-cell，按照规范，margin是不会再table-cell中有作用的，但是某些替换元素不适用上述规则，如Img，button（具有浏览器差异）
4、绝对定位（absolute）元素非定位方位的margin值“无效”，除非给容器增加position:relavite。（原理是由于脱离文档流，故肉眼看不出来）
5、鞭长莫及。。。。 看似无效，其实有效
Paste_Image.png
6、图片不管如何设置margin，都不可能完全脱离容器，原因是因为图片是inline-block水平的，故图片一定会与它之后的文字基线对齐（不管后面是否有文字），而内联元素的特性是不可能超出容器的范围，故导致图片也不会超出此范围
-
默认情况下，margin-start与margin-left相同，但是当改变文档流时，margin-start会改变，与流向有关。margin-end同理。
网友评论