常用css布局技巧[二]

上一节讲的是大的布局。这次讲讲一些小地方的布局。

包括:

  • 垂直居中一个模块
  • 最小一屏布局
  • 居中浮动模块
  • 负边距应用

先说第一个问题,如何垂直居中一个模块

首先,模块的宽度和高度固定吗?

固定的情况下:

html:

<div id="wrapper">
    <div id="mod">
        <h1>我是盒子</h1>
    </div>
</div>

css:

* { margin:0; padding:0; }
body { font:12px/1.5 arial; }
#wrapper { position:relative; height:400px; width:600px; border:2px solid orange; }
#mod { position:absolute; width:100px; height:100px; top:50%; left:50%; margin:-50px 0 0 -50px; background:#eee; color:#666;  }
#mod h1 { font-size:12px; }

不固定宽度和高度,怎么办?

你妹啊,我们先不管IE6,7,好不?这样问题就简单多啦。使用table啊,模拟table啊,table-cell。

html:

<div id="wrapper">
    <div id="box">
         <h1>我是盒子</h1>
    </div>
</div>

css:

#wrapper { display:table; height:400px; width:400px; border:2px solid orange; }
#box { display:table-cell; text-align:center; vertical-align:middle; }

那么,针对IE6,7,可以使用多一层的嵌套来实现:

html:

<div id="wrapper">
    <div id="box">
        <div id="mod">
            <h1>我是盒子</h1>
        </div>
    </div>
</div>

css:

#wrapper { display:table; height:400px; width:400px; border:2px solid orange; *position:relative; }
#box { display:table-cell; text-align:center; vertical-align:middle; *position:absolute;  *top:50%; left:50%; background:#eee;}
#mod { *position:relative; *top:-50%; *left:-50%; background:red; }

最小一屏布局http://www.cnblogs.com/my_front_research/archive/2010/12/03/1895385.html

居中浮动模块:即把浮动的模块在其包含框中水平居中

有两种技巧,上面的布局中已经讲述了一种基于定位方式的布局,下面阐述第二种,基于display:inline-block的布局技巧。

原理是:inline-block有inline属性,对于inline的文本,盒子,父包含框使用text-align:center即可把子元素居中。

html:

<div class="wrapper">
    <div class="inner">
        <div class="float_box">
            <h1>float box</h1>
        </div>
    </div>
</div>

css:

.wrapper { border:1px solid red; text-align:center; font-size:0; /*清除非IE由于display:inline-block;属性产生的底部多余空白bug*/}
.inner { display:inline-block; *display:inline;*zoom:1; border:2px solid green; font-size:12px;  }
.float_box { float:left; border:2px solid red;  }

负边距的应用

下面讲讲多余边距毁灭的布局。这种布局在图片展示列表页中很常见。如下图:

这是从豆瓣电影首页截取的图,上图中的第四列图片也是存在右边距的,但是豆瓣的这个电影展示列表却卡死了宽度,并预留了多余的边距,所以不用去消灭多余的右边距。

现实中,很多不是豆瓣这么做的,真正的宽度就是红色框部分,怎么办?

有两种解决方案,现罗列如下:

html:

<div id="img_list">
    <div class="inner">
        <ul>
            <li><a href="#"><img src="http://img3.douban.com/mpic/s12620955.jpg" height="148" width="99" alt="007:大破天幕杀机" /></a></li>
            <li><a href="#"><img src="http://img3.douban.com/mpic/s12620955.jpg" height="148" width="99" alt="007:大破天幕杀机" /></a></li>
            <li><a href="#"><img src="http://img3.douban.com/mpic/s12620955.jpg" height="148" width="99" alt="007:大破天幕杀机" /></a></li>
            <li><a href="#"><img src="http://img3.douban.com/mpic/s12620955.jpg" height="148" width="99" alt="007:大破天幕杀机" /></a></li>
            <li><a href="#"><img src="http://img3.douban.com/mpic/s12620955.jpg" height="148" width="99" alt="007:大破天幕杀机" /></a></li>
            <li><a href="#"><img src="http://img3.douban.com/mpic/s12620955.jpg" height="148" width="99" alt="007:大破天幕杀机" /></a></li>
            <li><a href="#"><img src="http://img3.douban.com/mpic/s12620955.jpg" height="148" width="99" alt="007:大破天幕杀机" /></a></li>
            <li><a href="#"><img src="http://img3.douban.com/mpic/s12620955.jpg" height="148" width="99" alt="007:大破天幕杀机" /></a></li>
        </ul>
    </div>
</div>

固定宽度(和高度)的css解决方案

ul { list-style:none outside none; }
#img_list .inner { width:456px; background:#ddd; overflow:hidden; }
#img_list .inner ul { width:476px; overflow:hidden; zoom:1; }
#img_list .inner ul li { float:left; margin:0 20px 20px 0; }
#img_list .inner ul li a { display:block; width:99px; height:148px; }
#img_list .inner ul ii a img { display:block; width:99px; height:148px; }

使用负边距的css解决方案:

ul { list-style:none outside none; }
#img_list .inner { width:456px; background:#ddd; }
#img_list .inner ul { margin-right:-20px; overflow:hidden; zoom:1; }
#img_list .inner ul li { float:left; margin:0 20px 20px 0; }
#img_list .inner ul li a { display:block; width:99px; height:148px; }
#img_list .inner ul ii a img { display:block; width:99px; height:148px; }

负边距的好处在于,可以灵活设置宽度,以控制列表列数的显示。以上代码只是对inner进行了宽度设置。比固定宽度的方案要健壮多了。

灵活使用负边距可以做很多事情。而通常替代性的解决方案可能是使用class="first"或者class="last"来做(结构性伪类:first-child或者:last-child能使用的时候,IE6就见鬼去了),此种情况是基于html结构稳定的情况。

对于不固定的html结构(比如后端控制输出,数据取自数据库),不支持伪元素选择器的IE6就捉襟见肘了,而且也无法使用class="first"或者class="last"来进行多余边距的消除。

比如天猫商城首页的导航:

从截图上来看,天猫商城的导航结构是固定的,为了消除百事淘宝的分割线背景,添加了mallNav-last这个类来进行样式覆盖。

假如不是固定的,那么这个做法就行不通了。如果不考虑IE6的话,简单可行的办法则是 :

.mallNav-main li:last-child { background:none;}

考虑IE6的话,就需要使用负边距,多嵌套一层结构了。

总结:

任何奇技淫巧,都不是我们所追求的,这在维护上会带来很大的麻烦。简单明了的解决方案才是最佳的。这是我们追求的,也是css追求的。

posted @ 2013-01-09 17:06  xmlovecss  阅读(421)  评论(0编辑  收藏  举报