CSS_html/css_WEB-ITnose の負のマージン値についての深い理解-htmlチュートリアル-php.cn

CSS_html/css_WEB-ITnose の負のマージン値についての深い理解

WBOY

リリース： 2016-06-24 11:22:57

オリジナル

1353 人が閲覧しました

× ディレクトリ [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層ラベルを使用し、外側のは左右に 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を使用します同じ値の外側のマージンこの高さを削除してから、オーバーフローを設定します: 外側のコンテナーに非表示になります

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

CSS_html/css_WEB-ITnose の負のマージン値についての深い理解

上記の通り