首页 > 代码库 > 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小结