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

css盒模型简介

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

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

二、padding用法：

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

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

　　三、padding的特色：padding的值会把盒子撑大；

　　四、若是盒子要想保持原来的大小，须要在原来宽高的基础上减去padding值；

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

　　六、padding不能设置负值；

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

　　八、若是一个盒子没有设定固定的宽高，加上padding值之后能够不用减。

三、margin用法：

　　一、margin长在元素以外；

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

　　三、margin不会对盒子自己形成影响；

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

　　五、margin能够设置负值；

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

　　七、margin常出现的bug：

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

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

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