一、元素尺寸
我们看下标准盒模型
最里面的黑色实现框内宽为可视尺寸:clientWidth(标准)
之外的一层虚线内宽为占据尺寸:outerWidth(包含margin)
二、margin 与可视尺寸
(1)是用于没有设定width/height的普通block水平元素
不包括float absolute/fixed inline table-cell
(2)只适用于水平方向尺寸
(3)使用场景:一侧顶宽的自使用布局
三、margin 与占据尺寸
(1)block/inline-block元素都使用
(2)与有没有设定width/height值无关
(3)适用于水平方向和垂直方向
四、margin 与百分比单位
普通元素的百分比margin都是相对于容器的宽度计算的
绝对定位的严肃的百分比margin是相对于第一个最近定位(relative/absolute/fixed)祖先元素的宽度计算的.
五、margin重叠
(1)发生的情况:
普通的block水平(不包括float absolute)
不考虑writing-mode(让元素水平显示,),只发生在垂直方向(margin-top/margin-bottom)
(2)重叠的3中情景
相邻的兄弟元素
父级和第一个/最后一个子元素
空的block元素
对于第二种情形,父子margin重叠的其他条件
a 父元素非块状格式化上下文
b 父元素没有border-top/bottom设置
c 父元素没有padding-top/bottom设置
d 父元素和第一个子元素/最后一个子元素之间没有inline元素分割
e (对于margin-bottom重叠 )父元素没有height,min-height,max-height限制。
于是,通过改变如上的情况就可以干掉重叠了。
(3)计算方法
正正取大值 正负值相加 负负取绝对值最大的
(4)善用margin重叠
有的时候需要在一个表单列表中使用margin,拉开彼此的距离,为了更加具有健壮性,防止最后一个元素移除或者位置调换,影响到原来的布局,我们可以这样:
.list{ margin-top:15px; margin-bottom:15px;}
六、margin :auto(用来计算剩余空间的,前提是元素占据整个容器,填充整个空间)
(1)一侧是定值,一侧auto,auto为剩余空间大小
(2)两侧若都是auto,则平分剩余空间
.div{width:100px;margin:0 auto;}
(3)absolute 与margin居中
.father{height:100px;position:relative;}
.son{position:absolute;top:0;right:0;bottom:0;left:0;width:200px;height:50px;margin:auto}
如上的absolute拉伸已经不起作用了,因为本身就存在宽高,这是是水平垂直居中的,适用于IE8+。
七、应用margin负值
(1)我们通常在制作ul/ol列表的时候,让他们的li排成一排,比如制作导航栏的时候,每一个列表之间都通过margin-right:10px;设置一个间距,但是到了最后一个li的时候,我们不想要它的margin-right,这是方法一是手动添加style使得它的margin:0,但是不建议这样做,我们采用第二种方法,应用了margin可以改变元素尺寸。
.ul{overflow:hidden;margin-right:-10px;}
(2)两列布局,右侧宽度固定,左侧自使用,我们通常的做法是利用dom元素顺序与实际元素顺序相反的那个方法来实现,但是还有个不用颠倒顺序的方法:
<div style='float;left';width:100%>
<p style='margin-right:170px'>这是一段文字<p>
</div>
<img width='100' style='float:left';margin-left:-100px;>
八、margin无效的情形
(1)inline元素垂直margin无效
(2)margin重叠
(3)display:table-cell/table-row margin无效
九、margin-start and margin-end
在正常的流向中,margin-start等同于margin-left,二者重叠不累加
如果水平流式从右往左,margin-start等同于margin-right
在垂直流下(writing-mode:vertical-*),margin-start等同于margin-top