负值之美：负值在页面布局中的应用
http://www.topcss.org/?p=94
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8" /> <title></title> </head> <body> <style type="text/css"> *{margin:0;padding:0} body{height:4000px;color:#000;font:12px/1.5 arial} ul{list-style:none} .box1{position:absolute;top:50%;left:50%;margin-top:-100px;margin-left:-100px;width:200px;height:200px;background:#f00} .box2{width:320px;overflow:hidden;border:1px solid #000} .box2 ul{float:left;margin-right:-10px;margin-bottom:-10px} .box2 li{float:left;width:100px;height:100px;margin:0 10px 10px 0;background:#f00} .box3{width:200px;border:1px solid #000} .box3 li{height:20px;margin-bottom:-1px;border-bottom:1px solid #000} </style> <div class="box1"></div> <div class="box2"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <ul class="box3"> <li></li> <li></li> <li></li> </ul> </body> </html>