盒模型

盒模型概述：

盒模型是CSS的基石之一，它规定一个元素在页面上如何显示，在某种程度上也规定了元素之前如何相互作用。

盒子的相关知识点：

1.盒模型由单个盒子组成。

2.视觉格式化模型，多个盒子之间的排列，相互作用影响。

3.布局和实际应用。

如何划分区域：

1.使用不同的合适的元素来表示不同的区域，划分区域。

2.设置区域的尺寸、位置、背景等样式。

盒子的分类-元素是如何显示的：

块级元素：占据所有可用鸡宽度，以换行开始。

行内元素：

1.只占据所需要的宽度，在同一行一个接一个摆放。

2.通常用于较小的内容块，如被选中设置为粗体或斜体的一些词。

盒子的分类-元素是如何显示的：

不同元素产生的盒子类型也不同，产生什么样的盒子取决于它的display的属性。

盒子由margin外边距 、border边框、padding内边距  边框与内容之间的距离、conent内容  内容的宽度与高度组成。

盒模型知识补充：

默认情况下，width、height属性是指内容盒的宽和高，可以通过box-sizing属性修改。

padding-box：填充盒

表示一个完整的盒子由padding加conent组成。

严格意义上overflow指带的溢出就是溢出填充盒。