css盒模型简介

　　盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间. 盒模型的组成：内容区、补白/填充、边框、边界/外边距。

 

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值

            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； 让当前元素在父元素中左右居中