css box-sizing

写在前面

编程的道路上，尤其指自己赖以生存的编程语言，基础真的真的很重要，没有捷径。在前端若不去看原型，函数引用，类型转换，盒模型，css hack......或许可以摘抄部分代码片段拼出一个看起来不错的页面，但这并不是自己的东西,花拳绣腿，照猫画虎不是真功夫。

正文

某一年的某一天，用户要一个搜索页面，我用烦了之前的这种样式：

想要这样一种扁平，清晰，高大的样式，我脑中浮现出这样的框框：

于是乎：

 .inp{ width:150px; height:30px; border:1px solid #4394d6;border-right-width:0px;   }    .but{ width:40px; height:30px; border:1px solid #4394d6; color:#4394d6; border-left-width:0px; background-color:#fff; cursor:pointer;  }  

<input class='inp' /><input class='but' value=serch type=button />

整个过程还顺利，按下F5，但看到的是这货：

这是啥？U盘吗？丑爆了！

问题出在哪了？出在哪了？哪了？

感觉难不到我，于是不断的调整top,height,在IE上好歹对上了，但在chrome上还是对不齐，chrome上调好了，阿姨又不干了。。。。一个简单的样式花费了快半个小时还这样，理智耐心渐渐被恼怒所占据：CSS基础这么差，不能流利的操纵layout，以后还咋混！！

原因很简单：我在css上用的功夫太少，样式一直都是bootstrap。当我决心要重撸一遍css基础时，才发现css不仅仅局限于样式，它也可以干许多js的活，并且干的更漂亮。

回到本例：此处涉及到css的盒模型 ，如果当初我知道box-sizing，那么事情会在1分钟内解决。

添加如下rule:

  *{ margin:0px;  padding:0px;                -moz-box-sizing: border-box;          box-sizing: border-box;              }

世界重归美好>>

/*******************************************/

当设置一个元素为 box-sizing: border-box; 时，此元素的内边距和边框不再会增加它的宽度.