CSS ボックス モデルには 2 つのタイプがあります: 1. W3c 標準ボックス モデル (標準ボックス モデル)、幅と高さはコンテンツ領域の幅と高さを指します; 2. IE 標準ボックス モデル (奇妙なボックス モデル)、幅と高さは、コンテンツ領域、境界線、およびパディングの幅と高さの合計を指します。
このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
CSS ボックス モデルは、Web デザインでよく使用される CSS テクノロジーで使用される思考モデルです。ボックス モデルは、パディング、ボーダー、マージン、実際のコンテンツなどの要素をレイアウトするために使用できます。
ボックス内には、幅、高さ、パディング、境界線、マージンの 5 つの主な属性のみがあります。次のように:
ボックス モデルの概略図:
コードのデモ:
上のボックス、幅:200px;高さ:200px; しかし、実際に占有される幅と高さは 302*302 です。これは、パディングとボーダーを追加する必要があるためです。
注: 幅と実際の占有幅は同じ概念ではありません。 以下の例を見てください。
ボックス モデルは 2 つのタイプに分かれています:
1 つ目は W3c 標準ボックス モデル (標準) box Model)
IE 標準ボックス モデル 2 つ目 (奇妙なボックス モデル)
これまでに学んだ知識では、標準ボックスモデルをベースにしています。
標準ボックス モデル:
IE ボックス モデル:
上の図shows :
CSS ボックス モデル (ボックス モデル) では、要素を処理するためのいくつかの方法が規定されています:
CSS ボックス モデルと IE ボックス モデルの違い:
標準ボックス モデル、幅と高さは、コンテンツ領域 の幅と高さを指します。パディング、境界線、余白を増やしてもコンテンツ領域のサイズには影響しませんが、要素のボックス全体のサイズは大きくなります。
#IE ボックス モデル # では、幅と高さはコンテンツ領域の境界パディングを指します幅と高さ。
タグにもマージンがあります タグは強調する必要があります。多くの人は、 タグがページ全体の領域全体を占めると考えています。これは実際には間違いです。正しい理解は次のとおりです。Web ページ全体の最大のボックスは です。 、ブラウザです。そして は の息子です。ブラウザによって に指定されるデフォルトの余白サイズは 8 ピクセルです。このとき、 はページ全体の大きな領域を占めます。エリア全体。コードの一部を見てみましょう。 <!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>
.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的区域有背景颜色，css2.1前提下，并且背景颜色一定和内容区域的相同。也就是说，background-color将填充所有border以内的区域。
效果如下：
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 サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
