目的
- 说明 box-sizing 的属性及其作用
- 说明盒模型 bug 的表现形式
前言
清明过去了，做完了一个 psd to html 。速度有了，质量也有了一定的保障，修改的东西也变少了。突然想到之前看的一本书《 css 禅意花园 》，一个专门研究 css 用法的书目，写的很好，案例很多，用同一个 html ，利用不同的 css ，写出了很多风格各异的页面。
今天上了禅意花园的官网看了看，在查看 css 时（我最近养成的习惯，看看别人怎么写利用 css 的），发现第一部分 /* base css */ 就有我不懂的属性 —— box-sizing 。求知欲算是比较强的我就查了一下，才知道，这是一个 bug —— 盒模型 bug 。
盒模型 bug
关于盒模型 bug 的概念就不写了，貌似看了一些人的博客，我也没有看懂到底是什么意思，不过具体的现象还是知道的。
在看现象之前，应该了解一下 box-sizing 的值，和它的值的作用。
box-sizing : content-box ;
这是设定边框、内边距、宽度三者互不相关的方法，即 盒子实际宽度 = 边框 + 内边距 + 设定宽度（注：设定宽度 >= 内容宽度） 。
box-sizing : border-box ;
这是设定实现盒模型bug，即 实际宽度 = 设定宽度 = 边框 + 内边距 + 内容宽度 。
看完这个，相信有些比较灵活的人，应该知道了些东西。下面，就通过三段代码来说明，没有 box-sizing 声明、box-sizing : border-box ; 、box-sizing : content-box ; 之间的区别。
第一段代码（没有 box-sizing 声明）：
<div style=" width : 200px ; background : #aaaaaa ; margin : 5px ; ">
没有 box-sizing 声明
</div>
第二段代码（box-sizing : border-box ;）：
<div style=" width : 200px ; background : #aaaaaa ; margin : 5px ; box-sizing : border-box ; padding : 20px ; border : 3px solid #000000 ;">
box-sizing : border-box ;
</div>
第三段代码（box-sizing : border-box ;）：
<div style=" width : 200px ; background : #aaaaaa ; margin : 5px ; box-sizing : content-box ; padding : 20px ; border : 3px solid #000000 ;">
box-sizing : content-box ;
</div>
三段代码实现的效果图如下：
从上面的图可以清晰明了的发现，设置 box-sizing 对于浏览器的兼容性，对于浏览器对 html 表现的实现起着很大作用。（如若看不懂，要结合上面的公式来看）
感悟
本以为自己对于 html 和 css 已经很了解了，都已经有点飘飘然了，突然出现一个 css3 的属性，就懵了。
我想，这告诉了我，不要自满，需要学习的还有很多，掌握新的技能，新的技术，是非常必要的。
