关于边界堆叠的概念及理解

最新推荐文章于 2024-07-11 15:08:14 发布

weixin_30558305

最新推荐文章于 2024-07-11 15:08:14 发布

阅读量90

点赞数

原文链接：http://www.cnblogs.com/ferron/p/4556171.html

版权

边界叠加是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。简单地说，当两个垂直边界相遇时，它们将形成一个边界。这个边界的高度等于两个发生叠加的边界的高度中的较大者。

懒得抄了，记下网址。

关于该问题的一些讨论，知乎：如何解决外边距叠加的问题？百度搜的的一个博客：CSS的margin边界叠加深度剖析 collapsing-margin的W3C官方介绍：http://www.w3.org/TR/CSS2/box.html#collapsing-margins

我自己也写了一个页面，来研究这个问题

margin_test.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>margin-test</title>
    <style>
        .margin{
            width: 580px;
            margin-right: 10px;
            overflow: hidden;
            text-align: justify;
            text-justify: inter-ideograph;
            clear: both;
            font-size: 14px;
            line-height: 24px;
            padding-bottom: 20px;
            word-wrap: break-word;
        }
        .margin p{
            font-size: 14px;
            text-indent: 2em;
            margin: 26px 0;
        }
        .margin-fl-h{
            width: 580px;
            margin-right: 10px;
            overflow: hidden;
            text-align: justify;
            text-justify: inter-ideograph;
            clear: both;
            font-size: 14px;
            line-height: 24px;
            padding-bottom: 20px;
            word-wrap: break-word;
        }
        .margin-fl-h p{
            font-size: 14px;
            text-indent: 2em;
            margin: 0 26px;
            width: 100px;
            height: auto;
            float: left;
        }
        .margin-fl-v{
            width: 580px;
            margin-right: 10px;
            overflow: hidden;
            text-align: justify;
            text-justify: inter-ideograph;
            clear: both;
            font-size: 14px;
            line-height: 24px;
            padding-bottom: 20px;
            word-wrap: break-word;
        }
        .margin-fl-v p{
            font-size: 14px;
            text-indent: 2em;
            margin: 26px 0;
            width: 580px;
            height: auto;
            float: left;
        }
        .margin-h{
            width: 580px;
            margin-right: 10px;
            /*overflow: hidden;*/
            /*text-align: justify;*/
            /*text-justify: inter-ideograph;*/
            /*clear: both;*/
            font-size: 14px;
            /*line-height: 24px;*/
            padding-bottom: 20px;
            /*word-wrap: break-word;*/
        }
        .margin-h p{
            font-size: 14px;
            text-indent: 2em;
            margin: 26px 0;
        }
        .margin-h2{
             width: 1300px;
             margin-right: 10px;
             overflow: hidden;
             text-align: justify;
             text-justify: inter-ideograph;
             clear: both;
             font-size: 14px;
             line-height: 24px;
             padding-bottom: 20px;
             word-wrap: break-word;
         }
        .margin-h2 span{
            font-size: 14px;
            text-indent: 2em;
            margin: 26px 26px;
        }
        .margin-div{
             width: 1300px;
             margin-right: 10px;
             overflow: hidden;
             text-align: justify;
             text-justify: inter-ideograph;
             clear: both;
             font-size: 14px;
             line-height: 24px;
             padding-bottom: 20px;
             word-wrap: break-word;
         }
        .margin-div div{
            font-size: 14px;
            text-indent: 2em;
            margin: 26px 0;
        }
        .margin-result{
            width: 1300px;
            margin-right: 10px;
            overflow: hidden;
            text-align: justify;
            text-justify: inter-ideograph;
            clear: both;
            font-size: 14px;
            line-height: 24px;
            padding-bottom: 20px;
            word-wrap: break-word;
        }
        .margin-result div{
            font-size: 14px;
            text-indent: 2em;
            margin: 50px 10px 100px 20px;
        }

    </style>
</head>
<body>
<div class="margin">
    <p>关于margin的测试，网易新闻阅读界面，div中包含若干个p标签，每个p标签都是margin:26px 0;但是上下两个p标签的间距是27px，而不是27*2px</p>
    <p>这是为什么呢，我们来研究一下</p>
    <p>通过测试可见，margin边距是按照border开始算的，而不是按照外边距的位置开始算</p>
</div>
<div class="margin-fl-h">
    <p>我们再来测试一下横向边距</p>
    <p>看看在宽度一定的情况下，横向设置的边距是不是同样以border开始算而忽略margin。</p>
    <P>结果显而易见，I’m wrong！</P>
</div>
<div class="margin-fl-v">
    <p>初步看出好像横向设置的边距起作用了</p>
    <p>那么这是不是float:left的作用，咱么来测试一下垂直情况下，margin的表现</p>
    <p>好了，现在可以断定，在添加了float:left的情况下，margin不会忽视其他盒子模型的margin，无论是水平还是垂直</p>
    <p>但是在不添加float的情况下，盒子模型默认垂直排列，好像是不考虑其他盒子模型的margin</p>
</div>
<div class="margin-h">
    <p>我们先考虑是不是div中的某些属性导致了p标签排版不考虑margin</p>
    <p>我们删掉一下div的属性，看看结果</p>
    <p>有办法在不添加float：left的情况下，让p标签横向排列吗？暂时想不到</p>
    <p>那只有换成行内元素span看看了，请看下面</p>
</div>
<div class="margin-h2">
    <span>如果把p标签换成span呢，span是行内元素，不存在margin属性</span>
    <span>我们来试一下，不过好像左右的margin和padding可以起作用，结果很遗憾，margin在被考虑在内了</span>
</div>
<div class="margin-div">
    <div>换成div看看</div>
    <div>不添加float属性</div>
</div>
<div class="margin-result" >
    <div>最后得到这样的结论，任何情况下，元素的margin都是要考虑别的元素的margin属性的，</div>
    <div>但是如果是不添加任何float属性的情况下，靠块状元素自己垂直排列，块状元素的某个外边距是不被考虑的</div>
    <div>我们弄一个特殊的边距来试一试</div>
    <div>结论得出</div>
    <div>在块状元素自行换行的特效下，他是不考虑被换行的元素的上外边距的</div>
    <div style="margin: 200px 10px 120px 20px">我么来整个特殊的大的上margin来试试，可以看出改行上下边距都是以它自己的为准的</div>
    <div>卧槽，看来结论错误了</div>
    <div>正确答案是，两个都被考虑了，以对方的border位置开始算的这个定律没有被打破，但是谁的大，就按谁的来，只考虑大的，小的被忽略了</div>
    <div style="padding: 10px 20px 30px 40px">如果加上padding呢,可以看出确实是以border为准的</div>
</div>
找到一个参考文档，这玩意叫边间堆叠。<a href="http://www.webshu.net/jiaocheng/web/CSS/200804/7732.html">http://www.webshu.net/jiaocheng/web/CSS/200804/7732.html</a>

http://www.zhihu.com/question/19823139
</body>
</html>