CSS盒模型

1、什么是盒模型

答：在CSS中，所有元素都被一个个盒子包围着，称之为盒模型。

盒模型中定义了盒的每个部分--margin,border,padding,content；

标准盒模型，替代盒模型；

2、盒子模型分类

答：块级（block）盒子和内联（inline）盒子。

3、盒子模型的特性

1）块级盒子

• 单独占一行
• 可以设置宽度和高度
• 默认情况下，宽度为父元素的宽度
• 内外边距、边框都会把其他元素从它的周围推开

2）内联盒子

• 与其他内联盒子可以并排，若父元素宽度不足够排放，则会自动挤到下一行
• 不可以设置宽度和高度,也就是说width,height属性不起作用
• 内边距、外边距、边框可以应用，但是不会把其他处于inline的盒子推开，也就是说可能会发生重叠；

4、box模型的内部和外部显示类型

1. 外部显示类型：决定盒子是块级的，还是内联的：display:block,inline;
2. 内部显示类型：决定了盒子内部元素是如何布局的，默认是按照正常文档流进行布局；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：用于将内容推离边框，不能有负数的内边距