css盒模型 margin padding border们你真的懂么？

什么是盒模型？  规定了元素框处理元素内容、内边距、边框和外边距的方式。
咱们常说有两种盒模型 即“标准 W3C 盒子模型”和“IE 盒模型”。但一般会加 DOCTYPE 声明，在全部浏览器中就都显示“标准 W3C 盒子模型”。下面以标准为例：

首先要弄清楚的问题：实际大小的计算
在标准盒模型中     实际宽度 = width+margin+border+padding （高度同样） 
例如 一个元素宽60px，通过 padding = 5px，border = 5px，margin = 10px，渲染后的实际宽度 = 60+5*2+10*2+5*2 = 100px；

不多有人关心的css盒模型的三维图，如图

好吧，我开始也不能理解这个东西又啥用...可是这个真的有用
我遇到过这样的状况,有一张图片宽300做为背景图片，那么我给定一个 div 300的宽度，而后要求内容里这个框有10px的距离， 再给这个框一个padding：10px； 你以为这个有什么问题么？好吧 无图无真相  

我给一个div加了以下样式，背景图片大小300*100px 你以为出现的会是怎么样的？

.test{
 width:300px;
 height:100px;
 padding:10px;
 border:1px solid #000;
 background:url(7.png) no-repeat 0 0;
 color:#fff;

真相 如图..这是为何 看着前面两个盒模型本身去思考下吧  当时别人说我也硬是没懂 要本身体会到了就到了....

再说下如何设定这几个值

1，边框 border
    边框属性：样式，宽度，和颜色

    border-style: 没有样式，就没有边框
    经常使用样式包括：solid（实线），dashed（虚线），none（无）
    能够统一声明，也能够分别声明
    四条边框分别是：border-top-style,border-right-style,border-bottom-style,border-left-style
    统一声明：border-style

    border-width: 默认宽度是4px
    一样能够统一声明，也能够分别声明
    四条边框分别是：border-top-width,border-right-width,border-bottom-width,border-left-width
    统一声明：border-width

    border-color: 默认是黑色
    也是能够统一声明，也能够分别声明
    四条边框分别是：border-top-color,border-right-color,border-bottom-color,border-left-color
    统一声明：border-color
    
这三个属性都有同样的设定规则
div{border-style:solid dashed none dashed;} 这样写 上右下左 分别是solid dashed none dashed
div{border-style:solid dashed;} 这样写 上下是solid 左右是dashed
div{border-style:solid;} 这样写 4条边框都是 solid
  border-width和  border-color规则同样；

经常使用的写法是这样 div{border: 1px solid #fff}  等同于
 div{ border-width:1px;
        border-style:solid;
        border-colod:#fff;
}

2,边距 margin 和 padding

    和边框同样，能够统一声明和分开声明
    maigin
    margin-top,margin-rignt,margin-bottom.margin-left;
     div{margin: 1px 2px 3px 3px;} 
        这样写 上右下左的顺序margin-top,margin-rignt,margin-bottom.margin-left分别是 1px，2px，3px，4px.        div{margin: 1px 2px;} 
        这样写 margin-top 和 margin-bottom 是1px， margin-right 和 margin-left是2px
    div{margin: 3px;} 
        这样就是上下左右都是3px.
    padding规则和margin同样....

最后来看看盒模型调皮的地方吧,,,,。。。头疼....遇到过的问题

    问题一： 一个div{margin-bottom: 10px}，另外一个div{margin-top: 5px}，两个div上下相邻时，之间的距离是10px！
   解决：这个是浏览器margin重叠的问题，只会显示较大的margin值，要两个叠加用padding或者一个div 直接15px。转载了一篇关于这个的文章 有点绕，要弄清楚的能够看看 http://my.oschina.net/u/582995/blog/98171....

    问题二：IE下margin失效的问题，只知道是haslyout惹的祸
    解决方案：有几个方法取，最简单的：父元素 zoom:1。

    问题三：