ウェブフロントエンド
htmlチュートリアル
マージントップが失敗する、CSS + div レイアウトの CSS ボックス モデル、マージンのマージの問題_html/css_WEB-ITnose
マージントップが失敗する、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外边距。如果把这句去掉则是我的那个同学预想的效果。这个也是我在查阅文档以及上网求助后找到的一个解决方法。这个问题被归结为"外边距合并问题" 。
Google Chrome を使用して DOM 結果を表示した後、やはり一部のブラウザでのコード レンダリングの違いが原因であることがわかりました。 http://w3school.com.cn/ で説明を参照してください。ついにここに来ました
私は問題を発見しました（ボックスが haslayout を取得できず、マージントップが無効になりました）他の人が同じ問題に遭遇したかどうかを確認するために、Baidu で検索しました。さまざまな情報源の意見に基づいて、最終的に結論を出しました。以下の問題の重要なポイントは次のとおりです:
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
hasLayout: http://baike.baidu.com/view/2945869.htm
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7333
9
1627
14
1351
46
1262
25
1209
29
公式アカウントのキャッシュの更新の難しさ：バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は？
Mar 04, 2025 pm 12:32 PM
公式アカウントのWebページはキャッシュを更新します。これはシンプルでシンプルで、ポットを飲むのに十分な複雑です。あなたは公式のアカウントの記事を更新するために一生懸命働きましたが、ユーザーはまだ古いバージョンを開くことができますか？この記事では、この背後にあるtwist余曲折と、この問題を優雅に解決する方法を見てみましょう。それを読んだ後、さまざまなキャッシュの問題に簡単に対処でき、ユーザーが常に新鮮なコンテンツを体験できるようになります。最初に基本について話しましょう。それを率直に言うと、アクセス速度を向上させるために、ブラウザまたはサーバーはいくつかの静的リソース（写真、CSS、JSなど）やページコンテンツを保存します。次回アクセスするときは、もう一度ダウンロードすることなく、キャッシュから直接検索できます。自然に高速です。しかし、このことは両刃の剣でもあります。新しいバージョンはオンラインです、
HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？
Mar 17, 2025 pm 12:27 PM
この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。
HTML5のクロスブラウザー互換性のベストプラクティスは何ですか？
Mar 17, 2025 pm 12:20 PM
記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。
WebページのPNG画像にストローク効果を効率的に追加する方法は？
Mar 04, 2025 pm 02:39 PM
この記事では、CSSを使用したWebページへの効率的なPNG境界追加を示しています。 CSSはJavaScriptやライブラリと比較して優れたパフォーマンスを提供し、微妙または顕著な効果のために境界幅、スタイル、色を調整する方法を詳述していると主張しています
＆lt; datalist＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:33 PM
この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。
＆lt; meter＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:35 PM
この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex
HTML5＆lt; time＆gt;を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素？
Mar 12, 2025 pm 04:05 PM
この記事では、html5＆lt; time＆gt;について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ（ISO 8601形式）のDateTime属性の重要性を強調し、Accessibilitを増やします
＆lt; Progress＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:34 PM
この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合
