简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Heim > Web-Frontend > HTML-Tutorial > Hauptteil

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

WBOY
Freigeben： 2016-06-24 11:43:08
Original
1202 Leute haben es durchsucht

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>
Nach dem Login kopieren

运行结果如下图。从图中我们可以看出来，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>
    Nach dem Login kopieren

    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

     

    Verwandte Etiketten：
    Css 外边距折叠(collapsed margin ) 浅析
    Quelle：php.cn
    Vorheriger Artikel：如何禁止按回车键提交表单_html/css_WEB-ITnose Nächster Artikel：HTML中哪些标签的值会被提交到服务器呢？_html/css_WEB-ITnose
    Erklärung dieser Website
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Neueste Artikel des Autors
    Aktuelle Ausgaben
    function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...
    Aus 2024-04-29 11:01:01
    0
    2
    1402
    So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?
    Aus 2024-04-23 00:22:19
    0
    9
    1489
    Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.
    Aus 2024-04-19 15:37:47
    0
    1
    1329
    Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...
    Aus 2024-04-18 23:52:34
    0
    1
    1213
    Wo gibt es die Kursunterlagen zum CSS-Mindmapping? Kursunterlagen
    Aus 2024-04-16 10:10:18
    0
    0
    1297
    verwandte Themen
    Mehr>
    Beliebte Empfehlungen
    Beliebte Tutorials
    Mehr>
    Verwandte Tutorials
    Beliebte Empfehlungen
    Aktuelle Kurse
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage
    Über uns Haftungsausschluss Sitemap
    Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！