作者:心叶
时间:2018-04-26 20:39

第一步:基础说明。

margin的意思很容易明白,就是外边距,用更通俗的话说,就是二个盒子之间间距的设置。

margin有许多需要注意的地方,比如块级元素垂直相邻外边距会合并,行内元素实际上不占上下外边距,左右外边距也不会合并,浮动元素的外边距也不会合并。

普通元素的margin百分百是按照父级元素(正确的说应该是包含块,具体可以看这篇文章关于CSS中设置overflow属性的值为hidden的相关理解)的宽来计算的,而绝对定位的元素的margin百分比是按照第一个定位元素(relative,absolute和fixed)的宽来计算的。

第二步:block元素重叠。

block元素(不考虑float和absolute)在垂直方向发生margin重叠(不考虑writing-mode改变书写方式);margin三种重叠:1.相邻兄弟元素;2.父亲元素和第一个或最后一个孩子元素;3.空的block元素。

第三步:重叠条件。

父子元素重叠条件(margin-top)

1.父元素非块状格式上下文元素;
2.父元素和第一个子元素之间没有inline元素分割;
3.父元素没有border-top或padding-top设置。

父子元素重叠条件(margin-bottom)

1.父元素非块状格式上下文元素;
2.父元素没有border-bottom或padding-bottom设置;
3.父元素和最后一个子元素之间没有inline元素分割;
4.父元素没有height,min-height和max-height的限制。

空的block元素重叠

1.元素没有border或padding或inline设置;
2.没有height或者min-height设置。

第四步:有价值的细节。

重叠计算方法:正正取最大、负负取最小和正负相加。

在书写方向的垂直方向,margin:auto会自动分配剩余空间(剩余空间的意思简单的可以理解为:在没有设置宽之前的长度去掉你设置的宽余下的那段距离)。

绝对定位元素的非定位方向margin无效(貌似是的,不过描述不准确,其实一直有效,只不过现在只可以影响自己,无法改变兄弟了,因此看起来失效了)。

最后一个题外话,margin-collapse可以设置重叠方式(collapse默认,重叠、discard取消margin,等于margin:0和separate分隔,就是不发生重叠)。


心叶
304 声望114 粉丝

我还惊讶地意识到, 在我生命中有很多时刻, 每当我遇到一个遥不可及、令人害怕的情境,并感到惊慌失措时, 我都能够应付——因为我回想起了很久以前自己上过的那一课。