css中box-sizing的使用心得

起初遇到的状况是这个样子的:

<div class="box-div">
 <span class="add-on"><i class="icon-search"></span>
 <input type="text" id="search-val" placeholder="搜索" />
 <button class="btn">搜索</button>
</div>    

我想要实现的效果以下

span标签和搜索按钮的宽度是固定部变的，可是搜索框的宽度须要是100%,为了实现这样的效果，我只能把span和button标签进行绝对定位到相应的位置，这样之后我会获得以下的效果

很显然这不是我想要的效果，因此我能够把input的padding-left属性设置为30px，我觉得这样就能够实现最上面的效果了，可是因为padding-left之后整个input的宽度也会发生变化，input的宽度就增大了，也不是100%了，很明显这不是我想要的效果

宽度已经部对了，因此这个时候的解决办法就只有css3的属性box-sising了，我给input设置box-sising:border-box之后它就变成了我想要的样子，刚开始以为很神奇，而后仔细阅读了box-sising的文档，了解到以下的一些知识:

box-sizing 属性容许您以确切的方式定义适应某个区域的具体内容。

参考:http://www.w3school.com.cn/tiy/t.asp?f=css3_box-sizing

个人理解就是让你设置的区域宽度用百分比固定为父元素的宽度对应的百分百，不会收到padding把把盒子撑大的效果

大概就是这样的，解决方案就大师帮我想的。这个项目是一个web app如今用的是弹性布局，后期会用botstrap加上响应式布局，这个项目的ui彻底是用bootstrap实现的。