ホームページ > 記事 > ウェブフロントエンド > ボックスの理解 model_html/css_WEB-ITnose
ボックスの理解 model_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:22:181094ブラウズ
CSS の非常に重要な概念はボックス モデルです。CSS が Web ページを処理するとき、各要素はコンテンツ領域、コンテンツ領域の周囲のスペース (パディング、これは、パディング）、パディングの外側の端（境界線）、および要素を隣接する要素から分離する境界線の外側の非表示領域（マージン）で構成されます。以下に示すように、
ブラウザ内の要素の幅は、その width 属性値と一致しません (パディングとボーダーがない場合を除く)。 CSS の幅はパディング内のコンテンツ領域の幅を示しますが、ブラウザでの表示幅はコンテンツの幅、左右のパディング、左右の境界線の合計であり、表示の高さも同様です。
box-sizing:border-box; を使用すると、要素の表示幅は width 属性の値と等しくなります。コンテンツの幅、パディング、境界線が含まれます。下の図のように
CSS で設定された幅が大きくなったように見えますが、実際には CSS が変更されたのではなく、ブラウザの幅の計算が変更された例を見てみましょう。
<!DOCTYPE html><html><head> <title>Test</title> <link rel="stylesheet" type="text/css" href="css/test.css"></head><body> <div class="box"></div></body></html>
.box{ border: 20px solid rgb(255,189,200); padding: 20px; height: 100px; width: 100px; background: rgb(160,197,232);} 効果:
幅と高さは両方とも 180 ピクセル、つまり 20+20+100+20+20 = 180 ピクセルで、ボックスを追加するとコンテンツ領域も 100 ピクセルになります。 sizing:border-box:
幅と高さは 100px ですが、コンテンツ領域には 20px だけが残ります。つまり、100 - 20 - 20 - 20 - 20 = 20px
つまり、追加後box-sizing:border-box、ブラウザがCSSで設定する幅の計算方法は、border-left + padding-left + content + padding-right + border-rightの幅の合計となり、高さの計算方法は次のようになります。 : border-top + padding-top + content + padding-bottom + border-bottom の高さの合計
ボックスモデルでのボーダーの適用について:
小さな三角形の作成:
最終的な効果:
例:
rrree
<!DOCTYPE html><html><head> <title>Test</title> <link rel="stylesheet" type="text/css" href="css/test.css"></head><body> <div class="box"></div></body></html>
定義:
ボックスモデルでは、マージン、ボーダー、パディングを上、下、左、右の 4 つの部分に分割し、それぞれを個別に制御できます。パディングとコンテンツのサイズを 0 に設定し、境界線を一定の幅に設定すると、上に示したようなグラフが表示されます。パディングとコンテンツスペースが指定されている場合にフォームを試すこともできます:
.box{ border: 100px solid rgb(255,189,200);/* 使用:after伪类的时候可以不添加solid，使用content的内容可保证小三角出现 */ border-top-color: #333; border-left-color: #7fc; border-bottom-color: #f4c; height: 0px; width: 0px;}
Effect:
簡単なアプリケーション:
.box{ border: 100px solid rgb(255,189,200); border-top-color: #333; border-left-color: #7fc; border-bottom-color: #f4c; padding: 20px; /* 给予padding部分空间 */ height: 20px; /* 给予content部分空间 */ width: 20px;}
<!DOCTYPE html><html><head> <title>Test</title> <link rel="stylesheet" type="text/css" href="css/test.css"></head><body> <div class="box"> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </div></body></html>Effect:
上記はあくまでも個人的な大まかな理解が必要な場合は、質問して一緒に議論することができます。