CSS盒模型
1、什么是盒模型
答：在CSS中，所有元素都被一个个盒子包围着，称之为盒模型。
盒模型中定义了盒的每个部分--margin,border,padding,content；
标准盒模型，替代盒模型；
2、盒子模型分类
答：块级（block）盒子和内联（inline）盒子。
3、盒子模型的特性
1）块级盒子
- 单独占一行
- 可以设置宽度和高度
- 默认情况下，宽度为父元素的宽度
- 内外边距、边框都会把其他元素从它的周围推开
2）内联盒子
- 与其他内联盒子可以并排，若父元素宽度不足够排放，则会自动挤到下一行
- 不可以设置宽度和高度,也就是说width,height属性不起作用
- 内边距、外边距、边框可以应用，但是不会把其他处于inline的盒子推开，也就是说可能会发生重叠；
4、box模型的内部和外部显示类型
- 外部显示类型：决定盒子是块级的，还是内联的：display:block,inline;
- 内部显示类型：决定了盒子内部元素是如何布局的，默认是按照正常文档流进行布局；display：flex可以改变盒子的内部显示类型，变成弹性盒子；display：grid;
5、盒模型的组成
- content-box:这个区域用来显示内容，可以通过width,height来设置
- padding-box：大小通过padding设置
- border-box：大小通过border设置
- margin-box：大小通过margin设置
6、display:inline-block
它在内联和块之间提供了一个中间状态。这对于以下情况非常有用:您不希望一个项切换到新行，但希望它可以设定宽度和高度，并避免上面看到的重叠。
当您想要通过添加内边距使链接具有更大的命中区域时，这是很有用的。<a>是像<span>一样的内联元素；你可以使用display: inline-block来设置内边距，让用户更容易点击链接。
7、外边距、内边距、边框
内边距padding：用于将内容推离边框，不能有负数的内边距
