盒模型理解

一、盒模型介绍
盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。盒模型示意图如下：

把元素看成页面中的盒子，盒子周围的相互关系分别为：
盒子的边框：border；
盒子与盒子之间的间距：margin；
盒子内容与边框之间的间距：padding；

二、padding属性：
1、 padding是在盒子里面，在盒子与内容之间，即控制子元素在父元素里面的位置关系，padding会把盒子撑大。
2、让盒子保持原有的大小：在宽高基础上减掉所加padding值。（如果一个元素是被内容撑开的，没有设置固定的宽高，padding直接撑开。不用减掉）
3:设置内间距：
距顶部内间距20px，距左边内间距30px
4、padding边距简写：
5、padding不会对背景图的位置造成影响。

三、margin属性
1、margin在元素外围，不会撑大元素的大小，控制元素与元素之间的间距。
2、设置margin：
距离底部外边距10px，距离左边外边距20px。
4、margin简写设置同padding。
5、margin:0 auto;让当前元素在父元素里面左右居中。
6、margin常出现的bug
a:两个相邻元素，如果没有设置浮动的上下两个盒子之间的margin区域是重叠的，按较大值设置；如果设置了浮动，之间的margin区域不重叠，值就是加起来的值。
b:如果父元素和第一个子元素没有浮动的情况下，给第一个子元素添加margintop,会错误放在父元素上面。

四，盒子的计算

盒子原大小：300px500px
边框：30px ;
margin:10px
margin不改变盒子的大小，占用空间。
因此现在盒子实际大小：
width=300px+30px2+20px2
height=500px+30px2+20px*2

 盒子所占空间：
 width=300px+30px*2+20px*2+10px*2
 height=500px+30px*2+20px*2+10px*2

注意：元素wight,height：元素的宽高。盒子的大小包括：内容，内间距，边框。