ホームページ > 記事 > ウェブフロントエンド > CSS_html/css_WEB-ITnose の負のマージン値についての深い理解
CSS_html/css_WEB-ITnose の負のマージン値についての深い理解
- WBOYオリジナル
- 2016-06-24 11:22:571315ブラウズ
× ディレクトリ [1] パフォーマンス [2] オーバーラップ [3] フローティング [4] ポジショニング [5] アプリケーション
上記の通り
margin 属性は実際に非常によく使われており、落とし穴がたくさんあります。何らかの理由でマージンフォールディングの被害に遭った人はたくさんいると思います。負のマージン値も非常に一般的な機能であり、多くの特別なレイアウト方法はこれに依存しています。簡単なようで実はかなり複雑です
この記事ではマージンの負の値について詳しく紹介し整理しています
【注意】マージン部分の基礎知識はこちらに移動します
パフォーマンス
マージンは可能ですが。すべての要素に適用されますが、表示属性が異なるとパフォーマンスも異なります
【1】ブロック要素は4方向のマージン値を使用できます
【2】インライン要素は上下のマージン値を使用しますdown 方向は無効です
【3】Inline-block は上下方向に負のマージン値を使用していますが、無効に見えます
[注意] Inline-block は上下方向に負のマージン値を使用していますが、無効に見えます。これは、デフォルトのvertical-align:baselineに関連します。垂直方向の配置属性値が他の値の場合、異なる視覚効果が表示されます
Overlap
負のマージン値は、必ずしも前の要素をカバーするとは限りません。 , 要素の表示属性に関係します
【1】2つのブロック要素が重なっている場合、次の要素は前の要素の背景をカバーすることはできますが、その内容をカバーすることはできません
【2】インライン要素が2つある場合、または2 つの line-block 要素、または inline と inline-block 要素が重なっている場合、次の要素は前の要素の背景とコンテンツを覆うことができます
【3】inline 要素が block 要素と重なる場合、inline 要素は背景とコンテンツを覆います。 block要素の内容
【4】inline-block要素がblock要素と重なる場合、inline-block要素はblock要素の背景を覆いますが、その内容を覆うことはできません
Floating
【1】ブロック要素がフローティング要素に重なる場合、その境界線と背景はフローティング要素の下に表示され、コンテンツはフローティング要素の上に表示されます
【2】インラインまたはインラインブロック要素がフローティング要素に重なる場合、その境界線、背景、コンテンツはすべてフローティング要素の上に表示されます
位置決め
【1】配置された要素（位置は静的ではありません）が他の要素を覆います 背景とコンテンツ
【2】相対を適用した後inline 要素や inline-block 要素に属性値を追加する場合、inline 要素の性質は変更できないため、上下のマージンの問題は依然として残ります
アプリケーション
【1】 水平方向と垂直方向のセンタリング
マージンのパーセンテージは包含ブロックの幅に相対し、空の
.box{ position:relative; width: 200px; height: 200px; background-color: lightgreen; border: 2px solid black;}.out{ position: absolute; left: 50%; top: 50%;} .in{ height: 100px; width: 100px; background-color: pink; margin-left: -50%; margin-top: -50%;}
<div class="box"> <div class="out"> <div class="in">测试内容</div> </div> </div>
【2】リスト項目の両端を揃える
リスト項目の外側に要素のレイヤーを囲んで使用します。最後のリスト項目を戻すには、負のマージン値を使用します
ul{ margin: 0; padding: 0; list-style:none;}.box{ width: 200px; background-color: pink; }.list{ overflow: hidden; margin-right: -10px;}.in{ float: left; width: 60px; height: 100px; background-color: lightgreen; margin-right: 10px;}
<div class="box"> <ul class="list"> <li class="in">1</li> <li class="in">2</li> <li class="in">3</li> </ul> </div>
【3】3列アダプティブレイアウト
真ん中の本体は2層ラベルを使用し、外側のf53d0ab49ed759632b82bf7db7f19aae は左右に 210px のマージン値を含む実際のメイン コンテンツです。左列と右列の両方で負のマージン値が使用されています。左列は左にフロートされ、margin-left は -100% です。これにより、左列がページの左側に正確に配置されます。右列は左にフロートし、サイズは独自の幅200pxです
html,body{ height: 100%;}body{ margin: 0;}.main{ width: 100%; height: 100%; float: left;}.main .in{ margin: 0 210px; background-color: pink; height: 100%;}.left,.right{ height: 100%; width: 200px; float: left; background-color: lightgreen;}.left{ margin-left: -100%;}.right{ margin-left: -200px;}
<body><div class="main"> <div class="in"></div></div><div class="left"></div><div class="right"></div></body>
[4] 3列の等高レイアウト
各列に大きな下パディングを設定し、negativeを使用します同じ値の外側のマージン この高さを削除してから、オーバーフローを設定します: 外側のコンテナーに非表示になります