这是一个迷茫，惶恐的三月，最近很着急，很害怕，有一种火烧眉毛，才知道自己之前浪费了多少时间。但是不管怎么样，相信只要一直学习巩固，过得充实了，剩下的就顺其自然了。说了一堆废话，接下来步入正题，谈一下，CSS著名的盒子模型。
一. 盒子模型简述： 相信大家都知道，只要是块级元素，就都有自己的盒子模型，盒子模型由：content（内容）+padding（填充）+border（边框）+margin（边界）组成，也就是说，一个块级元素，实际所占的高度和宽度=content+padding+border+margin，下面是一张盒子模型的图：
二. box-sizing属性 这个属性有两个属性值，content-box和border-box； （1）content-box：
这是盒子模型的默认值；实现的效果是：当我们设置一个元素的固定高度和宽度时，实际上是针对content部分所设置的，当使用padding和border属性时宽度和高度会额外的增加。（2）border-box：
实现效果：当我们给盒子模型指定好高度和宽度后，设置border-box值会使padding和border的值也属于所设置的高度和宽度，这样的效果更符合我们对盒子模型的认识；使用优点：使用该属性，当我们用百分比的时候，会很方便，会减少很多计算。使用缺点：兼容问题，IE6和7的标准模式下没有box-sizing属性。下面的代码，是这两个属性的对比效果：
<!DOCTYPE html> <html> <head> <style> .container { width:30em; border:1em solid; } .box1 { box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ -webkit-box-sizing:border-box; /* Safari */ width:50%; border:1em solid red; padding: 1em; background: blue; } .box2 { box-sizing:content-box; -moz-box-sizing:content-box;/* Firefox */ -webkit-box-sizing:content-box;/* Safari */ width:50%; border:1em solid yellow; padding: 1em; background: blue; } </style> </head> <body> <div class="container"> <div class="box1">第一个div</div> <div class="box2">第二个div</div> </div> </body> </html>效果如图：
如图中，第一个div的box-sizing值是border-box，第二个是content-box，可以看出第二个的padding和border值并没有包含在width中，所以使用border-box来实现布局是比较容易达到预想的效果的。
