ボックスモデルのサイズの詳細な説明は、パディング、マージン、境界の値によって異なります。

ボックスモデルのサイズの詳細な説明は、パディング、マージン、境界の値によって異なります。

ボックス モデルは、要素ボックスの幅と高さ、パディング、境界線、余白のサイズを指定します。境界線の内側の空白はパディング、境界線の外側の空白はマージンです。以下に示すように、ボックスモデル要素ボックスの幅 = コンテンツ領域の幅 + 2 (パディング + マージン + 境界線)、つまり、この例の要素の幅は 170px です。CSS では、幅と高さはコンテンツ領域の幅と高さを指すことに注意してください。パディング、境界線、余白を大きくしてもコンテンツ領域のサイズには影響しませんが、要素のボックスの全体的なサイズは大きくなります。 (ブラウザで表示する場合は、コンソールF12を開いて対応する要素をクリックして表示することを忘れないでください)

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ボックス モデルのサイズは、パディング、マージン、境界の値によって決まります</title>
    <スタイル タイプ="text/css">
        div{
        パディング: 10px;/*パディング*/
        マージン: 20px;/*マージン*/
        マージン: 10px 20px 30px 40px;/*上 10px 右 20px 下 30px 左 40px*/
        margin: 10px 20px;/*上、下、左、右*/
        margin: 10px 20px ;/*上下は異なる、左右は同じ*/
        マージン: 10px 20px 30px;/*マージン*/
        境界線: 5px 赤実線;/*境界線*/
        width: 100px;/*コンテンツエリアの幅100*/
        height: 100px;/*コンテンツエリアの高さ 100*/
    }
    /*ボックスサイズ値 = 2 (パディング + 境界線 + マージン)*//*div のサイズ*/
    </スタイル>
</head>
<本文>
    <div>たくさんの本を読んでもスクリプト全体を学ぶことはできません。もっと練習が必要です。 </div>
</本文>
</html>

マージンであれパディングであれ、それらは時計回りに配置され、上、右、下、左に値が定義されます。たとえば、margin:10px 10px 10px 10pxは、ボックスの上、下、左、右に10pxのマージンが追加されることを意味します。つまり、margin:10px; marigin:10px 10px;上、下、左、右のマージンは10pxです。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>いわゆるバグのマージンが実は重なっているのですが、どう解決すればいいのでしょうか</title>
    <スタイル タイプ="text/css">
    .box1,.box2{
        幅: 200ピクセル;
        高さ: 200px;
        マージン: 10px 20px;
        背景色: 赤;
    }
    </スタイル>
</head>
<本文>
    <div class="box1">機能仕様に操作性が存在しない</div>
    <div class="box2">ソフトウェアは再利用する前に使用可能でなければなりません。 </div>
</本文>
</html>

通常の考え方では、上記のコードの 2 つのボックスの上下の間隔は 20px の隙間があるはずですが、実際にはコンソールで確認すると 10px しかなく、もう 10px は明らかに重なっています。2 つのボックスの margin 値を調整すると、上下の間隔が最大値の 20px を取ることがわかります (margin が等しい要素が最大値を取る)。 解決策: 1. float2 は要素構造 display: inline-block を変更します。また、margin がネストされている場合、つまり親子関係にある場合は、重なり合って隙間がないことがわかります。では、margin によって引き起こされるこれらの問題をどのように解決すればよいでしょうか。 解決策: ボックスに蓋がないため、両端をコンテンツで埋める方法を見つけます。border、padding、overflow: hidden を使用できます。 ボックス モデルは、その後の Web サイトのレイアウトにとって非常に重要であり、Web サイトの正確な配置に役立ちます。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>マージンによって発生するバグの解決</title>
    <スタイル タイプ="text/css">
    /* .box1,.box2{
        幅: 200ピクセル;
        高さ: 200px;
        背景色: 赤;
    } */
    /* .box1{
        マージン: 10px 20px;
    }
    .box2{
        マージン: 20px 10px;
    }
    .box3{
        マージン: 20px 10px;
    }
    .box4{
        マージン: 10px 20px;
    } */

    /* ボックスモデルのレベル設定によって発生する問題の解決策: 1. float 2. display: inline-block 3. 最大値を直接書き込んで、同じレベルで最大マージンを取る*/
    div{
        /* 浮動小数点数: 左; */
        表示: インラインブロック;
        幅: 1200ピクセル;
    }
   .box1{
        マージン: 10px 20px;
    }
    .box2{
        マージン: 80px 10px;
    }

    /* ボックス モデルの水平ネストによって発生する問題の解決方法: ボックスに蓋がないので、両端をコンテンツで埋める方法を見つけます。border、padding、overflow:hidden を使用できます。上部と下部をテキストで埋めます */
    p{
        幅: 800ピクセル;
    }
    .box3,.box4{
        マージン: 30px;
    }
    .box3{
        背景色: 緑;
        /* border:1px solid red*//*親要素に境界線を追加*/
        padding: 10px; /*親要素にパディングを追加*/
        /*overflow: hidden;*//*余分な部分を非表示にするには、overflow:hidden を追加します。これにより、余分な部分がすべて切り取られます*/
    }
    .box4{
        表示: ブロック;
        背景色: 緑黄色;
    }
    </スタイル>
