第二篇：前端开发-css盒模型简介

css盒模型简介

1、css盒模型是网页布局的基石！盒模型从内到外一共包含四个区域：

　　内容区 、内填充（补白）、边框、外间距。其中内填充和外边距得以实现的途径要依靠padding和margin两个属性。

2、padding用法：

　　1、padding长在内容区与边框之间，在盒子内部；

　　2、padding是为了调整子元素在父元素里面的位置关系；

　　3、padding的特点：padding的值会把盒子撑大；

　　4、如果盒子要想保持原来的大小，需要在原来宽高的基础上减去padding值；

　　5、给与一个方向设定padding值：padding-left/right/top/bottom;

　　6、padding不能设置负值；

　　7、padding不会对背景图位置有影响；

　　8、如果一个盒子没有设定固定的宽高，加上padding值以后可以不用减。

3、margin用法：

　　1、margin长在元素之外；

　　2、margin控制同级元素之间的位置关系；

　　3、margin不会对盒子本身造成影响；

　　4、给单一方向添加margin值：margin-left/right/top/bottom；

　　5、margin可以设置负值；

　　6、控制子元素在父元素之间的位置关系，用padding最合适；

　　7、margin常出现的bug：

　　　　a、当父元素在第一个子元素没有设置浮动的状态下，如果第一个子元素添加margin-top/bottom会错误的把间距加到父元素上面；

　　　　b、上下相邻两个元素之间的margin值，不会叠加，按照最大值来设定。左右相邻两个元素之间的margin值会叠加

　　8、margin：0 auto；即上下0，左右auto，会让子元素在父元素中居中。