对于盒子模型的理解
首先W3C的解释
1、box-sizing：content-box的时候：
这是由CSS2来自.1规定的宽度高度行为。
宽度和高度分别应用到元素的内容框。
在宽度和高度之外绘制元素的内边距和边框。
2、box-s以微活很诉izing：border-box的时候：
为元素设定的宽度和高度决定了元素的边框盒。
就是说，为元素360问答指定的任何内边距和边框都将在获价达搞已设定的宽度和高度内进行绘制。
通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
通过图更直观的对比：
图一是box-sizing：content-box的时候：
这个时候盒子模型的范围包括margin、bor算建立华积都der、padding、content，并且content部分不包含其他部分。
例如一个盒子的ma质rgin为20px，border为1px，padding为10px，content的宽为200px、高为50px，假如box-sizing：content-box盒子模型解前情分父须衣选释，那么这个盒子需要占据的位置为：宽20*2+1*2+10*2+2立书文游杨听到进松00=262px、高20*2+1*2*10*2+50=112p茶支呼争难地击紧参x，盒子的实际大小为：宽1*冷飞植处货王月至2+10*2+200=22哥别小抓二顶误安停易2px、高1*2+1因样防星缺效控企再因0*2+50=72px
图二是b导马ox-sizing：border-box的时候：
从上图可以看到ie盒子模型存第的范围也包括margin、border、padding、content，和box-sizing：content-box盒子模型不同的是：该毫争万已国放坐需帮盒子模型的content部分包含了酸诉古border和pading。
例如一个盒子的margin为20px，border个室县论木木们望广领为1px，padding为10px，content的宽为200px、高为50px，假如box-sizing：border-box盒子模型解释，那么这个盒子需要占据的位置为：那么这个盒子需要占据的位置为：宽20*2+200=240px、高20*除财静差还温校扩推2+50=70px，盒子的实际大小为：宽200px、洋备跑在三高50px
标签：box,sizing,border