</head>
<本文>
    <div class="box1">機能仕様に操作性が存在しない</div>
    <div class="box2">ソフトウェアは再利用する前に使用可能でなければなりません。 </div>
    <p class="box3">
        <!-- シンプルさは複雑さに先行するのではなく、複雑さの後に来ます。 -->
        <span class="box4">過去のコードはテストされていないコードです。 </span>
        <!-- 最初になるか、最高になるか -->
    </p>
</本文>
</html>

これで、ボックスモデルのサイズがパディング、マージン、ボーダーの値によってどのように変化するかについての説明は終わりです。パディング、マージン、ボーダーの値の詳細については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  Linux ドライバ開発でよく使われる関数 copy_from_user open read write の詳細な説明

>>:  Nodejs プラグインと使用方法の概要

推薦する

MySQL は ACID トランザクションをどのように実装しますか?

序文最近、面接中に、MySQL の InnoDB エンジンがどのようにトランザクションを実装している...

HTML の blockquote タグの使用と美化

ブロック引用の定義と使用法<blockquote> タグは引用ブロックを定義します。 &...

MySQL のロックとトランザクションの簡単な分析

MySQL 自体はファイルシステムに基づいて開発されましたが、ロックの存在が異なります。データベース...

Vueのprops設定の詳細な説明

<テンプレート> <div class="demo">...

MySqlサブクエリINの実装と最適化

目次IN が遅いのはなぜですか? INとEXISTSのどちらが速いでしょうか?効率を向上させるにはど...

MySQL インデックスの使用方法 (単一列インデックスと複数列インデックス)

1. 単一列インデックスどの列にインデックスを作成するかを選択することは、パフォーマンス最適化プロ...

LeetCode の SQL 実装 (197. 気温上昇)

[LeetCode] 197.気温上昇Weather テーブルが指定されている場合、前の日付 (昨...

Vue-cliはプロジェクトを作成し、プロジェクト構造を分析します

目次1. ディレクトリを入力してプロジェクトを作成する2. 必要な設定項目を選択します2.1 Vue...

Vue CLI のモードと環境変数の詳細な説明

序文実際のプロジェクトの開発では、通常、プロジェクト開発フェーズ、テストフェーズ、最終オンラインフェ...

CentOS8でのnmcliの使い方の詳しい説明

RHEL8/CentOS8 に基づく一般的な nmcli コマンド # IP を表示する (ifco...

ブラウザの自動フォーム入力によるウェブページのスタイル損失の原因の分析と解決

バックエンドからフロントエンドまで、なんと悲劇なのでしょう。他の人の CSS を自分の jsp We...

子コンポーネントを通じて親コンポーネントのプロパティを変更するための Vue のさまざまな実装方法

目次序文一般的な方法1. 親コンポーネントを介して子コンポーネントの発行イベントをリッスンしてpro...

MySQL での varchar 型の日付の比較、並べ替え、その他の操作の実装

MySQL を使用する場合、日付は通常、datetime や timestamp などの形式で保存さ...

win10でのmysql5.7.21解凍バージョンのインストールチュートリアル

次のように、Win10でMysqlの解凍バージョンをインストールします。環境: win10 64ビッ...