ホームページ > 記事 > ウェブフロントエンド > CSSボックスモデルは何種類ありますか？
CSSボックスモデルは何種類ありますか？
- 青灯夜游オリジナル
- 2021-10-12 16:08:3916138ブラウズ
CSS ボックス モデルには 2 つのタイプがあります: 1. W3c 標準ボックス モデル (標準ボックス モデル)、幅と高さはコンテンツ領域の幅と高さを指します; 2. IE 標準ボックス モデル (奇妙なボックス モデル)、幅と高さは、コンテンツ領域、境界線、およびパディングの幅と高さの合計を指します。
このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
ボックス モデル
CSS ボックス モデルは、Web デザインでよく使用される CSS テクノロジーで使用される思考モデルです。ボックス モデルは、パディング、ボーダー、マージン、実際のコンテンツなどの要素をレイアウトするために使用できます。
ボックス内の領域
ボックス内には、幅、高さ、パディング、境界線、マージンの 5 つの主な属性のみがあります。次のように:
- 幅と高さ: コンテンツの幅と高さ (ボックスの幅と高さではありません)。
- パディング: パディング。
- 境界線: 境界線。
- マージン: マージン。
ボックス モデルの概略図:
コードのデモ:
上のボックス、幅:200px;高さ:200px; しかし、実際に占有される幅と高さは 302*302 です。これは、パディングとボーダーを追加する必要があるためです。
注: 幅と実際の占有幅は同じ概念ではありません。 以下の例を見てください。
標準ボックス モデルと IE ボックス モデル
ボックス モデルは 2 つのタイプに分かれています:
1 つ目は W3c 標準ボックス モデル (標準) box Model)
IE 標準ボックス モデル 2 つ目 (奇妙なボックス モデル)
これまでに学んだ知識では、標準ボックスモデルをベースにしています。
標準ボックス モデル:
IE ボックス モデル:
上の図shows :
CSS ボックス モデル (ボックス モデル) では、要素を処理するためのいくつかの方法が規定されています:
- 幅と高さ: コンテンツの幅と高さ (ボックスの幅と高さではありません)。
- パディング: パディング。
- 境界線: 境界線。
- マージン: マージン。
CSS ボックス モデルと IE ボックス モデルの違い:
標準ボックス モデル、幅と高さは、コンテンツ領域 の幅と高さを指します。パディング、境界線、余白を増やしてもコンテンツ領域のサイズには影響しませんが、要素のボックス全体のサイズは大きくなります。
#IE ボックス モデル # では、幅と高さはコンテンツ領域の境界パディングを指します幅と高さ。
6c04bd5ca3fcae76e30b72ad730ca86d タグにもマージンがあります
6c04bd5ca3fcae76e30b72ad730ca86d タグは強調する必要があります。多くの人は、6c04bd5ca3fcae76e30b72ad730ca86d タグがページ全体の領域全体を占めると考えています。これは実際には間違いです。正しい理解は次のとおりです。Web ページ全体の最大のボックスは です。 58eebec08cc088eaaf832662bdba8683、ブラウザです。そして 6c04bd5ca3fcae76e30b72ad730ca86d は 58eebec08cc088eaaf832662bdba8683 の息子です。ブラウザによって 6c04bd5ca3fcae76e30b72ad730ca86d に指定されるデフォルトの余白サイズは 8 ピクセルです。このとき、6c04bd5ca3fcae76e30b72ad730ca86d はページ全体の大きな領域を占めます。エリア全体。コードの一部を見てみましょう。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
border: 1px solid red;
padding: 20px;
margin: 30px;
}
</style>
</head>
<body>
<div>有生之年</div>
<div>狭路相逢</div>
</body>
</html>上記のコードでは、div タグにマージンなどの情報を設定しています。 Google Chrome を開き、F12 を押したままにします。表示効果は次のとおりです:
.box1{
width: 100px;
height: 100px;
padding: 100px;
border: 1px solid red;
}
盒子2：
.box2{
width: 250px;
height: 250px;
padding: 25px;
border: 1px solid red;
}
真实占有宽度 = 左border + 左padding + width + 右padding + 右border
上面这两个盒子的盒模型图如下：
如果想保持一个盒子的真实占有宽度不变，那么加width的时候就要减padding。加padding的时候就要减width。因为盒子变胖了是灾难性的，这会把别的盒子挤下去。
认识padding
padding区域也有颜色
padding就是内边距。padding的区域有背景颜色，css2.1前提下，并且背景颜色一定和内容区域的相同。也就是说，background-color将填充所有border以内的区域。
效果如下：
padding有四个方向
padding是4个方向的，所以我们能够分别描述4个方向的padding。
方法有两种，第一种写小属性；第二种写综合属性，用空格隔开。
小属性的写法：
padding-top: 30px; padding-right: 20px; padding-bottom: 40px; padding-left: 100px;
综合属性的写法：(上、右、下、左)（顺时针方向，用空格隔开。margin的道理也是一样的）
padding:30px 20px 40px 100px;
如果写了四个值，则顺序为：上、右、下、左。
如果只写了三个值，则顺序为：上、右、下。??和右一样。
如果只写了两个值，比如说：
padding: 30px 40px;
则顺序等价于：30px 40px 30px 40px;
要懂得，用小属性层叠大属性。比如：
padding: 20px; padding-left: 30px;
上面的padding对应盒子模型为：
下面的写法：
padding-left: 30px; padding: 20px;
第一行的小属性无效，因为被第二行的大属性层叠掉了。
（学习视频分享：css视频教程）
以上がCSSボックスモデルは何種類ありますか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。