CSSボックスモデルとは何ですか-CSSチュートリアル-php.cn

CSSボックスモデルとは何ですか

清浅

リリース： 2019-05-14 16:05:37

オリジナル

7943 人が閲覧しました

css ボックスモデルは、ボックスモデルとも呼ばれます。ボックスの最も内側の部分は、要素の実際のコンテンツ、つまり要素のコンテンツです。要素ボックスの外側の隣には内側のマージンがあり、その後にこのいくつかの部分が合わさってボックスモデルを形成します

ボックスモデルは HTML CSS の中核となる基礎知識です。この重要な概念を理解することによってのみ、より良い組版とより良い組版を行うことができます。ページレイアウト。以下にCSSボックスモデルに関する知識をまとめましたので、皆様のお役に立てれば幸いです。

CSSボックスモデルとは何ですか

1. CSS ボックスモデルの概念

CSS CSS ボックスモデルは、ボックスモデル (ボックスモデル) とも呼ばれ、次の内容を含みます。要素の内容 (コンテンツ)、パディング、ボーダー、マージン。図に示すように:

CSSボックスモデルとは何ですか

#図の最も内側のボックスは、要素の実際のコンテンツ、つまり要素ボックスです。要素ボックスのすぐ外側にあります。最初はパディング、次に境界線、そして最も外側の層は外側マージンであり、ボックスモデルを構成します。通常、設定する背景表示領域は、コンテンツ、パディング、境界線の範囲です。外側のマージンは透明であり、周囲の他の要素を妨げません。

すると、要素ボックスの合計幅 = 要素(要素)の幅、パディングの左右のマージンの値、マージンの左右のマージンの値、境界線の左右の幅;

Element ボックスの高さの合計 = 要素の高さパディングの上マージンと下マージンの値、マージンの上マージンと下マージンの値 +境界線の上下の幅。

2. CSS マージン結合 (オーバーレイ)

上下に隣接する 2 つの要素ボックスが縦に交わる場合、マージンがマージされ、マージンがマージされます。次の図に示すように、の高さは、結合された 2 つのマージンの高い方と等しくなります。

CSSボックスモデルとは何ですか

は比較的理解しやすいため、ページ上の実際の状況に遭遇した場合は、この要素を考慮する必要がある場合があります。もちろん、以下に示すように、余白を結合することにも意味があります。

CSSボックスモデルとは何ですか

通常のドキュメントではブロックボックスのみであることに注意してください。フローマージンのマージは垂直マージンでのみ発生します。インラインボックス、フローティングボックス、または絶対配置ボックス間のマージンはマージされません。

CSS リセットでもよく使用されます

* {
  margin : 0;
  padding : 0;
}

ログイン後にコピー

3. box-sizing 属性の概要

box-sizing 属性はユーザー内にありますInterface 属性 1 つは、この属性がボックスモデルに関連しており、CSS リセットで使用される可能性があるためです。

box-sizing : content-box|border-box|inherit;

ログイン後にコピー

(1) content-box (デフォルト値) を使用すると、設定された幅と高さの値を要素のコンテンツボックスに適用できます。ボックスの幅にはコンテンツのみが含まれます。

つまり、合計幅 = マージンボーダーパディング幅

(2) ボーダーボックス、設定された幅の値は、実際にはマージンを除いたボーダーパディング要素の合計幅です。ボックスの幅には、ボーダーパディングの内容が含まれます。

つまり、合計幅 = マージン幅

多くの CSS フレームワークは、ボックスモデルの計算方法を簡素化します。

#(3) 継承は、box-sizing 属性の値が親要素から継承される必要があることを規定します。

border-box の使用について:

1. ボックスの幅は 100% で、両側に内側のスペースが必要です。この時点ではそれを使用することをお勧めします。

2. 境界ボックスをグローバルに設定するのは非常に簡単です。良いです。まず第一に、それは直感的であり、第二に、時間を何度も節約できます。プラスマイナス、これには重要な役割もあります。それは、枠線のあるボックスで通常どおりパーセント幅を使用できるようにすることです。

4. 実際の開発で遭遇するフレームモデルに関連するアプリケーションと小さな問題。

1. マージンが範囲外です (最初の子要素の margin-top と最後の子要素の margin-bottom が範囲外です)

最初の子要素の margin-top の例を示します。

親要素に境界線がない場合、最初の子要素の margin-top 値を設定すると、margin-top 値は次のようになります。この現象に対する解決策は 4 つあります:

(1) 親要素にボーダーを追加する (副作用)

(2) パディング値を親要素 (副作用)

(3) 親要素は、overflow: hidden (副作用)

(4) 親要素は、生成するプレフィックスコンテンツを追加します。 (推奨)

4 番目の方法を例に挙げます:

.parent {     
width : 500px;     
height : 500px;     
background-color : red;       
}.parent : before {     
content : " ";     
display : table;}.child {     
width : 200px;    
 height : 200px;     
 background-color : green;     
 margin-top : 50px;}
<div class="parent">    
<div class="child"></div> </div>

ログイン後にコピー

2. ブラウザ間のボックスモデル。

(1) Mozilla ではデフォルトで ul タグにパディング値がありますが、IE ではマージンのみが値を持ちます。

(2) 標準ボックスモデルと IE モデルの違い:

標準ボックスモデルは上で紹介したものですが、IE モデルはボックスサイズ設定に似ています: border- box ; そのコンテンツの幅には、ボーダーとパディングも含まれます。解決策は、HTML テンプレートに doctype ステートメントを追加することです。

3. ボックスモデルを使用して三角形を描画する

<!DOCTYPE html><html>
  <head>
    <style>
        .triangle {
            width : 0;
            height: 0;
            border : 100px solid transparent;
            border-top : 100px solid blue; /*这里可以设置border的top、bottom、left、right
            四个方向的三角*/
        }
    </style>
  </head>
  <body>
    <div class="triangle"></div>
  </body></html>

ログイン後にコピー

页面显示结果为：

以上がCSSボックスモデルとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。