CSS でフロートとマージンを混合するサンプルコード

最近の勉強で、GitHub でレイアウトの練習をいくつか見つけたのですが、レイアウトにまったく慣れていない（とても不安）ことに気づきました。

これまでの勉強では、各属性の機能さえ覚えておけば CSS を使っても大丈夫だと感じていたのですが、実際はどうなのでしょうか?本当に恥ずかしいです。これ以上は言いません、悲しすぎるので、本題に入りましょう！

最近、フロートレイアウトとマージンレイアウトに取り組んでおり、これら 2 つを一緒に使用する方法についての理解が深まりました。（新入生は見ることができますが、専門家は無視してください）

floatプロパティ

float: 左 | 右 | なし | 継承

もちろん、最もよく使われるのは最初の2つ、左フローティングと右フローティングです。

フローティングの最も重要な機能：ラベルの削除。

これは標準的なフローから外れ、より高度なレベルで、親要素と後続の要素のレイアウトに影響します。ここでは詳細には触れません。

マージンプロパティ

ここでは主にmargin-leftとmargin-rightについてお話します

margin-left: 要素の左余白を設定します。
margin-right: 要素の右余白を設定します。

一般的に、これら 2 つの属性の文字通りの意味を理解するのは簡単ですが、単純なものほど、過小評価すべきではありません。

要点

次のコード:

html:

<div class="box">
    <div class="zi_box1">1</div>
    <div class="zi_box2">2</div>
    <div class="zi_box3">3</div>
    <div class="clear"></div>
</div>

CS: ...

。箱 {
            背景色: #555555;
            幅: 600ピクセル;
            高さ: 200px;
        }
        .zi_box1 {
            フロート: 左;
            背景色: #c23232;
            幅: 200ピクセル;
            高さ: 100px;
        }
        .zi_box2 {
            フロート: 左;
            背景色:シャルトリューズ;
            幅: 200ピクセル;
            高さ: 100px;
        }

        .zi_box3 {
            フロート: 左;
            背景色: 青;
            幅: 200ピクセル;
            高さ: 100px;
        }
        。クリア {
            クリア: 両方;
        }

最終的な効果図:

3 つの子ボックスは親ボックスを埋めますが、その幅は親ボックス内で拡張できます。

親ボックスを展開できない場合はどうなりますか?

サブボックスの幅を広げる（ボックス番号3）

zi_box3 {
    幅: 300ピクセル;
}

効果図は以下のとおりです。

次に、3 番目のボックスが別の行で始まります。

マージンと組み合わせて使用する場合

最初のコードに基づいてマージン値を追加します

zi_box1 {
    左マージン: 20px;
}

このとき、3 つのボックスの幅に余白値を加えた値が親ボックスの幅よりも大きいため、ボックス 3 で新しい行が始まります。

逆に、ボックス 3 にマージン値を設定し、ボックス 1 とボックス 2 にマージンを設定しない場合、ボックス 3 も別の行で始まりますか?答えは「はい」です。幅が親ボックスの値を超えているためです。

3列レイアウトの実装

DOM の順序を変更せずに、ボックス 3、ボックス 1、ボックス 2 の順序を作成するにはどうすればよいでしょうか? margin属性を最大限に活用できますか？最初はバカでした（レイアウトの練習はほとんどしないので、批判しないでください、私はただの初心者です）

バカコード

.zi_box1 {
     左マージン: 200px;       
}
.zi_box2 {
     左マージン: 200px;       
}

.zi_box3 {
     margin0left: -400px;
}
//各要素が独立して動作すると考えるのは単純な考えです

効果図は次のように書きます。

その時は、これは一体何なのかと驚きました。

しかし、最終的な調査で、その理由が分かりました。最も重要なのは、DOM の実行順序です。

その理由は、ボックス 1 が最初に解析され、margin-left: 200px なので、ボックス 3 は 2 行目に移動します。次にボックス 2 が解析され、margin-left: 200px なので、ボックス 2 も 2 行目に移動します。これは、1 行目がすでに 600px の幅であるためです。最後に、ボックス 3 (margin-left: -400px) を分析します。ボックスは 400px 前方に移動し、次の効果が得られます。

このように考えるということは、全体像ではなく全体像を考慮することを意味します。

3列レイアウトを実装する最終コード

.zi_box1 {
     左マージン: 200px;       
}
.zi_box2 {
     左マージン: 0px;      
}

.zi_box3 {
     マージン0左: -600px;
}

レンダリング

簡単に言えばこうだ

ボックス1が右に200ピクセル移動すると、ボックス2とボックス3も右に200ピクセル移動します。具体的な効果の図は次のとおりです。

では、ボックス3が前面に移動する場合、600pxの距離が必要ですか？（分かりやすいと思いませんか？笑）もちろん、これは私の部分的な理解に過ぎず、完全に正しいわけではありません。

すると、float: right と margin-right は同じになります。

要約する

CSS の float と margin の混合使用に関するこの記事はこれで終わりです。CSS の float と margin の混合使用に関する関連コンテンツをさらにご覧になりたい場合は、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: Node-Redを使用してMySQLデータベースに接続する方法

>>: JavaScript Three.js でテキストを作成する最初の経験