盒子模型

盒子模型

1. 块级元素

   display: block

   独占一行 ，对宽度、高度、对齐方式等支持

   例如: div ul li h1-h6 p 等

2. 内联级元素

   display: inline

   不独占一行，对宽度、高度、对齐方式等不支持，跟（块级相反）

   例如: a span 等

3. 内联块级元素

   display: inline-block

   不独占一行，对宽度、高度、对齐方式等支持,可以看成是块级元素和内联级元素的结合体

   例如: img input table

以上是基本的盒子模型，通过以上模型延伸出弹性盒子模型（display: flex）

盒子内部结构

1. 内容区

   属性：width height

2. 填充区

   属性： padding

3. 边框区

   属性：border（符合属性）

   border-style 边框样式

   border-width 边框宽度

   border-color 边框颜色

4. 外边距区

   属性： margin

   可以在横向上使用auto可以达到居中的效果，但是纵向上不能使用使用auto，因为纵向上不确定高度

box-sizing 设置盒子是内容盒子还是边框盒子