首页 > 代码库 > margin小结

margin小结

一. margin百分比

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

这是在默认的 writing-mode: horizontal-tb; 和 direction: ltr; 的情况下,
若书写模式变成纵向的时候,其参照将会变成包含块的高度。

二. margin重叠

1. 通常特性
  block水平元素(不包括float和absolute元素)
  不考虑writing-mode,只发生在垂直方向(margin-top/margin-bottom)

2. 重叠的3种情境

A.相邻的兄弟元素

B. 父级和第一个/最后一个子元素

  子元素的margin-top相当于父元素的margin-top
a.margin-top重叠
  父元素非块状格式化上下文元素
  父元素没有border-top设置
  父元素没有padding-top值
  父元素和第一个子元素之间没有inline元素分隔

b.margin-bottom重叠
  父元素非块状格式化上下文设置
  父元素没有border-bottom设置
  父元素没有padding-bottom值
  父元素和第一个子元素之间没有inline元素分隔
  父元素没有height,min-height,max-height

C.空的block元素

  元素没有border设置
  元素没有padding值
  里面没有inline元素
  没有height或者min-height

3. 计算规则
  正正取大值
  正负值相加
  负负最负值

三. margin auto

margin的值为auto,是自动占据包含块的剩余空间,例如

<div id="demo">
    <p>恩,我就是那个p。</p>
</div>
#demo{
  width: 500px;
}
#demo p{
  width: 100px;
  margin-left: auto;
}

则p的实际margin-left为500-100=400px,p元素右对齐

当margin-left和margin-right同为auto时,左右平分剩余空间,元素居中

 

 

参考:https://segmentfault.com/a/1190000006212076
        http://www.ituring.com.cn/article/64580
        http://www.ituring.com.cn/article/64581 

margin小结