CSS深入理解学习笔记之margin

2018-06-24 01:38:26来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

1、margin与容器尺寸

  元素尺寸:①可视尺寸 clientWidth(标准);②占据尺寸

  

  margin与可视尺寸:①适用于没有设定width/height的普通block元素;②只适用于水平方向尺寸

  margin与占据尺寸:①block/inline-block水平元素均适用;②与有没有设定width/height无关;③适用于水平方向和垂直方向。可用于页面的上下留白(padding兼容性不好)。

2、margin与百分比单位

  普通元素的百分比:相对于容器宽度计算。

  绝对定位元素的百分比:相对于第一个定位的祖先容器的宽度计算的。

3、margin重叠

  margin重叠通常特性:①仅发生在block水平元素上(不包括float和absolute元素);②不考虑writing-mode的情况下,只发生在垂直方向上。

  margin重叠的情境:①相邻的兄弟元素;②父级的第一个/最后一个子元素;③空的block元素

  

  

4、margin重叠的计算规则

  正正取大值;正负值相加;负负最负值。

  margin的善用实例:

  

 

 5、理解margin:auto

   规则:如果一侧是定值,一侧是auto,则auto是剩余空间大小;如果两侧均为auto,则平分剩余空间。

   writing-mode与垂直居中(这样修改后宽度的margin:auto居中效果就会失效):

  

  绝对定位元素的margin居中:

  

 6、margin负值定位

  margin负值下的两端对齐:

  

  margin负值下的等高布局:

  

  margin负值下的两栏自适应布局:

  

 7、margin失效情形解析

  ⑴ inline水平元素的垂直margin无效前提:①非替换元素,例如不是<img>元素;②正常书写模式。

  ⑵ margin重叠

  ⑶ display:table-cell与margin:display:table-cell/display:table-row等声明的margin无效。

  ⑷ position:absolute与margin:绝对定位元素未设置定位方向的margin值”无效“。例如,img{top:10%}的margin-top有效其他均无效。

  ⑸ 鞭长莫及导致的margin无效。

  ⑹ 内联特性导致的margin无效:

    

8、了解margin-start/margin-end等属性

  margin-start:①正常的流向,margin-start等同于margin-left,两者重叠不累加;②如果水平流是从右向左,margin-start等同于margin-right;③在垂直流下(writing-mode:vertical-*;),margin-start等同于margin-top。

  margin-end:①正常的流向,margin-end等同于margin-right,两者重叠不累加;②如果水平流是从右向左,margin-end等同于margin-left;③在垂直流下(writing-mode:vertical-*;),margin-end等同于margin-bottom。

  margin-collapse:控制margin重叠。collapse(默认-重叠),discard(取消,使margin无效),separate(分隔,无margin重叠)。

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:HTML总结摘要

下一篇:CSS总结摘要