このブログでは、CSSボックスモデルについてお話ししましょう。これは重要な概念です。皆さんにご理解いただければ幸いです。
1.ボックスモデルとは
最初にこのフォトフレームを見てみましょう。このフレームのフレームは境界線です。2つのフレーム間の距離はマージンであり、フレーム内の画像とフレームのフレーム間の距離はパディングです。
次に、GoogleChromeがもたらしたボックスモデルを見てみましょう。F12キーを押します。
ご覧のとおり、これはブラウザのボックスモデル表示です。
二、border
このフレームから始めて、この写真を使って説明しましょう
最初にこの元の写真を見てみましょう
元の画像は次のようになります。画像はdivボックスでラップされ、このdivの境界線が設定されます。
次に、ブラウザF12をクリックします。
この小さなマウスをクリックして、このページに移動します
これが選択されていることがわかります。次に、このdivが見つかります。
このボックスモデルに対するGoogleブラウザのサポートを確認できます
次に、このボックスモデルを分析します
真ん中が私たちのコンテンツです。このコンテンツは990 * 204を占めています。もちろん、これはサイズを設定しなかったためです。したがって、この990 * 204は変更されます。
ただし、どのように変更しても、この204は同じままです。この204の起源は、境界が2で画像が200であるため、200 + 2 * 2（上下の境界）です。 、長さもこのように計算します
もちろん、もっと重要なことは私たちの国境を見ることです
ご覧のとおり、このdivの境界線の幅は全体で2であるため、この幅を50にします。
一目でわかるように、画像の外側に境界線があり、境界線は50です
3、パディング
パディングはコンテンツと境界線の間の例を示しています。上の図も例として使用しています
divにpadding：50pxを設定しましょう。
ご覧のとおり、画像と境界線の間には多くのスペースがあります。これは50pxのパディングです。
もちろん、このように書くことができるだけでなく、このように書くこともできます
ご覧のとおり、パディングの割り当ては、右上、右下、左の順に実行されます。
第四に、マージン
マージンは外側のマージンを指し、具体的には要素と要素の間の例を指します。ここでは、2つのテキストボックスを使用して説明します
次に、このa1の値を設定し、マージンを20pxに設定します。
a1のdivブロックの周りにマージンボックスがあることがわかります。これは全体で20pxです。
証拠金の計算方法です。例を見てみましょう。
これを見てみましょう。論理的に言えば、a1のdivブロックの外側の境界線は20px離れている必要があり、下のa2の距離は上から10pxである必要があります。合計は30pxである必要があります。実際の効果を見てください。
これは間違いではありません、以下を見てください
それも正しいですが、実際には、BBBとAAAは30pxの例を示していませんが、20です。これは、マージンの上部または下部が大きい方に基づいており、小さい方がカバーされることを示しています。大きなもの、表示しない
5、父と息子のブロックマージン
このブロックとブロック間のネストを見てみましょう
ご覧のとおり、最外層にマージンがあるこのa1にマージンを設定してから、a2にマージントップを設定します。
このa2は、マージン設定の外側のdivブロックによって設定されていることがわかります。これは、ブロックの設定が親ブロックのコンテンツに基づいていることを意味します。
この記事のためにここでやめましょう。一生懸命練習してください。理解できない場合は、私にQQ：2100363119を追加してください。
最近、私のウェブサイトが公開され始めました。https：//www.lemon1234.comにアクセスしてください。