ホームページ > ウェブフロントエンド > htmlチュートリアル > margins_html/css_WEB-ITnose との位置の重複を修正しました

margins_html/css_WEB-ITnose との位置の重複を修正しました

WBOY
リリース: 2016-06-24 11:32:34
オリジナル
1238 人が閲覧しました

固定位置の問題については、マージンの重なりも固定位置に関係しており、重なり関係が明確でないと、ボディの位置に直接影響します。

説明はとても良かったです。私は以前、固定位置がブラウザーのビューポートを基準にしていることしか知りませんでした。聞いた後、オフセットを設定した後でのみ、固定位置決め要素がブラウザーのビューポートを基準に配置されることがわかりました。

1 . 上部セレクターに固定位置が設定されている場合 (上部レイヤーは標準ドキュメント フローから分離されているため)、オフセットは設定されず、親のラッピング レイヤーによって配置されます (固定位置設定の場合)。最上位セレクタのオフセットを設定し、最上位レイヤの位置は設定されたオフセットに従って配置されます)、その親ラッピングレイヤのボディのマージンが本体の上部マージン値と重なっています(このとき、ボディと本体は所属します)本文の上マージン値は本文のマージン値より大きく、本文の上マージン値は 20px に選択されます (標準ドキュメント フローで上下のマージンが重なる場合、本体の上マージン値は 20px に設定されます)より大きなマージン値が選択されているため、ボディは 20 ピクセル下に移動し、トップ レイヤはボディ レイヤと一緒に配置されるため、トップ レイヤとブラウザの表示ウィンドウとの間に距離が生じます。最上位レイヤーをブラウザ ウィンドウの近くに保つには、オフセット top:0 を最上位レイヤーの固定位置に設定する必要があります


2。最上位レイヤーがそれに続きます。兄弟要素は元の位置を占めるため、本体レイヤーが上に移動して、元の最上位レイヤーの位置を占めます。その結果、トップレイヤーと本体レイヤーの間に元々あった20pxの隙間がなくなりました。これは、本体層の上部外側パッドに一定の高さを追加することで解決できます。

http://www.imooc.com/qadetail/66633

垂直方向では、マージン上部の値が重なり合います。つまり、マージンのマージです。2 つの垂直マージンが出会うと、マージンのマージが発生します。マージされたマージンの高さは、2 つのマージン値の大きい方と等しくなります。これは、通常のドキュメント フローのブロック レベルのボックスでのみ発生し、ライン ボックス、絶対位置、およびフロートでは発生しません。したがって、一般的には、親要素にマージンを追加し、子要素にパディングを追加することをお勧めします。

の外側の距離の問題については、時々私はまだ息子の才能に耳を傾けなければなりません、笑

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート