css自适应布局之无宽度原则

1.何为宽度分离？

所谓“宽度分离”，就是CSS中的width属性不与影响宽度的border/padding(有时候包括margin)属性共存。

即不能出现以下的些组合：

{width:200px; border:1px solid #ccc;}

或者是：

{width:200px; padding:20px;}

2.为什么要宽度分离

宽度分离”无计算，扩展性强，容错性强，可以让写页面更轻松。

在页面制作与CSS中，所有的div标签默认都是流动的，如水流般会自动填满整个容器。然而，很多属性会阻断这种流动性，例如浮动，绝对定位以及宽度(width)属性。所以，流体布局中应该尽可能的避免浮动，绝对定位以及宽度。然而，本文的前提就是针对有些必不可少的宽度，这些width属性就像是一个限定了尺寸的盒子。虽然width属性会阻断流动，但是会影响宽度的border属性以及padding属性却不会阻断div标签的流动性。试想下，一个盒子里如果只有流动的水流，这个盒子永远不要担心会被撑爆，因为水流只会受限于盒子，反过来则是不行的。也就是说将width属性与border/padding属性分离的话，就不用担心里面的内容（里面的内容需遵循“无宽度准则”）会因为宽度溢出撑开布局而造成错位了。这让我们只关心“最终宽度”没有了后顾之忧。//zxx:容错性强

同时，由于水流可以盛放与任何容器中，所以，一旦“水流”形成，几乎就可以无限制重用。同时，这个尺寸的容器也是可以放置其他的水流的。//zxx:重用性强

按照这里的分析，“宽度分离”实际上类似于化学上的“固液分离”。

3.如何实现宽度分离

举个例子，完成下面这个页面：

要实现这个例子，普通的代码是这样：
HTML:

<div class="box">
    <strong>温馨提示</strong><br />
    团购成功后，消费凭证将发送到手机：<strong class="cr">132 0803 3621</strong>，凭短信去商家消费。
</div>

CSS:

.box{width:430px; padding:20px; border:1px solid #ddd;}

而宽度分离下的情况则是这样：

HTML:

<div class="box">
   <div class="box_in">
        <strong>温馨提示</strong><br />
        团购成功后，消费凭证将发送到手机：<strong class="cr">132 0803 3621</strong>，凭短信去商家消费。
    </div>
</div>

CSS:

.box{width:470px;}
.box_in{padding:20px; border:1px solid #ddd;}

对比一下可以看出“宽度分离”的实现其实就是以牺牲一层标签为代价，将width属性放在外层标签上，其余的放在内层标签上。这里看似多了层标签，实际上权衡下来，裨益相对于损耗要大很多很多。

4.示例

1. 京东（正）：
   
   我们用小bug(我对firebug的昵称)看下此处的CSS代码，可以看到宽度分离了，即最外层标签仅仅只有width属性：
   
   而影响宽度的border属性以及padding属性全部写在了内部的标签上：
   
   好处：
   其一，不要去计算了。多省心啊，直接1200像素，否则还要1200 - 20 * 2 - 1 * 2 = 1158去计算，诶呦呦呦，这多闹心啊！

   其二，重用性高了。你瞧，这.w{width:1200px}很多地方都可以使用，如果不分离出来，oh, my lady gaga, 一个模块一段宽度相关样式，这纯粹属于闲得蛋疼没事找事。

   其三，维护方便了。你说要是以后这padding值要改成左右15像素的，如果是宽度分离的写法，只要修改padding属性就可以了。分离的思想就是：我只关注最最外面的宽度，里面你随便怎么折腾都不干我屁事。要是以后要修改最外框的宽度为1260像素，就直接修改width:1200px为width:1260px就可以了，因为自适应部分已经分离出来了，如流水般自适应外部的容器。但是，倘若是使用一层标签，CSS是width+border+padding这种暧昧不清的写法，当我们修改padding的时候，不仅要改padding属性，同时width属性的值还要重新计算与修改，属性相互关联，牵一发而动全身。

2. 淘宝列表项（反）：
   

   显然，这里的列表CSS有悖本文的主题“宽度分离原则”，width属性与含有水平padding值的属性写在了一起，首先不说别的，估计这里的宽度计算与调试估计折腾了不少时间。您可能会想，是不是使用：

   .category-item li{
   float:left;
   width:228px; /*修改宽度*/
   height:21px;
   margin-bottom:5px;
   overflow:hidden;
   }

   嘿嘿，不是的！对于等宽列表而言，虽然宽度分离可以较少一些后期维护的工作量，但是，如果还是定值的话计算还是不可避免的，因为你需要做“总宽/3”的计算，例如684 / 3 = ?。所以，如果是我，不仅会宽度分离，而且宽度会使用百分比而不是定值，因为不需要计算啦。如下CSS：

   .category-item li{
   float:left;
   width:33.3%; /*修改宽度*/
   height:21px;
   margin-bottom:5px;
   overflow:hidden;
   }

   还是那句话，我只关心结果，你父标签宽度多少与我没有任何关系，我只知道我是等宽列表，而且一行三个，所以，我的宽度百分比就是100 / 3 = 33.3%，至于里面怎么内讧，外面怎么凌乱都不管我的事，我只关心结果，与我相关的结果，我最终的宽度。

   本实例中，实际上是里面是不需要再包裹一层标签的，因为里面已经有h4标签和span标签供使用了，按照“精简高效的CSS命名准则/方法”的观点是不推荐直接使用.category-item h5这样的选择器，但是，这是淘宝网，人家已经用了，不用白不用，所以，我们可以把padding-left的10像素可以margin-left:10px;以写在.category-item h5上，而padding-right的26像素可以以margin-right:26px;的形式(或省略)写在.category-item li span上，这样既实现了宽度分离（自适应于父标签，同时内部元素又自适应于自身，而且没有了计算，后期维护也更容易了），又没有多余的层级。

本文摘抄自：张鑫旭个人博客