一文搞懂盒子模型定义特点使用场景

CSS盒子模型

是指在网页布局中，每个元素都被看作一个矩形的盒子，这个盒子包括内容区域、内边距（padding）、边框（border）和外边距（margin）。这些部分组成了元素的总宽度和总高度。

让我们来举一个简单的例子，详细解释盒子模型的各个部分：

假设我们有一个 div 元素，其 CSS 样式如下：

css 复制代码

cssCopy Code
div {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 2px solid black;
  margin: 10px;
}

现在让我们解释这个盒子模型：

内容区域（Content） ：
- 这是指 div 元素内部的区域，它的宽度是 200px - 2*20px - 2*2px = 156px，高度是 100px - 2*20px - 2*2px = 56px。即内容区域的宽度和高度等于指定的宽度和高度减去内边距和边框的宽度。
内边距（Padding） ：
- 内边距是指内容区域和边框之间的空白区域，它的宽度是 20px，高度也是 20px。因此，实际内容区域的大小是减去内边距后的大小。
边框（Border） ：
- 边框是围绕在内容和内边距外部的线条，它的宽度是 2px，颜色为黑色。
外边距（Margin） ：
- 外边距是元素边框外部的空白区域，它的宽度是 10px。外边距会影响元素与其它元素之间的间距。

总结一下，这个 div 元素的总宽度和总高度可以计算如下：总宽度：200px + 2*20px + 2*2px + 2*10px = 256px 总高度：100px + 2*20px + 2*2px + 2*10px = 136px

CSS 盒模型的使用场景：

定义元素的尺寸和布局：通过调整内容区域、内边距、边框和外边距的大小，可以控制元素在页面中的布局和尺寸。
控制元素之间的间距：利用外边距可以调整元素之间的间距，实现页面布局的灵活性。
为元素添加装饰效果：通过设置边框属性，可以为元素添加分隔线、圆角等装饰效果。

CSS 盒模型的二种模型：

标准盒子模型：
- 在标准盒子模型中，元素的宽度和高度只包括内容区域，不包括内边距、边框和外边距。这意味着指定的宽度和高度就是内容区域的宽度和高度。
怪异盒子模型（IE盒子模型）：
- 在怪异盒子模型中，元素的宽度和高度包括了内容区域、内边距和边框，但不包括外边距。这意味着指定的宽度和高度包括了内边距和边框，而外边距则会在元素与其他元素之间产生间距。

使用 box-sizing 属性来设置盒子模型类型：

border-box：怪异盒子模型；
content-box标准盒子模型。

border-box(怪异盒子模型）：元素的宽度和高度包括内容、边框和填充，即将边框和填充计算在内。这样设置后，设置的宽度和高度就是最终显示的大小，边框和填充不会撑开元素。
- 当你希望指定的宽度和高度值包括内边距和边框时，可以使用 border-box。这意味着元素的实际宽度和高度将包括内容、内边距和边框，而外边距则会被添加到它的外部。
- 这种盒子模型在处理布局时更为方便，尤其是当你需要控制元素的固定宽度或高度，并且希望内边距和边框不会增加元素的尺寸时。
- 举例来说，如果你希望一个元素的总宽度为200px，且内边距为10px，边框为2px，你可以这样设置：
  css 复制代码
```
.box {
  width: 200px;
  padding: 10px;
  border: 2px solid black;
  box-sizing: border-box;
}
```
！！！：注意，box-sizing 属性是可继承的，所以如果要对页面上所有元素都应用该属性，可以将其设置在顶层的父元素上，或者使用全局选择器设置。
css 复制代码
```
* {  
  box-sizing: border-box;
  }
```
content-box（标准盒子模型）：元素的宽度和高度只包括内容区域，不包括边框和填充。也就是说，设置了宽度和高度的元素，实际显示的大小会比设置的值要大。
- 当你希望指定的宽度和高度值仅包括内容区域时，可以使用 content-box。这意味着元素的实际宽度和高度将仅包括内容，而内边距、边框和外边距都会增加元素的尺寸。
- 这种盒子模型是CSS的默认模型，在某些情况下，特别是在需要考虑元素的外边距合并时，可能更为合适。
- 举例来说，如果你希望一个元素的内容区域宽度为200px，且希望内边距和边框额外增加元素的尺寸，你可以这样设置：
  css 复制代码
```
cssCopy Code
.box {
  width: 200px;
  padding: 10px;
  border: 2px solid black;
  box-sizing: content-box;
}
```

总的来说，选择何种盒子模型取决于你的布局需求和个人偏好。

一文搞懂盒子模型 定义 特点 使用场景

一文搞懂盒子模型定义特点使用场景