マージントップが失敗する、CSS + div レイアウトの CSS ボックスモデル、マージンのマージの問題_html/css

マージントップが失敗する、CSS + div レイアウトの CSS ボックスモデル、マージンのマージの問題_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 12:31:38

オリジナル

1798 人が閲覧しました

問題ステートメント:

那天晚上一个同学给我发来一个问题，原型大概是“一个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外边距。如果把这句去掉则是我的那个同学预想的效果。这个也是我在查阅文档以及上网求助后找到的一个解决方法。这个问题被归结为"外边距合并问题" 。

ログイン後にコピー

問題の原因:

Google Chrome を使用して DOM 結果を表示した後、やはり一部のブラウザでのコードレンダリングの違いが原因であることがわかりました。 http://w3school.com.cn/ で説明を参照してください。ついにここに来ました

私は問題を発見しました（ボックスが haslayout を取得できず、マージントップが無効になりました）他の人が同じ問題に遭遇したかどうかを確認するために、Baidu で検索しました。さまざまな情報源の意見に基づいて、最終的に結論を出しました。以下の問題の重要なポイントは次のとおりです:

通常のドキュメントフローでは、2 つ以上のブロックレベルのボックスモデルの隣接する垂直マージンが折りたたまれます。最終的なマージン値は次のように計算されます:
a. すべてが正の値である場合は、最大値を取得します
b. すべてが正の値ではない場合は、その正の値から最大値を減算します。 c. 正の値がない場合は、絶対値を取得し、0 から最大値を減算します。
注: 隣接するボックスモデルは DOM 要素から動的に生成される場合があり、隣接関係や継承関係はありません。隣接するボックスモデル間の垂直方向のマージンは、そのうちの 1 つがフローティングされている場合でも、フローティングされたボックスモデルとその子の間であっても折りたたまれません。オーバーフロー属性が設定された要素とその子要素の間のマージンは折りたたまれません (オーバーフロー値が表示されている場合を除く)。絶対配置 (position:absolute) が設定されているボックスモデルの場合、子要素間であっても垂直方向のマージンは折りたたまれません。 display:inline-block が設定されている要素の場合、子要素間であっても垂直方向のマージンは折りたたまれません。ボックスモデルの上下のマージンが隣接している場合、マージンが崩れてしまう可能性があります。この場合、要素の位置は、隣接する要素のマージンが折り畳まれているかどうかによって決まります。
a. 要素のマージンとその親要素のマージントップが一緒に折りたたまれている場合、ボックスモデルのボーダートップの境界定義はその親要素の境界定義と同じになります。
b. さらに、どの要素の親要素もマージンの折り畳みに参加しないか、親要素のマージンボトムのみが計算に参加します。要素のボーダートップがゼロ以外の場合、要素のボーダートップの位置は以前と同じです。
クリア操作が適用された要素のマージントップは、そのブロックレベルの親要素のマージンボトムと折り畳まれることはありません。
折り目で覆われた要素の位置は、折り畳まれた他の要素の位置に影響を与えないことに注意してください。境界線の上端の位置は、これらの要素の子要素を配置する場合にのみ必要です。ルート要素の垂直マージンは折りたたまれません。解決策:
親 div に overflow:hidden を追加します。親要素のマージンが重なる側のパディングまたは幅がゼロでない場合は、マージン上部の外側マージンをパディング上部の内側マージンに変更します。 style は none ではありません
親レイヤーに追加します div:padding-top:1px;
親要素にブロック書式設定コンテキストを生成させます次の属性を実装できます * float: left/right *position:Absolute * display: inline- block/table -cell (または他のテーブルタイプ) * overflow: hidden/auto 親レイヤー div:position:absolute を追加します
ここで停止してください!

注: この記事の要約は、インターネット上の他の先輩たちの努力でもあります。私はここで知識を借りてここで声明を出します: 私が参照したブログ投稿のアドレスは:

http://blog.sina. com.cn/s/blog_6bec36f9010110w9. html

http://hi.baidu.com/jmtbai/blog/item/a91a136ca2d098eb42169456.html

もう 1 つ言っておきたいのは、この効果は IE にも現れるということですが、 Google ではありません。IE ブラウザのレンダリング原理に関する情報を見つけました:

hasLayout: http://baike.baidu.com/view/2945869.htm