块级盒子（Block box）特点：
- 盒子会在内联的方向上扩展，占据父容器在该方向上的所有可用空间，绝大多数情况下盒子会和父容器一样宽
-
width和height属性有作用 - 每个盒子都会换行
- 内边距（padding），外边距（margin），边框（border）会将其他元素从当前盒子周围推开
<h1>,<p>等如果不特殊指定都是块级盒子
内联盒子（Inline box）特点：
- 盒子不会产生换行
-
width和height属性不起作用 - 垂直方向内边距，外边距，边框会被应用，但是不会把其他处于inline状态的盒子推开
- 水平方向内边距，外边距，边框会被应用，会把其他处于inline状态的盒子推开
<a>,<span>,<em>,<strong>默认处于inline状态
如图：
垂直方向
水平方向
什么是内部和外部显示类型
css的box模型都有一个外部显示类型，决定盒子是块级还是内联
盒模型还有内部显示类型，决定了盒子内部元素是如何布局的，默认情况下是按照正常文档流布局，意味着它们和其他块元素或内联元素一样。
但是
如果是flex布局，设置display:flex，则这个元素外部显示类型为block，内部显示类型修改为flex。这个盒子的所有直接子元素都会成为flex元素
注意：display属性可以改变盒子的外部显示类型是块级还是内联，但是flex 的display:flex则是改变了内部显示类型，display：inline-flex则是盒子外部显示类型为inline，内部显示类型为flex
完整的盒模型应用于块级盒子每个盒子包括一下几个部分：
如果给盒子设置了width，height实际上是内容（content box）的宽高，实际的盒子大小还要加上padding，border。margin不计入实际大小但是会占用空间，影响的是盒子外部的空间
替代（IE）盒模型
计算盒子大小还要加上边框和内边距和麻烦，可以使用替代盒模型，可以使宽高包含border和padding。浏览器默认使用标准模型，如果要使用替代模型设置box-sizing:border-box
如果你希望所有元素都使用替代模式，而且确实很常用，设置 box-sizing 在 <html>元素上，然后设置所有元素继承该属性
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
外边距
外边距是盒子周围一圈看不到的空间。它会把其他元素从盒子旁边推开。外边距属性值可以为正也可以为负。设置负值会导致和其他内容重叠。无论使用标准模型还是替代模型，外边距总是在计算可见部分后额外添加
外边距折叠
我们有两个段落。顶部段落的页 margin-bottom为 50px。第二段的margin-top 为 30px。因为外边距折叠的概念，所以框之间的实际外边距是 50px，而不是两个外边距的总和。
相关更多信息，请参阅外边距重叠
内边距
内边距不能为负值
内联盒子
使用<span>设置了宽，高，内边距，外边距，边框。宽高被忽略了，内外边距，和边框是生效的，但是它们不会改变其他内容也内联盒子的关系，因此内边距和边框会与其他内容重叠
display有一个特殊值，在内联和块之间提供了一个中间状态。如果不希望内联元素换行，但是希望可以设定宽高，并且不出现上面的重叠，可以使用display: inline-block.使用后有以下效果
- 设置width 和height 属性会生效
- padding, margin, 以及border 会推开其他元素。
2023-03-20
