常用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; }
负边距的应用：
- 两列等高
- 不受结构影响的浮动布局（http://www.cnblogs.com/my_front_research/archive/2010/12/03/1895410.html）
- 多余的边距毁灭
下面讲讲多余边距毁灭的布局。这种布局在图片展示列表页中很常见。如下图：
这是从豆瓣电影首页截取的图，上图中的第四列图片也是存在右边距的，但是豆瓣的这个电影展示列表却卡死了宽度，并预留了多余的边距，所以不用去消灭多余的右边距。
现实中，很多不是豆瓣这么做的，真正的宽度就是红色框部分，怎么办？
有两种解决方案，现罗列如下：
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追求的。
