CSSday03 盒子模型

盒子模型：是每个标签都有的模型，具体是外边距、边框、内边距、内容所组成的思维模型；

上图外边 红色的那一圈就是外边距，属性名为margin，可以理解为两个元素之间的距离，当被嵌套时，是相较于父元素的边框，父元素没有边框，就是相较于body区域，没有被嵌套时，是相较body区域；外边距能设置大小不能设置颜色，图只是方便解释才加了颜色

外边距的属性值,都是数字，单位为px：

margin-left：跟左边元素的距离  格式例：10px；（距离上面元素10像素），当值为正数时，元素往右走，负数往左走，因为元素的外边距不会影响其他元素位置，所以只能自己移动调位置

margin-right:跟右边元素的距离，正数往左走，负数往右走。

margin-top：跟上边元素的距离，正数往下走，负数往上走。

margin-bottom：跟下面元素的距离，正数往上走，负数往下走。

简约写法：margin：上面距离 空格 右边距离 空格 下面距离 空格 左边距离；

当你就写margin：一个值；默认上下左右的距离都是这个值

居中：margin：0 空格auto；这样写就可以使元素x轴居中，0只能写在前面，margin：auto  0；这样写是不合法的

蓝色的那一圈是边框，属性名为border， 边框可设置边框线的粗细还有颜色，边框线的长短由你的设置是元素大小决定，如果设置了内边距，内边距会把边框撑大，我们只能设置边框的粗细

border-top：上边框 格式例：10px （设置边框粗细）  solid（设置边框是实线）black（设置边框颜色）；

border-bottom：下边框

border-left：左边框

border-right：右边框

简约写法：border：边框粗细  空格  solid  空格   边框颜色；当边框颜色设置为transparent时，边框会透明

绿色的是内边距：属性名为padding，可设置大小不能设置颜色，内边距就是你的内容比如文本或图片距离包裹它的元素的边框距离，不知道边框在哪，你可以设置边框看一下，但是内边距会撑大包裹它的元素

padding-top：元素距离上边框的距离，格式例：10px；

paddin-bottom：元素距离下边框的距离

padding-left：元素距离左边框的距离

padding-right：元素距离右边框的距离

简约写法：padding：上 空格 右 空格 下 空格左；

padding：一个值；这样就是默认上下左右的距离都是一样的

盒子的实际大小是边框粗细（border）+内边距（padding）+内容；但是也box-sizing: border-box;这样就不会算边框的粗细和内边距了，只算内容的大小。