规则与变通——盒模型 bug

目的

• 说明 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>

三段代码实现的效果图如下：

image.png

从上面的图可以清晰明了的发现，设置 box-sizing 对于浏览器的兼容性，对于浏览器对 html 表现的实现起着很大作用。（如若看不懂，要结合上面的公式来看）

感悟

本以为自己对于 html 和 css 已经很了解了，都已经有点飘飘然了，突然出现一个 css3 的属性，就懵了。

我想，这告诉了我，不要自满，需要学习的还有很多，掌握新的技能，新的技术，是非常必要的。