css盒模型简介

盒模型的概念：
盒模型顾名思义就是一个盒子。它是包含了内容（content)、内边距（padding）、边框（norder）、外边距（margin)属性的一个盒子。
盒子模型如下：

一、padding的定义：
从盒子的内部到盒子的外围距离，给盒子添加内填充的属性为padding。
二、padding的作用及注意事项：
1、padding是长在盒子于内容之间的距离，主要控制盒子与内容的位置关系。
2、padding是长在盒子里面的。
3、padding是添加在父元素上面的。
4、padding是可以把盒子撑大的。
5、padding不会对背景图位置造成影响。
6、padding不能为负值。
7、使用padding时，如果想让盒子保持原来大小，需要在宽高的基础上减去padding的值。
8、如果盒子没固定大小（被内容撑开），则添加的padding值不用减。
三、padding的用法：
1、如何在单一方向上设置padding值：
属性（padding)-属性值（方向）：left;(左边)
属性（padding)-属性值（方向）：right;(右边)
属性（padding)-属性值（方向）：top;(上面)
属性（padding)-属性值（方向）：bottom;(下边)
2、padding值的设置方法：
padding:一个值：表示盒子的四周。
padding:二个值：第一个值表示上下，第二个值左右。
padding:三个值：第一个值表示上，第二个值表示左右，第三个值表示下。
padding:四个值：第一个值表示上，第二个值表示右，第三个值表示下，第三个值表示左。
四、margin的定义：
盒子与盒子之间的距离，从盒子与盒子之间添加的外边距属性为margin。
五、margin的作用及注意事项：
1、margin是长在盒子外围的。
2、margin是控制当前元素与其它同级元素的位置关系。
3、margin不会改变盒子内部的的大小。
4、margin可以设置负值。
六、margin的用法：
1、如何在单一方向上设置margin值：
属性（margin)-属性值（方向）：left;(左边)
属性（margin)-属性值（方向）：right;(右边)
属性（margin)-属性值（方向）：top;(上面)
属性（margin)-属性值（方向）：bottom;(下边)
2、margin值的设置方法：
margin:一个值：表示盒子的四周。
margin:二个值：第一个值表示上下，第二个值左右。
margin:三个值：第一个值表示上，第二个值表示左右，第三个值表示下。
margin:四个值：第一个值表示上，第二个值表示右，第三个值表示下，第三个值表示左。
七、margin常出现的BUG：
1、同级元素上下之间的margin值不会叠加会重合,按照最大值设置。
2、当父元素和第一个元素都没有浮动，给第一个元素添加margin-top；margin-top；添加在父元素上面。
八、盒模型在页面里的宽高计算：
盒模型的宽=width+border-left+border-right+padding-left+padding-right+margin-left+margin-right;
盒模型的长=height+border-top+border+bottom+padding-top+padding-bottom+margin-top+margin-bottom

————————————————
版权声明：本文为CSDN博主「gordon_jin」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/gordon_jin/article/details/104487238