小白对于盒子模型的理解

一、CSS盒子模型
盒模型，顾名思义，就是类似于一个封装的盒子，里面装着你想要叙述的内容。一个网页就是由一个一个的盒子堆积而成。里面装着HTML索要叙述的内容。
简单点理解就是外边距(margin)+边框(border)+填充(padding)+内容（content）。
如下图：

二、盒模型空间计算：
结合上图，盒模型计算方式如下：
宽度（width）计算：
width=margin-left+border-left+padding-left+contet(内容)+padding-right+border-right+margin-right
高度（height）计算：
height=margin-top+border-top+padding-top+contet(内容)+padding-bottom-bottom+border-bottom+margin-bottom
三、margin用法：
margin指盒子的外边距。
1.长在盒子的外围。
2.不会改变盒子本部的大小。
3.可以给盒子单一方向设置margin值。
4.margin支持负值写法。
5.margin值设置语法：
margin=xx px；
其中，一个值，代表四周为同一margin值，则外边距一样。
两个值，前一个值代表上下margin值，第二个值代表左右margin值。
三个值，代表上、左右、下margin值。
四个值，代表上、右、下、左margin值。
也可以给单一方向设置margin值：
例如：margin-left、margin-top、margin-right、marginbottom。
6.margin值也会出现以下bug：
同级元素上下之间的margin值不会叠加，会重合，按最大值设置。
当父元素没有浮动，和子元素没有浮动，给第一个子元素添加margin-top值，会错误的添加在父元素上。
四、padding的用法
1.padding长在内容与盒子之间，属于内填充。
2.它控制子元素在盒子内部的位置关系。
3.添加在父元素上面。
4.padding会把盒子撑大，所以，在父元素有固定的宽高值的情况下添加padding值，就必须减去相等的宽高。
5.padding不会对背景图造成影响。
6.padding值不能为负值。
7.padding值设置语法：
当padding设置一个值：四周相同的padding值；
两个值：上下、左右的padding值；
三个值：上、左右、下padding值；
四个值：上、右、下、左padding值；
也可以对单一方向设置padding值：
padding-left、padding-right、padding-top、padding-bottom；
五、border（边框）用法：
它默认情况下边框在元素之外；
语法1：border：10px solid blue；（复合式写法）
解析：第一个值代表边框的宽度；
第二个值代表边框类型：
其中solid：实线 dashed：虚线 dotted：点状线 double：双线 none：无线条。
第三个值代表颜色。
也可拆分为：bborder-width（边框宽）、border-color（边框颜色）、border-style（边框类型）
语法2：bborder-width/border-color/border-style：
属性值：一个值：四周；
两个值：上下、左右；
三个值：上、左右、下；
四个值：上、右、下、左。
语法3：也可以对单独方向设置属性值：
border-left、border-right、border-top、border-bottom。