css中box-sizing的使用心得-优快云博客

本文详细介绍了如何在Web应用中调整搜索框的宽度，使其达到100%，同时保持span标签和按钮的固定宽度，通过使用CSS3的box-sizing:border-box属性实现这一目标，并提供了实际案例分析。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

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

<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实现的。

转载于:https://my.oschina.net/u/205358/blog/127553