CSS盒模型简介

css盒模型：

        是网页布局的基石！盒模型，从里到外包括：

            内容区           -> 就是内容

            内填充(补白)     ->  padding

            盒子边框(可选)   ->  border

            外边距           -> margin

padding的用法：

        1: padding是长在内容和盒子之间的，在盒子内部。

        2：padding是为了调整 子元素 在 父元素里面位置关系。

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

        4：如果想让盒子保持原有大小，需要在宽高的基础上减掉padding值。

        5：给单一方向设置padding值：

            padding-left/right/top/bottom: ;

        6: padding 设置方法：

            padding:1个值      四周

            padding:2个值      上下   左右

            padding:3个值      上     左右    下

            padding:4个值      上右下左

        7: padding不能设置负值

        8: padding不会对背景图造成影响。

        9：如果一个盒子没有设置固定的宽和高，添加padding是不用减的。

margin的用法：

1：margin长在元素之外的。

2：margin控制的是同级元素之间的位置关系

3：margin不会对盒子本身的宽高造成影响。

4：给单一方向添加margin-left/right/bottom/top: ;

5:margin设置方法：

            margin:1个值      四周

            margin:2个值      上下   左右

            margin:3个值      上     左右    下

            margin:4个值      上右下左

6:margin可以设置负值

7：margin常出现的BUG：

a：当父元素和第一个子元素都没有设置浮动的情况下，如果给第一个子元素添加margin-top 会错误的把margin-top加在父元素上面。
b: 上下相邻两个元素之间的margin值，不会叠加，按照最大值去设置。

8:margin:0 auto; 让当前元素在父元素里左右居中