CSS盒模型的介绍--逆战

 

盒模型：
         盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。
         css定义所有的元素都可以拥有像盒子一样的外形和平面空间。
         即都包含content内容区、padding补白（填充）、border边框、margin边界(外边距)这就是盒模型。

盒模型的作用：
　　1:用来控制父元素和子元素之间的位置关系；
　　2:用来控制元素和内容之间的位置关系的;
　　3:用来控制同辈元素之间的位置关系。
　　
padding（填充）：
       1：padding在内容和盒子之间的，在盒子内部；
       2：padding是为了调整子元素在父元素里面位置关系；
       3：添加padding值会把盒子撑大，如果想让盒子保持原有大小，需要在宽高的基础上减掉padding值；
       4：padding不能设置负值；
       5: padding不会对背景图造成影响；
       6：如果一个盒子没有设置固定的宽和高，添加padding是不用减的；
       7：给单一方向添加padding值：
                        padding-left/right/top/bottom:;
       8：padding的设置方法：
                       padding:1个值        四周
                       padding:2个值        上下     左右
                       padding:3个值        上        左右      下
                       padding:4个值        上      右     下     左

margin（外边距）:
       1: margin在盒子（元素）外部；
       2: margin控制的是同级元素之间的位置关系；
       3: margin不会对盒子本身的宽高造成影响；
       4: margin可以设置负值；
       5: 给单一方向添加margin值
                     margin-left/right/top/bottom:;
       6: margin的设置方法：
                     margin:1个值       四周
                     margin:2个值      上 下      左右
                     margin:3个值      上          左右        下
                     margin:4个值      上       右       下       左
       7: margin:0 auto; （让当前元素在父元素里面左右居中）；

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

标准盒模型的所占位置的组成：

              占有的宽度：width + padding-left/right + border-left/right + margin-left/right

              占有的高度：height+ padding-top/bottom + border-top/bottom + margin-top/bottom