理解margin

Posted 2020-08-05 mengyin

• margin可以改变容器的尺寸 //元素尺寸分为可视尺寸，占据尺寸

　　　　margin与可视尺寸

　　　　　　1.适用于没有设定width/height的普通block水平元素

　　　　　　2.只适用于水平方向的尺寸

　　　　应用：一侧定宽的自适应布局，两端对齐布局等

　　　　例如：左边有一张图片固定宽度，右面有文字，无论怎么改变文字的宽度，图片都不会动。

　　　　　　　margin-left:70px

 

　　　　margin与占据尺寸

　　　　　　1.block/inline-block水平元素均适用

　　　　　　2.与有没有设定width/height值无关

　　　　　　3.适用于水平和垂直方向

　　　　应用：滚动容器上下留白：margin:50px 0;

　　　　　　　 多栏或2栏的等高布局等

---

• margin与百分比单位

　　　　普通元素百分比和绝对定位元素百分比

　　　　　　1.普通元素百分比margin都是相对于容器的宽度计算的

　　　　　　2.position:absolute绝对定位元素百分比margin是相对于第一个定位祖先元素

　　　　　　　（relative/absolute/fixed）的宽度计算的

　　　　应用：宽高2:1自适应矩形

---

• margin重叠

　　　　margin重叠发生在：block水平元素

　　　　　　　　　　　　   : 只发生在垂直方向（margin-top/margin-bottom）

 

　　　　margin重叠情境：相邻两个元素

　　　　　　　　　　　　  父与子第一个或最后一个

　　　　　　　　　　　　  空block元素

 

　　　　干掉margin-top重叠：父元素非块状格式化上下文元素—>overflow:hidden

　　　　　　　　　　　　　　   父元素没有border-top设置

　　　　　　　　　　　　　　   父元素没有padding-top值

　　　　　　　　　　　　　　   父元素和第一个子元素之间没有inline元素分隔

 

　　　　干掉margin-bottom重叠：父元素非块状格式化上下文元素—>overflow:hidden

　　　　　　　　　　　　　　　　    父元素没有border-top设置

　　　　　　　　　　　　　　　　    父元素没有padding-top值

    　　　　　　　　　　　　　　     父元素和第一个子元素之间没有inline元素分隔

　　　　　　　　　　　　　　　　    设置高度

 

　　　　干掉空block元素重叠：元素不能有borde设置

　　　　　　　　　　　　　　   元素不能有padding

　　　　　　　　　　　　　　   不能有inline元素

　　　　　　　　　　　　　　   不能有height

 

　　　　margin重叠计算规则：正正去大值

　　　　　　　　　　　　　　   正负值相加

　　　　　　　　　　　　　　   负负最负值

---

• margin：auto 自动填充 用来分配剩余空间的

 

　　　　为什么图片margin：0 auto不水平居中？

　　　　答：因为此时图片是inline水平，就算没有width，它也不会占据整个容器

　　　　　　只要设置display：block，不设置width，也会占据整个容器

 

　　　　垂直方向margin实现居中：1.writing-mode：vertical-1r ; margin：auto

　　　　　　　　　　　　　　　　   2.position:absolute；margin：auto

---

• margin负值定位

　　　　margin负值下的等高布局：margin-bottom：负值； //改变元素占据空间的大小

　　　　　　　　　　　　　　　　   padding-bottom：正值； //填充缺失的空间

 

　　　　margin负值下的两栏自适应布局：float：left

　　　　　　　　　　　　　　　　　　　   margin-left：-150px

---

• margin无效情形

　　　　1.内联元素

　　　　2.重叠

　　　　3.display：table-cell/table-row等

---

• margin-start和margin-end