网页布局的基石——CSS盒模型

一、盒模型概述：

盒模型主要由以下几个部分组成：

1. 内容区：content（用于放置文本、图片、其他盒子等）
2. 内填充（补白）：padding
3. 盒子边框(可有可无的元素)：border
4. 外边距：margin

二、padding的使用方法：

1. 定义：padding存在于盒子内部，是指内容区和盒子之间的空间
2. 应用目的：调整子元素在父元素中的位置关系
3. 特点：其值会将设定好宽高的盒子撑大，如果想保持盒子的原有大小，需要在设定宽高的基础上减掉padding值
4. 给单一方向设定padding值：

（1）给左侧设定 padding-left:;

（2）给右侧设定 padding-right:;

（3）给上方设定 padding-bottom:;

（4）给下方设定 padding-top:;

1. padding的数值设置方法：

Padding中可设置多个数值，最多可设置四个，数值与数值之间用空格键隔开，且设定不同个数的数值所代表的的填充方向不同：

（1）padding：10px; 四周填充

（2）padding:10px 10px; 上下填充 左右填充

（3）padding:10px 10px 10px; 上填充 左右填充 下填充

（4）padding:10px 10px 10px 10px; 上填充 右填充 下填充 左填充（按照顺时针方向）

6.padding不可以设置负值

7.设置padding值不会对背景图造成影响

注意事项：如果一个盒子没有设置固定的宽高值，那么所添加的padding不用减掉

三、margin的使用方法：

1. 定义：margin是存在于元素之外的
2. 作用：控制同级元素之间的位置关系
3. 特点：margin不会对设定好宽高的盒子造成影响

4.给单一方向设定margin值：

(1)给左侧设定 margin-left:;

(2)给右侧设定 margin-right:;

(3)给上方设定 margin-bottom:;

(4)给下方设定 margin-top:;

5.margin的数值设置方法：

margin的用法与padding基本相同

(1)margin：10px; 四周边距

(2)margin:10px 10px; 上下边距 左右边距

(3)margin:10px 10px 10px; 上边距 左右边距 下边距

(4)margin:10px 10px 10px 10px; 上边距 右边距 下边距 左边距（按照顺时针方向）

(5)margin:0 auto; 上下边距为0 左右为自动(该条声明常用于让当前元素在其父元素中左右居中)

6.margin可以设置负值

7.margin中常出现的BUG:

（1）当父元素和第一个子元素都没有设置浮动的情况下，如果给第一个子元素添加margin-top:;声明，会错误地把margin-top值加在父元素上

（2）上下相邻的两个元素之间的margin值不会叠加，会按照最大值去设置，但左右是可以叠加的