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

WEB前端 waitig 472℃ 百度已收录 0评论

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上,这样既实现了宽度分离(自适应于父标签,同时内部元素又自适应于自身,而且没有了计算,后期维护也更容易了),又没有多余的层级。

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


本文由【waitig】发表在等英博客
本文固定链接:css自适应布局之无宽度原则
欢迎关注本站官方公众号,每日都有干货分享!
等英博客官方公众号
点赞 (0)分享 (0)