margins_html/css_WEB-ITnose との位置の重複を修正しました
固定位置の問題については、マージンの重なりも固定位置に関係しており、重なり関係が明確でないと、ボディの位置に直接影響します。
説明はとても良かったです。私は以前、固定位置がブラウザーのビューポートを基準にしていることしか知りませんでした。聞いた後、オフセットを設定した後でのみ、固定位置決め要素がブラウザーのビューポートを基準に配置されることがわかりました。
1 . 上部セレクターに固定位置が設定されている場合 (上部レイヤーは標準ドキュメント フローから分離されているため)、オフセットは設定されず、親のラッピング レイヤーによって配置されます (固定位置設定の場合)。最上位セレクタのオフセットを設定し、最上位レイヤの位置は設定されたオフセットに従って配置されます)、その親ラッピングレイヤのボディのマージンが本体の上部マージン値と重なっています(このとき、ボディと本体は所属します)本文の上マージン値は本文のマージン値より大きく、本文の上マージン値は 20px に選択されます (標準ドキュメント フローで上下のマージンが重なる場合、本体の上マージン値は 20px に設定されます)より大きなマージン値が選択されているため、ボディは 20 ピクセル下に移動し、トップ レイヤはボディ レイヤと一緒に配置されるため、トップ レイヤとブラウザの表示ウィンドウとの間に距離が生じます。最上位レイヤーをブラウザ ウィンドウの近くに保つには、オフセット top:0 を最上位レイヤーの固定位置に設定する必要があります
2。最上位レイヤーがそれに続きます。兄弟要素は元の位置を占めるため、本体レイヤーが上に移動して、元の最上位レイヤーの位置を占めます。その結果、トップレイヤーと本体レイヤーの間に元々あった20pxの隙間がなくなりました。これは、本体層の上部外側パッドに一定の高さを追加することで解決できます。
http://www.imooc.com/qadetail/66633
垂直方向では、マージン上部の値が重なり合います。つまり、マージンのマージです。2 つの垂直マージンが出会うと、マージンのマージが発生します。マージされたマージンの高さは、2 つのマージン値の大きい方と等しくなります。これは、通常のドキュメント フローのブロック レベルのボックスでのみ発生し、ライン ボックス、絶対位置、およびフロートでは発生しません。したがって、一般的には、親要素にマージンを追加し、子要素にパディングを追加することをお勧めします。
の外側の距離の問題については、時々私はまだ息子の才能に耳を傾けなければなりません、笑

ホット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)

ホットトピック

この記事では、HTML< Progress>について説明します。要素、その目的、スタイリング、および< meter>との違い要素。主な焦点は、< Progress>を使用することです。タスクの完了と< Meter> statiの場合

この記事では、HTML< Datalist>について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。

この記事では、html< meter>について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化< Meter> < Progress>およびex

この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。

この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。

この記事では、html5< time>について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ(ISO 8601形式)のDateTime属性の重要性を強調し、Accessibilitを増やします

記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。

この記事では、< iframe>外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。
