margin相关

• margin与可视尺寸，适用范围：
  1、没有设定width/height的普通block水平元素
  2、只适用于水平方向尺寸
  实际应用：一侧定宽的自适应布局（原理是因为margin改变了区域的可视区域大小）
  
  

  图片左浮

• 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、遗落的空任意多个

  元素，不要影响原来的阅读排版。

• 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同理。