什么是盒模型

    盒模型，我想大家或多或少应该听说过，但可能并没有深入的了解过。下面我就分享一下我对此的理解，希望可以对大家的学习有所帮助。

一、基本概念

    什么是盒模型呢？顾名思义，就是类似于盒子的模型，可以根据通过设置模型里面各部分的大小来显示你想要的内容，并且显示了元素之间的相互关系。CSS中定义所有的元素都可以拥有像盒子一样的外形和平面空间。盒模型分为标准盒模型和怪异盒模型。
    盒模型的组成：内容区、补白/填充、边框、边界/外边距。

二、盒模型的组成

    盒模型的组成：content（内容区）+padding（填充区）+border（边框区）+margin（外边界区）。其中，
    content：  指的是元素的宽和高
    border：   指的是盒子的边缘      
    padding：  用来控制父元素和子元素之间的位置关系以及元素和内容之间的位置关系的。
    margin：   是用来控制同辈元素之间的位置关系，是显示在元素边框以外的空白区。    

1. padding的应用

   （1）有确定的宽高的盒子在添加了padding值之后，它的大小会被paddding值撑大。 如果想让元素原来的大小不变，需要在元素的宽高上减掉所加的padding。但如果你本身量的就是盒子内部内容的区域大小，就不用减去padding。
   （2）padding不可以写负值。
   （3）背景色会延展到padding区域。
   设置padding值可以有两种方法
   方法一 ：
   	padding-top:30px;                上填充
   	padding-right:30px;              右填充
   	padding-bottom:30px;             下填充
   	padding-left:30px;               左填充
   方法二 ：
   	padding： 1   2    3   4          1、上   2、右     3、下    4、左
   	padding： 1   2    3              1、上   2、左和右     3、下 
   	padding： 1   2                   1、上和下   2、左和右 
   	padding： 1                       1、上   右  下   左			
   

2. margin的应用

   （1）与padding属性不同， margin不会影响元素的实际宽高，但是也会曾加的他的所占区域。margin值是显示在盒子边框（若有边框的话）外面的距离。
   （2）margin 是可以写负值的。
   设置padding值可以有两种方法
   方法一：
   	margin-top:30px;                 上外边距
   	margin-right:30px;               右外边距
   	margin-bottom:30px;              下外边距
   	margin-left:30px;                左外边距
   方法二 ：
   	margin：1   2    3   4           1、上   2、右     3、下    4、左
   	margin：1   2    3               1、上   2、左和右     3、下 
   	margin：1   2                    1、上和下   2、左和右 
   	margin：1                        1、上   右  下  左	
   
   margin的bug:
   	1、上下的两个元素之间的margin值会重叠显示。谁的值大就以谁的margin值来显示。
   	   为了避免这样情况出现，我们可以只给其中一个元素设置margin值。
   	2、当父元素里的第一个子元素（块元素），添加margin-top的时候，会错误的把margin-top值添加给父元素。（建立在当前的元素没有添加边框和浮动的前提下。）
   	   为了避免这种情况出现，我们可以给父元素添加overflow：hidden；  也可以给父元素和子元素添加浮动；也可以给父元素添加边框，或者干脆不给当前元素用margin，给它的父元素用padding。
   

三、标准盒模型与怪异盒模型

1.标准盒模型

标准盒模型的所占位置的组成：宽高（content）+padding+border+margin
宽度实际占有的位置大小： 宽+左右padding+左右border+左右margin
元素高度实际占有的位置大小： 高+上下padding+上下border+上下margin

2.怪异盒模型

元素的宽度：width（content+border+padding）+margin