css

css盒模型是理解css布局的基础。

        一个页面是由无数个“盒子”组成的，如果大家用Firebug或是其它调试程序，可以很清晰的看出来。那么一个最基本的“盒子”由哪些构成？答案很简单，相信大家都知道。一个“盒子”有一个content内容区域，加上padding，border，和margin。

         盒模型又分为两种。一种是标准盒模型，另一种是IE盒子模型。大家请看图。

        二者的区别就是width属性值所包含值的差异。在标准盒子中（默认下），width/height = content的宽度。在IE盒子中，width/height = content + padding + border。

         在css3中有一个box-sizing属性可以很好的解决这个差异问题。border-sizing: content-box |

 border-box | inherit 。

         content-box：默认值，让元素维持W3C的标准盒模型。也就是元素的 width/height = border + padding + content width/height。注意了，在此模式下，我们给一个元素设置 width/height 值其实是元素的content的值。所以你给一个元素设置了 height/width，然后再设置 border 和 padding 值是会改变元素的总宽高的。

          border-box ：此模式下，盒模型会重新定义，让元素维持 IE 传统盒子模型（IE 6 以下版本和 IE 6 ~ 7 怪异模式）。注意了，在此模式下，我们给一个元素设置 width/height 值其实是元素盒子的值，所以你给一个元素设置了 height/width，然后再设置 border 和 padding 值不会改变元素的总宽高，改变的是元素的 content 区域的大小（content 区域的大小 = 盒子大小 - 边框 - 内边距）。