zoukankan      html  css  js  c++  java
  • margin叠加原理

    margin 叠加是什么?就是当垂直外边距相遇时,它们将叠加,叠加的高度取较大的。下面按各种情况及附图来说明。

    当一个元素出现在另一个元素上面时,第一个元素的底边界与第二个元素的顶边界发生叠加,如图:

    元素的顶边界与前面元素的底边界发生叠加。

    当一个元素包含在另一个元素中时(假设没有填充或边框将边界分隔开),它们的顶和/或底边界也发生叠加,如图:

    元素的顶边界与父元素的顶边界发生叠加。

    尽管初看上去有点儿奇怪,但是边界甚至可以与本身发生叠加。假设有一个空元素,它有边界,但是没有边框或填充。在这种情况下,顶边界与底边界就碰到了一起,它们会发生叠加,如图:

    元素的顶边界与底边界发生叠加。

    如果这个边界碰到另一个元素的边界,它还会发生叠加,如图:

    空元素中已经叠加的边界与另一个空元素的边界发生叠加。

    边界叠加初看上去可能有点儿奇怪,但是它实际上是有意义的。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的顶边界。如果没有 边界叠加,后续所有段落之间的边界将是相邻顶边界和底边界的和。这意味着段落之间的空间是页面顶部的两倍。如果发生边界叠加,段落之间的顶边界和底边界就 叠加在一起,这样各处的距离就一致了,如图:

    边界叠加在元素之间维护了一致的距离。

    margin 叠加只发生在普通文档流中块框的垂直,行内框、浮动框或绝对定位框之间的边界不会叠加。

    margin 叠加虽然是合理的,但如果处理不当,会产生不期望的效果,解决的办法有以下几种:

    1. 用外元素的 pading 代替元素的 margin;
    2. 给外元素加透明边框,即:border:1px solid transparent; 也就是有分隔的时候不会产生 margin 叠加;
    3. 元素绝对定位;
    4. 外元素设置 overflow:hidden;
    5. ……
  • 相关阅读:
    CentOS7中Tomcat的安装和配置
    CentOS7中JDK的安装和配置
    Linux基本指令
    MySQL数据库索引:索引介绍和使用原则
    MongoDB基础篇2:数据库/用户/数据集合的增删改
    MongoDB基础篇1:安装和服务配置
    JSTL fn:replace()函数替换 换行符
    LeetCode440. 字典序的第K小数字
    kubeadm搭建kubernetes-1.13.2集群
    kubernetes(k8s)kubectl使用详解
  • 原文地址:https://www.cnblogs.com/piuba/p/2815032.html
Copyright © 2011-2022 走看看