相信大家都做过不少的响应式项目，除了项目经理过来的一堆奇葩需求之外，可能还会遇到各种各样的肯定问题，其中border带来的问题是最常见之一。

响应式项目一般使用百分比布局，但是我们border会给我们布局带来麻烦，举个例：

<div class="s">
    <div class="s1">内容1</div>
    <div class="s2">内容2</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;

方法三：
在网页布局中，除了纵向布局外，还有横向布局，这是两个应用最为广泛的布局模式，然而横向布局又较纵向布局应用更加频繁。普通的横向布局，我们都是对每个模块采用固定宽度，然后让它居左浮动起来。这样就可以达到横排的目的。然而这样的布局并不美观，特别是在响应式网页开发中，虽说可以采用百分比的宽度，但终究还是会被margin值和padding值和border值影响，从而导致在不同分辨率下出现右边空缺过大以及折行的现象

解决办法是给它的父级元素设置display的盒模型展示，比如html结构如下：

<div class="flex flex-pack-justify">
<span>模块一</span>
<span>模块二</span>
<span>模块三</span>
<span>模块四</span>
</div>

css代码如下：
/* ============================================================
flex：定义布局为盒模型
flex-v：盒模型垂直布局
flex-1：子元素占据剩余的空间
flex-align-center：子元素垂直居中
flex-pack-center：子元素水平居中
flex-pack-justify：子元素两端对齐
兼容性：ios 4+、android 2.3+、winphone8+
============================================================ */

.flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;text-align:center;color:white;}
.flex span{width:25%;margin:10px;background:#F33;height:200px;}

/扩展/

.flex-v{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
.flex-1{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}
.flex-align-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}
.flex-pack-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
.flex-pack-justify{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}

如此处理后的显示无论你设置子模块宽度多大，它都不会折行，都是在一行上显示完全，左右不留空隙或所留空隙相等。类似满屏居中显示。这样就给我们排版带来了很大的方便性，不用去细调宽度值以及特殊处理独立的模块

方法二（使用display:inline-block）：

<ul class="ul">
<li>内容</li>
<li>内容</li>
<li>内容</li>
<li>内容</li>
</ul>
<style>
.ul{text-align:center;}
.ul li{height:50px;display:inline-block;}
</style>