第四章 css盒模型---网页布局的基石

css盒模型---网页布局的基石
　　组成：
　　　　内容区
　　　　内填充/补白
　　　　边框
　　　　外边距
padding：
　　1.在盒子和内容之间
　　2.调整子元素在父元素中的位置关系
　　3.特点：会把盒子撑大
　　4.如果想让盒子保持原有大小，需在宽高的基础上减掉padding值。
　　5.给单一方向设置padding值：
　　　　padding-left/right/top/bottom: ;
　　6.padding的设置方法：
　　　　padding:30px; 四周
　　　　padding:10px 30px; 上下 左右
　　　　padding:10px 30px 50px; 上 左右 下
　　　　padding:10px 30px 50px 100px; 上右下左
　　7.注意事项：
　　　　padding不能设置负值
　　　　padding不会对背景图的位置造成影响
　　　　如果一个盒子没有设置固定的宽和高，添加padding不用减。
margin:
　　1.在元素外围
　　2.控制同级元素之间的位置关系
　　3.不会对盒子本身的宽高造成影响
　　4.给单一方向添加margin值：
　　　　margin-left/right/top/bottom: ;
　　5.margin的设置方法：
　　　　margin:30px; 四周
　　　　margin:10px 30px; 上下 左右
　　　　margin:10px 30px 50px; 上 左右 下
　　　　margin:10px 30px 50px 100px; 上右下左
　　6.margin可以设置负值
　　7.注意问题：margin易出现的问题
　　　　a.父元素和子元素都没有设置浮动的情况下，如果给第一个子元素添加margin-top,会错误的把margin-top加在父元素上。（这种情况最好用父元素padding）
　　　　b.上下相邻两个元素的margin值不会叠加，按照最大值去设置。
　　8.margin：0 auto; 让当前元素在父元素里左右居中。