Css 外边距折叠(collapsed margin ) 浅析_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 11:43:08
원래의
1251명이 탐색했습니다.

Css 外边距折叠(collapses margin )

a.先来看看w3c 文档对于外边距折叠的定义:

In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.

翻译一下:在Css中,相邻盒子(有可能是同辈元素,也可能不是)的外边距可以合并成为一个外边距。 外边距的这种合并方式称为 折叠,这种合并过的外边距称为 外边距折叠

举个例子:

<style type="text/css">.testBFC{    width:100px;    height:100px;    background-color:green;}.testBFC div{    width:30px;    height:30px;    background-color:pink;    }.testBFC div:first-child{    margin-bottom:10px;}.testBFC div:last-child{    margin-top:10px;}</style><div class="testBFC">    <div>div1</div>    <div>div2</div></div>
로그인 후 복사

运行结果如下图。从图中我们可以看出来,div1 的margin-bottom和 div2 的margin-top 合并了,结果 div1和div2 之间只有10px。我们本来是要他们之间间隔20px,如何实现呢?可以给div1 的class中添加:display:inline-block。 这就涉及到如何解决或避免外边距折叠的问题了。

下面来看看w3c文档的具体注意事项:

Note the above rules imply that:

  • Margins between a floated box and any other box do not collapse (not even between a float and its in-flow children).
  • Margins of elements that establish new block formatting contexts (such as floats and elements with 'overflow' other than 'visible') do not collapse with their in-flow children.
  • Margins of absolutely positioned boxes do not collapse (not even with their in-flow children).
  • Margins of inline-block boxes do not collapse (not even with their in-flow children).
  • The bottom margin of an in-flow block-level element always collapses with the top margin of its next in-flow block-level sibling, unless that sibling has clearance.
  • The top margin of an in-flow block element collapses with its first in-flow block-level child's top margin if the element has no top border, no top padding, and the child has no clearance.
  • The bottom margin of an in-flow block box with a 'height' of 'auto' and a 'min-height' of zero collapses with its last in-flow block-level child's bottom margin if the box has no bottom padding and no bottom border and the child's bottom margin does not collapse with a top margin that has clearance.
  • A box's own margins collapse if the 'min-height' property is zero, and it has neither top or bottom borders nor top or bottom padding, and it has a 'height' of either 0 or 'auto', and it does not contain a line box, and all of its in-flow children's margins (if any) collapse.
  • 1. 浮动的盒子和其它盒子之间不会发生折叠。(甚至 浮动的盒子和它的正常流中子元素之间 也不会 发生折叠). 举个例子,下面例子中 父元素 和子元素 之间 会发生外边缘折叠,这时可以父元素或子元素 设置成浮动,就可以显示正常。

    <head>    <style type="text/css">        *{            margin:0;            padding:0;        }        .testBFC{            width:100px;            height:100px;            background-color:green;            margin-top:10px;        }        .testBFC div{            width:30px;            height:30px;            background-color:pink;        }        .testBFC div:first-child{            margin-top:10px;        }    </style></head><body><div class="testBFC">    <div>div1</div></div></body>
    로그인 후 복사

    2. 为元素的外边距 建立一个新的 block formatting contexts(块级格式上下文),这样就不会和 它的正常流中的子元素发生折叠。如上面的例子中,可以在外面的div 添加一个属性overflow:hidden

    3. 绝对定位的盒子不会发生折叠。上面的例子中,可以给父元素或者子元素 添加属性:position:absolute 或者 fixed.

    4. 在一个正常的文档流中,块级元素的底部外边距 回和它的后面的兄弟元素的 上边距发生折叠,除非 你设置了 clearance。见文章顶部的例子。

    5. 块级元素的 top margin 会和它的第一个块级元素的子元素的 top margin 发生外边距折叠,如果这个块级元素没有设置 top border, no top padding ,子元素没有设clearance. 举例:tip 1 中已经有了这个例子。

    6. 块级元素的bottom margin 有可能会和它的最后一个块级子元素的 bottom margin 发生外边距折叠,如果 这个块级元素没有设置 bottom padding,bottom border 并且 height:auto, min-height:0

    7. 这样的盒子会外边距折叠 , min-height:0, 并且没有设置 top or bottom borders 或者 top or bottom padding, 并且height:0 or auto 并且它不包含 line box 并且 它所有的子元素外边距折叠。

     

    详细信息请参考w3c文档: http://www.w3.org/TR/CSS2/box.html#collapsing-margins

     

    원천:php.cn
    본 웹사이트의 성명
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
    인기 튜토리얼
    더>
    최신 다운로드
    더>
    웹 효과
    웹사이트 소스 코드
    웹사이트 자료
    프론트엔드 템플릿
    회사 소개 부인 성명 Sitemap
    PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!