盒模型概述

1.基本概念

任何一个元素都能生成一个盒子，不同的元素产生的盒子类型可能不同，一个元素产生什么样的盒子取决于它的display属性。

2.分类

元素是什么盒子看他的属性display ，该属性为不可继承

display:none （不生成盒子） dispaly:block(块盒，独占一行) display：inline （行盒，在一行显示）

display:其他取值

3.基本组成

盒模型由四部分组成，从外到里依次为：

margin (外边距) border(边框) padding(内边距) content(内容)

4.外边距（margin）

margin为外边距，是与其他盒子之间的距离

margin-top：上外边距  margin-bottom：下外边距  margin-left：左外边距   margin-right：右外边距

注：让一个常规流块盒居中，第一步给一个宽度width，第二步设置margin：auto；就能实现

5. border(边框)

border后面跟三个值，分别为边框厚度，边框样式，边框颜色，如：

div{border:1px solid red;}

注：border的默认厚度为3px（显示双实线），边框的默认颜色是当前标签文本的颜色

border样式的取值： solid 实线 dashed虚线 dotted点线 double双实线

还可以分别给上下左右设置边框：

border-top：上边框  border-bottom：下边框  border-left：左边框 border-right：右边框 

6.padding(内边距)  

内边距，为边框与内容之间的距离。

同理，内边距可以整体设置，也可以分别给上下左右设置内边距

padding-top：上内边距padding-bottom：下内边距  padding-left：左内边距   padding-right：右内边距

padding后面取值数量的不同，代表的意义也不同，如：

 padding:10px 20px ;（上下内边距10px，左右内边距20px)

​ padding:10px 20px 30px ;(上内边距10px，左右内边距20px，下内边距30px)

 padding:10px 20px 30px 40px ;(上内边距10px，右内边距20px，下内边距30px，左内边距40px)