Web開発 (4) 伝説のボックスモデル margin_html/css_WEB-ITnose
- 証拠金の利用
- 証拠金の重複現象
- 証拠金の債務返済現象
証拠金
を使用する場合は、まずコードと効果を確認してください。
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Margin</title> <style> /*清空标签默认样式*/ body,div { border: 0; margin: 0; padding: 0; } div { width: 100px; height: 100px; background-color: red; /*使用外边距*/ margin: 10px; } </style> </head> <body> <div></div> </body></html>
margin.png を使用した場合の効果
margin の使用方法は次のようになります。パディング (マージン 1 ～ 4 の値を続けることもできます。特定の機能については、パディングを参照してください)
わかりました、簡単な使用法には触れませんが、マージンを使用する場合は、次の点に注意する必要があります。次の 2 つの状況: 1. 同じレベル間で左と右が追加され、上下が重なっています。2. 親子レベルで margin-top を使用します。最初の子供は、父親が子供の借金を支払うことになります。
マージンのオーバーラップ現象
オーバーラップとは何かを説明する前に、コードの一部を見てみましょう:
.div1 { width: 100px; height: 100px; background-color: red; margin-bottom: 50px; } .div2 { width: 100px; height: 100px; background-color: red; margin-top: 30px; }ここで、.div1 と .div2 は次の div です。同じレベルの場合、2 つは上下の構造になっている必要があります。このとき、2 つの間の距離は何ピクセルになるでしょうか。 80ピクセル？それとも40px？答えは50pxです。このとき重なるという現象があるからです。 端的に言えば値が大きい方です。
例を考えてみましょう。剣士 A の剣気の半径が 50 メートル、剣士 B の剣気の範囲が 50 メートルであるとします。 30メートルですので、両者の間の安全な距離はどのくらいでしょうか?答えは50メートルですよね？
ウェブでは、この現象をマージンの 重複 現象と呼んでいます。
マージンの負債は親によって返済されます
それでも、最初にコードを見てみましょう。しかし、今回は機能します。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Margin</title><style> /*清空标签默认样式*/ body,div { border: 0; margin: 0; padding: 0; } .father { width: 300px; height: 300px; background-color: orange; } .son { width: 100px; height: 100px; background-color: red; margin-top:10px; }</style></head><body><div class="father"> <div class="son"></div></div></body></html>Margin-top が .son の選択範囲に追加されます。論理的に言えば、その効果は .son (赤いブロック) が .father (オレンジのブロック) の上部から 10 ピクセルになるはずですが、これがほんとにそうだね、お茶 ひとりで話しませんか？それは問題ではありません。効果を見てみましょう:
Son は、father に借金を支払います。png
.son と の間に距離がないことがわかります。父親ですが、逆に、.father は本文から 10px の上部余白があります。このとき、 借金が父親に返される 現象が発生していると言えます。分かりやすく言えば、息子が借金を返せなくなったので、その後の対応をしなければならないということです。
この現象は開発中に発生することを回避する必要があります。この現象を回避するための 3 つの比較的成熟した解決策があります。1. 親に境界線を追加します。新しい属性 overflow:hidden を親に追加します。3. マージンを適用せず、親で padding-top を使用します。 注:
子供は父親に借金を支払いますこの現象は、margin-top が最初の子に使用された場合にのみ発生します。
創造は永遠です、お茶を飲みましょう...
ホット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）
ホットトピック
7349
15
1627
14
1352
52
1265
25
1214
29
公式アカウントのキャッシュの更新の難しさ：バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は？
Mar 04, 2025 pm 12:32 PM
公式アカウントのWebページはキャッシュを更新します。これはシンプルでシンプルで、ポットを飲むのに十分な複雑です。あなたは公式のアカウントの記事を更新するために一生懸命働きましたが、ユーザーはまだ古いバージョンを開くことができますか？この記事では、この背後にあるtwist余曲折と、この問題を優雅に解決する方法を見てみましょう。それを読んだ後、さまざまなキャッシュの問題に簡単に対処でき、ユーザーが常に新鮮なコンテンツを体験できるようになります。最初に基本について話しましょう。それを率直に言うと、アクセス速度を向上させるために、ブラウザまたはサーバーはいくつかの静的リソース（写真、CSS、JSなど）やページコンテンツを保存します。次回アクセスするときは、もう一度ダウンロードすることなく、キャッシュから直接検索できます。自然に高速です。しかし、このことは両刃の剣でもあります。新しいバージョンはオンラインです、
WebページのPNG画像にストローク効果を効率的に追加する方法は？
Mar 04, 2025 pm 02:39 PM
この記事では、CSSを使用したWebページへの効率的なPNG境界追加を示しています。 CSSはJavaScriptやライブラリと比較して優れたパフォーマンスを提供し、微妙または顕著な効果のために境界幅、スタイル、色を調整する方法を詳述していると主張しています
HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？
Mar 17, 2025 pm 12:27 PM
この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。
＆lt; datalist＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:33 PM
この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。
HTML5のクロスブラウザー互換性のベストプラクティスは何ですか？
Mar 17, 2025 pm 12:20 PM
記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。
＆lt; meter＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:35 PM
この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex
＆lt; Progress＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:34 PM
この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合
HTML5＆lt; time＆gt;を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素？
Mar 12, 2025 pm 04:05 PM
この記事では、html5＆lt; time＆gt;について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ（ISO 8601形式）のDateTime属性の重要性を強調し、Accessibilitを増やします
