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

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

ボックス モデルは、要素ボックスの幅と高さ、パディング、境界線、余白のサイズを指定します。境界線の内側の空白はパディング、境界線の外側の空白はマージンです。以下に示すように、ボックスモデル要素ボックスの幅 = コンテンツ領域の幅 + 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 プラグインと使用方法の概要

推薦する

Vueはユーザーログインとトークン検証を実装します

フロントエンドとバックエンドを完全に分離する場合、Vue プロジェクトでトークン検証を実装する一般的...

Vue 構成リクエストの複数サーバーソリューションの詳細な説明

1. 解決策1.1 インターフェースコンテキストパスの説明2 つのバックエンド インターフェイス サ...

AngularとIonicのライフサイクルとフック関数を素早く理解するための記事

目次角度成し遂げる呼び出し順序知らせイオニックionic はページのライフサイクルをどのように処理し...

廃止された Docker は Podman に置き換えられますか?

Kubernetes チームは最近、最新バージョンの Docker でサポートされている機能を廃止...

ウェブデザイン必携ハンドブック 216 ウェブセーフカラー

Web ページ上の色の表現は、さまざまな要因によって影響を受けます。Web ページで非常に美しい配色...

Nginx でアクセス頻度、ダウンロード速度、同時接続数を制限する方法

1. アクセス頻度、同時接続、ダウンロード速度を制限するために使用されるモジュールと命令の概要ngx...

mysql5.6 マスタースレーブ設定と非同期の問題の詳細な説明

目次1. MySQL マスタースレーブレプリケーションの原理2. MySQLのコンパイルとインストー...

CocosCreatorゲームにおける魚群アルゴリズムの詳細な説明

序文最近CocosCreatorを学びたいと思ったので、エディターをダウンロードして起動しました。誰...

React antdはフォームの動的な増減を実現します

以前、動的フォームを記述しているときに落とし穴に遭遇しました。インデックスの添え字をキーとして使用す...

Dockerイメージの作成、保存、読み込み方法

イメージを作成する方法は 3 つあります。既存のイメージに基づいてコンテナを作成する、ローカル テン...

Vue での mixin の応用について議論する

Mixin は、再利用可能な機能を Vue コンポーネント間で分散する非常に柔軟な方法を提供します。...

CSS で画像アダプティブ コンテナを実装するいくつかの方法 (要約)

多くの場合、画像をコンテナのサイズに合わせて調整する必要があります。 1. imgタグ方式幅と高さを...

mysql5.7のインストールとNavicateの長期無料利用の実施手順

(I) mysql5.7のインストール: ❀詳細:無料のグリーンバージョン5.7のインストール方法は...

フロントエンドとバックエンドを分離した nginx 構成を展開するための完全な手順

序文決まり文句です。ここでは、フロントエンドとバックエンドの分離についての私の理解についてお話ししま...