最近做的项目很多都要求响应式布局，即使不要求响应式，我们在普通的固定布局中也会偶尔使用百分比来设置元素宽度以提高更好的维护性和方便性。

而在使用百分比的时候我们经常会遇到一些不可控的因素影响布局模式，比如说最可恶的border属性，放出代码比较好说话：

<div class="s">
<div class="s1">秋叶网络博客</div> <div class="s2">netblog.cn</div>
</div>

<style>
.s{width:800px;}
.s1,.s2{float:left;width:50%;height:200px;background:#009;border:1px solid red;}
</style>

s是个大容器，它的宽度为800px，里面包含两个子级div，都为float:left;width:50%;试图让这两个div排在同一行上，然而border的加入，使得右边的div[class=‘s2’]换到另外一行去了，因为border占据了1px的宽度，所以s1和s2加起来的宽度是400+400+1+1+1+1=804px>800px,所以造成第二个div[class=‘s2’]换行，要想知道为什么，首先需要了解float的特性，它总是把一行中最末尾的元素（如果显示需要超出父容器宽度），换到另外一行去。这里提供两种解决办法：

方法一(outline代替border):

outline同样可以设置边框，只不过outline定义的边框在元素内部（不占用元素外的空间），border定义的边框在元素外部（占用元素外的空间），所以同样的边框属性我们可以这样写outline:1px solid red然而outline总是和上下左右四边框同时存在联系在一起，而不像border一样可以定义border-left，border-right等等，所以具有一定的局限性。

最好的办法是第二种(box-sizing):

给s1和s2设置属性box-sizing：border-box；这样不仅解决了border的自适应，还解决了padding的自适应，box-sizing语法:

box-sizing: content-box|border-box|inherit;

content-box：元素默认的属性。border,padding宽度和高度分别应用到元素的框内。在宽度和高度之外绘制元素的内边距（padding）和边框（border）。 border-box：为元素设定的宽度和高度为绝对宽度和高度，即不会根据border,padding的影响。就是说，为元素指定的任何内边距（padding）和边框（border）都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框（border）和内边距（padding）才能得到内容的宽度和高度。 inherit：规定应从父元素继承 box-sizing 属性的值，父元素是啥就是啥。

专业化描述：

content-box:content-width = width+padding-left+padding-right+border-left+border-right; border-box: content-width = width-padding-left-padding-right-border-left-border-right;

方法三：阅读《使横向并排的模块两端对齐不折行》