css + div 布局之 CSS盒模型 外边距合并问题_html/css_WEB-ITnose
问题表述：
那天晚上一个同学给我发来一个问题，原型大概是“一个maindiv嵌套了一个div.class="headr1" 的div 和一个div.class="header2" 的这样两个 div,他给maindiv 设定了background="black" header1设定background=“red” 。header2 设定background=“blue” 同时给heder1 设定margin-top:10px; 他预想的是内层 div.heder1 的上边距 maindiv 上边有10px的距离 但事实上 出现一个问题 ，内层div 并没有出现他所预想的那种效果，实际效果是 maindiv 仍然紧贴内层div 整个maindiv 上边框距离浏览器上边 增加了10px 的外边距”
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>无标题文档</title> 6 <style type="text/css"> 7 *{ 8 margin:0; 9 padding:0;10 }11 #maindiv{12 13 width:800px;14 height:800px;15 background-color:#00FFFF;16 <!-- overflow:hidden; -->17 18 }19 .header1{20 width:600px;21 height:100px;22 margin-top:80px;23 background-color:#FF0000;24 overflow:hidden;25 26 }27 .header2{28 border: 1px solid #00FFFF;29 width:600px;30 height:100px;31 margin-top:20px;32 background-color:#666666;33 overflow:hidden;34 35 }36 </style>37 </head>38 39 <body>40 <div id="maindiv">41 <div class="header1"> 42 新华网马尼拉４月２３日电（记者赵洁民）中国驻菲律宾大使馆发言人张华２３日对媒体说，43 中国并非如某些人所说的那样，正使中菲在南海黄岩岛的紧张局势升级，而是正使那里的局势降级。44 张华说，中国在黄岩岛海域的渔政３１０船和海监船０８４号２２日已离开黄岩岛海域。目前，45 只有一艘海监船仍在黄岩岛海域执法。他指出：“中国撤出两艘舰船再一次证明，中国并非如某些人说的那样，46 正使黄岩岛的紧张局势升级，而是使那里的局势降级。”47 这位发言人的谈话是针对菲律宾一些媒体关于“中国正在使黄岩岛局势升级”的误导。48 张华强调，中国愿意通过外交手段友好解决这一事件。49 </div>50 <div class="header2">51 新华网马尼拉４月２３日电（记者赵洁民）中国驻菲律宾大使馆发言人张华２３日对媒体说，52 中国并非如某些人所说的那样，正使中菲在南海黄岩岛的紧张局势升级，而是正使那里的局势降级。53 张华说，中国在黄岩岛海域的渔政３１０船和海监船０８４号２２日已离开黄岩岛海域。目前，54 只有一艘海监船仍在黄岩岛海域执法。他指出：“中国撤出两艘舰船再一次证明，中国并非如某些人说的那样，55 正使黄岩岛的紧张局势升级，而是使那里的局势降级。”56 这位发言人的谈话是针对菲律宾一些媒体关于“中国正在使黄岩岛局势升级”的误导。57 张华强调，中国愿意通过外交手段友好解决这一事件。58 </div>59 </div>60 61 </body>62 63 </html>问题页面效果如图：在该页面中<!-- overflow:hidden; --> 被注释掉了，此时页面显示的效果是问题描述的效果，上边有空出一大块，最外层的DIV也跟着加了80px外边距。如果把这句去掉则是我的那个同学预想的效果。这个也是我在查阅文档以及上网求助后找到的一个解决方法。这个问题被归结为"外边距合并问题" 。
在经过我用谷歌浏览器的查看DOM 结果后我发现还是因为一些浏览器的代码渲染差别造成的，我就到http://w3school.com.cn/ 上寻求解释。终于在这里
我看出了问题的存在（盒子没有获得 haslayout 造成 margin-top无效），我到百度上又搜索了一下别人是不是也遇到了同样的问题，综合各家说法我最后总结出以下几个问题的重点：
a、全部都为正值，取最大者；
b、不全是正值，则都取绝对值，然后用正值减去最大值；
c、没有正值，则都取绝对值，然后用0减去最大值。
注意：相邻的盒模型可能由DOM元素动态产生并没有相邻或继承关系。 相邻的盒模型中，如果其中的一个是浮动的（floated），垂直margin不会被折叠，甚至一个浮动的盒模型和它的子元素之间也是这样。 设置了overflow属性的元素和它的子元素之间的margin不会被折叠（overflow取值为visible除外）。 设置了绝对定位（position:absolute）的盒模型，垂直margin不会被折叠，甚至和他们的子元素之间也是一样。 设置了display:inline-block的元素，垂直margin不会被折叠，甚至和他们的子元素之间也是一样。 如果一个盒模型的上下margin相邻，这时它的margin可能折叠覆盖（collapse through）它。在这种情况下，元素的位置（position）取决于它的相邻元素的margin是否被折叠。
a、如果元素的margin和它的父元素的margin-top折叠在一起，盒模型border-top的边界定义和它的父元素相同。
b、另外，任意元素的父元素不参与margin的折叠，或者说只有父元素的margin-bottom是参与计算的。如果元素的border-top非零，那么元素的border-top边界位置和原来一样。
一个应用了清除操作的元素的margin-top绝不会和它的块级父元素的margin-bottom折叠。
注意，那些已经被折叠覆盖的元素的位置对其他已经被折叠的元素的位置没有任何影响；只有在对这些元素的子元素定位时，border-top边界位置才是必需的。 根元素的垂直margin不会被折叠。 解决方案：
在父层div加上：overflow:hidden； 把margin-top外边距改成padding-top内边距; 父元素产生边距重叠的边有不为 0 的 padding 或宽度不为 0 且 style 不为 none 的 border
父层div加： padding-top: 1px;
让父元素生成一个 block formating context，以下属性可以实现 * float: left/right * position: absolute * display: inline-block/table-cell(或其他 table 类型) * overflow: hidden/auto 父层div加：position: absolute;
就此截住！
注：本文的总结也是网上其他前辈的辛劳我这里知识借用了一下，在此做出声明：我参考的博文地址有：
http://blog.sina.com.cn/s/blog_6bec36f9010110w9.html
http://hi.baidu.com/jmtbai/blog/item/a91a136ca2d098eb42169456.html
还有一点是我觉得有必要说一下的就是这个效果在IE里面出现在谷歌里面不出现，我找到了一点资料是关于IE浏览器关于渲染的原理：
hasLayout：http://baike.baidu.com/view/2945869.htm
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
Schwierigkeiten bei der Aktualisierung der Zwischenspeicherung offizieller Konto -Webseiten: Wie vermeiden Sie den alten Cache, der sich auf die Benutzererfahrung nach der Versionsaktualisierung auswirkt?
Mar 04, 2025 pm 12:32 PM
Das offizielle Konto -Webseite aktualisiert Cache, dieses Ding ist einfach und einfach und es ist kompliziert genug, um einen Topf davon zu trinken. Sie haben hart gearbeitet, um den offiziellen Account -Artikel zu aktualisieren, aber der Benutzer hat die alte Version immer noch geöffnet. Schauen wir uns in diesem Artikel die Wendungen und Wendungen und wie man dieses Problem anmutig ansehen. Nach dem Lesen können Sie sich leicht mit verschiedenen Caching -Problemen befassen, sodass Ihre Benutzer immer den frischesten Inhalt erleben können. Sprechen wir zuerst über die Grundlagen. Um es unverblümt auszudrücken, speichert der Browser oder Server einige statische Ressourcen (wie Bilder, CSS, JS) oder Seiteninhalte, um die Zugriffsgeschwindigkeit zu verbessern. Wenn Sie das nächste Mal darauf zugreifen, können Sie ihn direkt aus dem Cache abrufen, ohne ihn erneut herunterzuladen, und es ist natürlich schnell. Aber dieses Ding ist auch ein zweischneidiges Schwert. Die neue Version ist online,
Wie verwende ich HTML5 -Formularvalidierungsattribute, um die Benutzereingabe zu validieren?
Mar 17, 2025 pm 12:27 PM
In dem Artikel werden unter Verwendung von HTML5 -Formularvalidierungsattributen wie Erforderlich, Muster, Min, MAX und Längengrenzen erörtert, um die Benutzereingabe direkt im Browser zu validieren.
Was sind die besten Praktiken für die Kompatibilität des Cross-Browsers in HTML5?
Mar 17, 2025 pm 12:20 PM
In Artikel werden Best Practices zur Gewährleistung der HTML5-Cross-Browser-Kompatibilität erörtert und sich auf die Erkennung von Merkmalen, die progressive Verbesserung und die Testmethoden konzentriert.
Wie füge ich PNG -Bildern auf Webseiten effizient Schlaganfalleffekte hinzu?
Mar 04, 2025 pm 02:39 PM
Dieser Artikel zeigt einen effizienten PNG -Grenzzusatz zu Webseiten mithilfe von CSS. Es wird argumentiert, dass CSS im Vergleich zu JavaScript oder Bibliotheken eine überlegene Leistung bietet, um zu beschreiben, wie die Randbreite, Stil und Farbe für subtile oder herausragende Effekte angepasst werden können
Was ist der Zweck des & lt; datalist & gt; Element?
Mar 21, 2025 pm 12:33 PM
Der Artikel erörtert den HTML & lt; Datalist & gt; Element, das die Formulare verbessert, indem automatische Vorschläge bereitgestellt, die Benutzererfahrung verbessert und Fehler reduziert werden.Character Count: 159
Was ist der Zweck des & lt; Fortschritts & gt; Element?
Mar 21, 2025 pm 12:34 PM
Der Artikel erörtert den HTML & lt; Progress & gt; Element, Absicht, Styling und Unterschiede vom & lt; Meter & gt; Element. Das Hauptaugenmerk liegt auf der Verwendung & lt; Fortschritt & gt; Für Aufgabenabschluss und & lt; Meter & gt; für stati
Wie benutze ich die HTML5 & lt; Zeit & gt; Element, um Daten und Zeiten semantisch darzustellen?
Mar 12, 2025 pm 04:05 PM
Dieser Artikel erklärt den HTML5 & lt; Time & gt; Element für semantische Datum/Uhrzeit. Es betont die Wichtigkeit des DateTime-Attributs für die Maschinenlesbarkeit (ISO 8601-Format) neben menschenlesbarem Text, das Zubehör steigert
Was ist der Zweck des & lt; Meter & gt; Element?
Mar 21, 2025 pm 12:35 PM
Der Artikel erörtert das HTML & lt; Meter & gt; Element, verwendet zur Anzeige von Skalar- oder Bruchwerten innerhalb eines Bereichs und seine gemeinsamen Anwendungen in der Webentwicklung. Es differenziert & lt; Meter & gt; von & lt; Fortschritt & gt; und Ex
