いわゆるボックスモデルは、実際には要素をボックスとして扱い、要素内のテキストがボックスのコンテンツです。
要素の特殊効果に応じて、ボックスモデルの特殊効果も異なります。
1. ブロックレベルの要素（ブロック）
いわゆるブロックレベルの要素です。要素のサイズを設定でき、他の要素を分離する機能を持つもの (
など)
2. いわゆるインライン要素は要素のサイズを設定できません。コンテンツに適応することしかできず、他の要素を分離することはできません。たとえば、、、その他のテキスト要素。
3. インラインブロック要素 (インラインブロック)
いわゆるインラインブロック要素は要素のサイズを設定できますが、他の要素を分離することはできません。たとえば、。
4. 隠し要素
隠し属性が設定された要素。
これらの分離を理解した後、対応する属性を学習できます。実際、これらの属性はボックス上の操作と見なすことができます。
1.要素のサイズ
要素のサイズの設定は、端的に言えばボックスのサイズの設定です。上記の分類の説明によれば、次の属性が使用できます。
| 値 | 説明 | CSSバージョン | |
| auto、length値またはパーセンテージ | 要素の幅を設定 | 1 | |
| auto、length値またはパーセンテージ | を設定します要素の高さ | 1 | |
| auto、長さの値またはパーセンテージ | 要素の最小幅を設定 | 2 | |
| auto、length 値またはパーセンテージ | 要素の最小の高さを設定します | 2 | |
| auto、長さの値またはパーセント | 要素の最大幅を設定します | 2 | |
| auto、length value またはパーセント | 要素の最大の高さを設定します | 2 |
div { width: 200px; height: 200px;}
説明: 要素の固定サイズを設定します。
div { min-width: 100px; min-height: 100px; max-width: 300px; max-height: 300px;}
説明: このグループは主に、要素のサイズが動的に増加または減少し、それによって最大値と最小値が制限される可能性があるという問題を扱います。
div { width: auto; height: auto; }
説明: auto はデフォルト値 ()、auto では幅が 100% の値、auto では高さが適応されます。
<div id="a"> <div id="b">scolia</div></div>
#a { background: silver; width: 200px; height: 200px; } #b { background: gray; width: 80%; height: 80%; }説明: パーセントは、親要素の長さを基準にして測定されます。
注: 要素のサイズが、よく知られた長さと幅ではなく、幅と高さで表されるのはなぜですか? Web ページは画面上に表示され、最初はモバイル デバイスがなかったときはすべてモニターだったからです。デスクトップに置くと、平らな面に立っているように見えます。そこで高さと幅で表すようになりました。
2.要素のパディング
CSS ボックス モデルでは、要素の内側の端にパディングと呼ばれるパディングのサイズを設定できます。
| 値 | 説明 | CSSバージョン | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 長さの値またはパーセンテージ | 上部パディングの設定 | 1 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 長さの値またはパーセンテージ | 下のパディングを設定します | 1 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 長さの値またはパーセンテージ | 左のパディングを設定します | 1 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 長さの値またはパーセンテージ | 右パディング設定 | 1 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 1 ~ 4 の長さの値またはパーセンテージ | 短縮属性 | 1 |
| 属性 | 值 | 说明 | CSS 版本 |
| margin-top | 长度值或百分比 | 设置顶部内边距 | 1 |
| margin-bottom | 长度值或百分比 | 设置底部内边距 | 1 |
| margin-left | 长度值或百分比 | 设置左边内边距 | 1 |
| margin-right | 长度值或百分比 | 设置右边内边距 | 1 |
| margin | 1 ~ 4 长度值或百分比 | 简写属性 | 1 |
注意：其使用特性和外边距一样，这里就不再重复说明。
四．处理溢出
当设置了元素固定尺寸且内容过大时，就会出现溢出的问题。其实就是我们规定了盒子的大小以后，要装的东西太多，而盒子又装不下时，东西就会满出来。而满出来的行为是怎么样的，我们可以进行设置。
溢出主要朝两个方向：右侧和底部。我们可以通过 overflow 系列样式来控制它。
| 属性 | 值 | 说明 | CSS 版本 |
| overflow-x | 溢出值 | 设置水平方向的溢出 | 3 |
| overflow-y | 溢出值 | 设置垂直方向的溢出 | 3 |
| overflow | 溢出值 | 简写属性 | 2 |
溢出处理主要有四种处理值：
| 值 | 说明 |
| auto | 浏览器自行处理溢出内容。如果有溢出内容，就显示滚动条，否则就不显示滚动条 |
| hidden | 如果有溢出的内容，直接剪掉 |
| scroll | 不管是否溢出，都会出现滚动条。但不同平台和浏览器显示方式不同 |
| visible | 默认值，不管是否溢出，都显示内容 |
div { overflow-x: auto; }
总结：可以看出溢出处理的逻辑是，先确定从溢出的方向，再确定对溢出的部分怎么处理。
五.元素的可见性
我们在按特性对元素分类的时候，还剩下一个隐藏元素没有解释清楚，所谓的设置了隐藏属性的元素中的隐藏属性就是我们接下来要说的。
| 属性 | 值 | 说明 | css版本 |
| visibility | visible | 默认值，元素在页面上可见 | 2 |
| hidden | 元素不可见，但会占据空间 | 2 | |
| collapse | 元素不可见，隐藏表格的行与列，如果不是表格，则和hidden一样 | 2 |
div { visibility: hidden; }
解释：设置元素隐藏，但占位，也就是该元素的分组效果依然会存在。
table tr:first-child { visibility: collapse; };
解释：隐藏表格的行或列，但不占位，支持度一般。
六.元素类型转换
我们按元素的特性对其进行了分类，但其实可以使其转换，从而实现别的元素的特性。
| 属性 | 值 | 说明 | CSS 版本 |
| display | block | 盒子为块级元素 | 1 |
| inline | 盒子为行内元素 | 1 | |
| inline-block | 盒子为行内-块元素 | 2 | |
| none | 盒子不可见，不占位 | 1 |
span { background: silver; width: 200px; height: 200px; display: block; }
解释：将行内元素转成块级元素，原来无效的属性也可以使用了，其他就不再演示了。
七.元素的浮动
我们一直在二维空间中设置元素的盒模型，但其实可以将元素向上浮动一层，注意是一层。
| 属性 | 值 | 说明 | CSS 版本 |
| float | left | 浮动元素靠左 | 1 |
| right | 浮动元素靠右 | 1 | |
| none | 禁用浮动 | 1 |
那么，上浮一层是什么意思？
这就需要一定的空间思维能力的，如果我们将同一层的元素都当成是一张张的小卡片，一般情况下，他们都放在地面上，都在同一层，按着一定的顺序排列。这时，上浮一层，就相当于与你将卡片拿起来，然后在用一块玻璃将地方的卡片压住，在将拿去来的卡片放在玻璃上。但浮动还不仅仅做了这个动作，当你把一种卡片拿走以后，卡片原来占有的位置就会被剩下的卡片挤掉。如果此时你将卡片放在玻璃上的话，必然会遮挡住下面那层的卡片，为了解决遮挡的问题，又有下面的属性可用。
| 属性 | 值 | 说明 | CSS 版本 |
| clear | none | 允许两边均可浮动 | 1 |
| left | 左边界不得浮动 | 1 | |
| right | 右边界不得浮动 | 1 | |
| both | 两边都不得浮动 | 1 |
#c { clear: both; }
解释：方法其实是一种非常强硬的方法，既然浮动会造成遮挡的话，那就不允许浮动就好了。
但是还有一种比较取巧的方法，那就对被遮挡的元素进行外边距的设置，既然惹不起，那总躲得起吧。
总结：
下面总有了盒模型内容有哪些：
1.设置元素尺寸
2.内边距
3.外边距
4.尺寸固定后的溢出处理
6.隐藏元素
7.类型转换
8.元素浮动
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
