margin百分比，重叠和auto

一. 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. 计算规则
　　正正取大值
　　正负值相加
　　负负最负值

4. margin重叠的解决方法

4.1 相邻兄弟元素的重叠

最简单的方法是，使用同方向的margin，即A盒子margin-bottom: 50px，B盒子margin-top: 100px，直接用B盒子margin:150px就行了，不用使用两个方向的margin。

4.2 父子元素的重叠

4.2.1 给父元素添加一个before伪元素，.father:bofore{content:' ';display:table;}，content中有个空格

4.2.2 将父元素做成BFC，例如overflow:hidden

4.2.3 对父元素使用padding-top，不使用margin

4.2.4 将父元素定位，例如，position:fixed

三. 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
https://blog.csdn.net/shi_1204/article/details/80180224
https://tech.youzan.com/css-margin-collapse/

巴特西

margin百分比，重叠和auto

最新文章

热门文章