盒子的分类与理解

注意：为了能清楚的分辨符号。文章内文字符号都使用的中文字符。但代码内因改为英文符号。
盒子包括行盒与块盒，在使用过程中呢，行盒一般为文本类。块盒主要运用来进行布局和调整。
行盒，块盒，最直接的区别：
display的取值不同；
那么display的取值有：
生成行盒，取值：inline；即：display：inline；
生成块盒，取值：block；即：display：block；
两者皆占：生成行-块盒：取值：inline-block；
即：display：inline-block；
殊情况：不生成盒子。（上一篇文章所说的隐藏）
取值为：none。即： display：none；隐藏没有痕迹，不会被看到，不能被点击等。
还有一种我们多用来进行布局；即
生成弹性盒子；取值 flex。 即; display：flex；多用来将列装块盒进行横向排列所用。

行盒

特点：不换行，不能设置宽和高，设置无用，文本内容撑起整个行盒的大小，文本内容太多自动换行展示。
在展示时，多用于展示文本内容，但P是段落，是一个块盒。
常用元素有：h1~h6 span a img 等。当然我们也可以改变盒子的属性，使其成为块盒或者行盒，甚至行块盒等。

块盒

特点：自动换行显示，不管上一个盒子是否占满，都自动换行排列，并且能设置宽和高。但若文本超出块盒大小，依旧会显示，影响后面或下面的内容展示。
常用元素有：div header footer section article aside等等。我们多数布局都是以块盒的方式进行布局。
（常说这个页面分为几个区域，这个区域分为几块，几块，其中区域和块）一般都是块盒。

行-块盒

拥有两者的特点，可在一行显示，可进行宽高设置，且不会换行显示。在某些时候我们需要给行盒设置宽高，但又想要不换行。就可以使用行块盒。
改变盒子display属性的属性值。

特殊情况

即：不生成盒子。display：none；
当display属性的属性值为none的时候，此时不生成盒子。没有痕迹。我们多用于隐藏盒子。（详细内容见上一篇文章）

块盒包含

块盒主要包含4各部分，当然有时候为0时可以不用管。但主要包含4各部分：
margin（外边距）主要用于设置两个盒子之间的间距；
border（边框）用于设置盒子的边框；
padding（内边距）用于设置盒子的内容与边框的距离；
content（内容）即展示的内容。

Margin

margin使用时主要为，两个盒子之间。当两个盒子上下排列时，margin设置时会出现层叠机制：即两个上下排列（垂直排列）的margin之间没有其他东西即没有（border、padding、content）。
两个margin出现层叠机制：
两个都设置时，两个都为正数值时，取最大的值；两个都是负数值的时候，取最小值（负得多的）；两个值一个正数值，一个负数值，则进行相加。

padding

padding使用时，主要是盒子内容与边框之间的距离。多数时主要运用于我们要设置某一边的边框，但发现内容与边框之间有间距。此时我们有padding。

特殊情况

margin与padding的特殊情况使用。
在我们需要渲染一个背景色的时候，即背景色的区域，而我们需要调整位置时，就可以用margin或者padding了。调整的位置有背景色覆盖，我们用padding；调整的位置没有背景色，即调整背景色的位置，我们用margin。

附加

背景色渲染区域改变，有三个值。
默认值从border区域开始渲染；
background-origin （属性） 设置背景图像的定位区域 ；
比如从边框、内容等，背景从盒子的什么位置开始设定。
取值：
boeder-box；（从边框开始）
padding-box；（从内边距开始）
content-box；（从内容开始）

感谢观看，如有不足请多谅解。并进行评论指出。谢谢！！！