CSS 盒模型基于一对基本的概念——内部显示类型和外部显示类型，都是通过display属性来指定。
外部显示类型决定盒子是块级还是内联，内部显示类型决定盒子内部的元素如何布局。本文的 CSS 盒模型就是总结其外部显示类型。
1.块级盒子和内联盒子
CSS中所有元素都被视为盒子，这些盒子分为两类——块级盒子（Block Box）和内联盒子（Inline Box）。这两类盒子在页面流和元素之间的关系方面表现出不同的行为。�
1.1 块级盒子�
一个元素被定义为块级元素，会表现出以下行为：
- 每个盒子都单独占据一行。
width和height属性可以发挥作用。- 内边距、外边距和边框会占据空间。
- 盒子会在内联方向上扩展，并占据父容器在该方向上的所有可用空间。 ```html
这是一行文字
这是一行文字
<a name="KS6gn"></a>### 1.1.1 内联方向扩展�内联方向上盒子的宽度、内边距、边框和外边距的和必须等于父盒子的宽度，即满足下列等式：<br /><br />其中、和不指定，则默认为`auto`，、、和不指定，则默认为`0px`。�<br />如果不满足，浏览器会调整子盒子的`width`、`margin-left`和`margin-right`，尽最大可能满足等式。注意是“尽最大可能”，但并不保证一定能调整成功！�<br />下面是一个最基本的内联扩展的示例：�```html<style>.parent {width: 800px;height: 200px;border: 10px solid red;}.child {width: 200px;height: 200px;background-color: green;}</style><body><div class="parent"><div class="child"></div></div></body>
借助开发者工具可以发现，根据代码的定义，子盒子只在父盒子内联方向上占据200px的位置，但是浏览器却自动将子盒子的margin-right调整为了600px。�
上面例子中，子盒子显式指定了width，没有指定外边距，而浏览器为其调整了margin-right的值，这涉及width、margin-left和margin-right三项间的调整规律，但是规律很复杂，这里仅列出一个常用技巧，子盒子居中：�
1.2 内联盒子�
一个元素被定义为块级元素，会表现出以下行为：
- 盒子不会独占一行。
width和height属性将不起作用。- 垂直方向的内边距、外边距以及边框会被应用，但是不会把其他内联盒子推开。
- 水平方向的内边距、外边距以及边框会被应用，且会把其他内联盒子推开。 ```html
这是一段长长长长长长长长长长的文字
这是一段文字
这是另一段文字
这是一段文字
这是一段长长长长长长长长长长的文字
<a name="keBeP"></a>
# 2.盒模型
CSS盒模型由以下四个部分组成：
- Content（内容）：这个区域是用来显示内容，大小可以通过设置`width`和`height`。
- Padding（内边距）：包围在内容区域外部的空白区域，大小通过`padding`相关属性设置。
- Border（边框）：边框包裹内容和内边距，大小通过`border`相关属性设置。
- Margin（外边距）：这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过`margin`相关属性设置。
<a name="IejzQ"></a>
## 2.1 标准盒模型�
在标准盒模型中，盒子的大小由内容、内边距和边框共通决定，`width`和`height`描述的是内容区的大小。�<br /><br />假设定义了如下盒子：�
```css
.box {
width: 350px;
height: 150px;
margin: 25px;
padding: 25px;
border: 5px solid black;
}
那么盒子的总宽度就是410px（即350+25+25+5+5），高度为210px（即150+25+25+5+5）。�
2.2 替代盒模型
替代盒模型是也叫IE盒模型，是IE浏览器使用的盒模型，后被加入CSS3当中。
替代盒模型的宽高即可见宽高，即width和height包括边框、内边距和内容，内容区宽高等于可见宽高减去边框和内边距。
默认浏览器会使用标准模型。如果需要使用替代模型，可以为盒子设置 box-sizing: border-box 来转换。
同样对于上面的例子，盒子的总宽度就是width: 350px;的宽度，盒子的总高度就是height: 150px;的高度。一般来说，相同width和height的盒子，使用替代盒模型的盒子通常要比使用标准盒模型的盒子大。
3.外边距折叠
3.1 父子外边距折叠
父子外边距会在以下情况发生折叠：
- 父子盒子之间没有
border、padding、元素或父盒子没有开启 BFC 模式，父子盒子的上外边距会合并。 - 父子盒子之间没有
border、padding、元素或父盒子没有指定height或min-height，父子盒子的下外边距会合并。
```css .box { height: 50px; background-color: black; }<div class="box"></div> <!-- 上外边距折叠 --> <div class="parent"> <div class="child"></div> </div> <!-- 下外边距折叠 --> <div class="box"></div>
.parent { background-color: red; margin: 10px 0; }
.child { width: 150px; height: 150px; background-color: green; / 父子外边距折叠 / margin: 100px 0; }
<br />在修正外边距折叠时，如果使用元素隔开，会出现如下特殊情况：�
```css
.parent::before,
.parent::after {
content: "";
/* display: block; */
/* display: line; */
}
当伪元素content内容为空或空格时，使用display: line | block;无法修正父子外边距合并，必须要使用可视字符或指定至少1px高度才能生效。
而如果指定内部显示模式能开启 BFC 模式，就无需补充content的内容或者指定高度就能修正。
实际开发中使用如下方式修复问题，该方式常见于清除浮动当中：
.clearfix:before,
.clearfix:after {
display: table;
content: " ";
}
�3.2 兄弟外边距折叠
<div class="box top"></div>
<div class="box bottom"></div>
.box {
width: 200px;
height: 200px;
}
.top {
background-color: red;
/* 兄弟外边距折叠 */
margin-bottom: 200px;
}
.bottom {
background-color: green;
margin-top: 100px;
}
4.内联块级盒子�
display有一个特殊的值inline-block，它在内联和块之间提供了一个中间状态。该类型的盒子不会单独占据一行，但它可以设定宽度和高度，并避免((20220304133618-4nl8re3 “上面”))看到的重叠
一个元素被定义为行内块级元素，会表现出以下行为：
- 盒子不会单独占据一行。
- 设置
width和height属性会生效。 - 内边距、外边距和边框会将其他元素从当前盒子周围“推开”。
在例子1.2中添加display: inline-block;，会看到一下情形：
参考文章
若有收获，就点个赞吧
0 人点赞
