一、负边距与浮动布局
1.1、负边距 所谓的负边距就是margin取负值的情况，如margin:-100px，margin:-100%。当一个元素与另一个元素margin取负值时将拉近距离。常见的功能如下：1.1.1、向上移动
当多个元素同时从标准流中脱离开来时，如果前一个元素的宽度为100%宽度，后面的元素通过负边距可以实现上移。当负的边距超过自身的宽度将上移，只要没有超过自身宽度就不会上移，示例如下：复制代码
<!DOCTYPE html> <html><head>
<meta charset="UTF-8"> <title>负边距</title> <style type="text/css"> * { margin: 0; padding: 0; } #div1 { height: 100px; background: lightblue; width: 100%; float: left; } #div2 { height: 100px; background: lightgreen; width: 30%; float: left; margin-left: -100%; } </style> </head><body>
<div id="div1">div1 </div> <div id="div2">div2 </div> </body></html>
复制代码 margin-left:-29%时运行效果：margin-left:-30%时运行效果：
margin-left:-100%时运行效果：
1.1.2、去除列表右边框
开发中常需要在页面中展示一些列表，如商品展示列表等，如果我们要实现如下布局：
示例代码：
复制代码
<!DOCTYPE html> <html><head>
<meta charset="UTF-8"> <title>负边距</title> <style type="text/css"> * { margin: 0; padding: 0; } #div1 { width: 800px; margin: 0 auto; border: 3px solid lightblue; overflow: hidden; margin-top: 10px; } .box { width: 180px; height: 180px; margin: 0 20px 20px 0; background: lightgreen; float: left; } </style> </head><body>
<div id="div1"> <div class="box"> </div> <div class="box"> </div> <div class="box"> </div> <div class="box"> </div> <div class="box"> </div> <div class="box"> </div> <div class="box"> </div> <div class="box"> </div> </div> </body></html>
复制代码 运行后的结果：但是上面的效果中右边多出了20px的距离，底下多出20px空白，解决方法如下：
复制代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>负边距</title> <style type="text/css"> * { margin: 0; padding: 0; } #div1 { width: 780px; height: 380px; margin: 0 auto; border: 3px solid lightblue; overflow: hidden; margin-top: 10px; } .box { width: 180px; height: 180px; margin: 0 20px 20px 0; background: lightgreen; float: left; } #div2{ margin-right: -20px; } </style> </head> <body> <div id="div1"> <div id="div2"> <div class="box"> </div> <div class="box"> </div> <div class="box"> </div> <div class="box"> </div> <div class="box"> </div> <div class="box"> </div> <div class="box"> </div> <div class="box"> </div> </div> </div> </body> </html> 复制代码 方法是使用了边距折叠，可以在前面的文章中查看到细节，基本原理如下图所示：1.1.3、负边距+定位，实现水平垂直居中
具体请参考《CSS3与页面布局学习总结（三）——BFC、定位、浮动、7种垂直居中方法》1.1.4、去除列表最后一个li元素的border-bottom
方法一：View Code
方法二：使用CSS3中的新增加选择器，选择最后一个li，不使用类样式，好处是当li的个数不确定时更加方便。
如果li的border-bottom颜色与ul的border颜色是一样的时候，在视觉上是被隐藏了。如果其颜色不一致的时候还是有问题，给ul写个overflow：hidden；就可以解决这个问题。
练习：
1.2、双飞翼布局
经典三列布局，也叫做圣杯布局【Holy Grail of Layouts】是Kevin Cornell在2006年提出的一个布局模型概念，在国内最早是由淘宝UED的工程师传播开来，在中国也有叫法是双飞翼布局，它的布局要求有几点：1、三列布局，中间宽度自适应，两边定宽；
2、中间栏要在浏览器中优先展示渲染； 3、允许任意列的高度最高； 4、要求只用一个额外的DIV标签； 5、要求用最简单的CSS、最少的HACK语句；在不增加额外标签的情况下，圣杯布局已经非常完美，圣杯布局使用了相对定位，以后布局是有局限性的，而且宽度控制要改的地方也多。在淘宝UED（User Experience Design）探讨下，增加多一个div就可以不用相对布局了，只用到了浮动和负边距，这就是我们所说的双飞翼布局，实现的代码如下：
复制代码
<!DOCTYPE html> <html><head>
<meta charset="UTF-8"> <title>双飞翼</title> <style type="text/css"> * { margin: 0; padding: 0; } body, html { height: 100%; font: 20px/40px "microsoft yahei"; color: white; } #container { width: 90%; margin: 0 auto; height: 100%; } #header, #footer { height: 12.5%; background: deepskyblue; } #main { height: 75%; } #center, #left, #right { height: 100%; float: left; } #center { width: 100%; background: lightgreen; } #right { background: lightblue; width: 20%; margin-left: -20%; } #left { background: lightcoral; width: 20%; margin-left: -100%; } #main-inner { padding-left: 20%; } </style> </head> <body> <div id="container"> <div id="header"> header </div> <div id="main"> <div id="center"> <div id="main-inner"> center </div> </div> <div id="left"> left </div> <div id="right"> right </div> </div> <div id="footer"> footer </div> </div> </body> </html>例如：
<div id="cui_nav">
<div class="base_nav"> <ul id="cui_nav_ul" class="cui_nav cui_content"> <li id="cui_c_ph_hp">首页</li> <li class="divider "></li> <li id="cui_nav_hotel">酒店<div class="cui_subnav_wrap"> <ul id="ul_nav_hotel" class="cui_sub_nav"> <li id="ul_c_ph_hotel_h">国内酒店</li> <li class="divider "></li> <li id="ul_c_ph_hoteli_h">海外酒店</li> <li class="divider "></li> <li id="ul_c_ph_apartment_h">海外民宿+短租</li> <li class="divider "></li> <li id="ul_c_ph_tuan_h">团购</li> <li class="divider "></li> <li id="ul_c_ph_hotsale_h">特价酒店</li> <li class="divider "></li> <li id="ul_c_ph_tujia_h">途家公寓</li> <li class="divider "></li> <li id="ul_c_ph_taocanj_h">酒店+景点</li> <li class="divider "></li> <li id="ul_c_ph_inn_h">客栈民宿</li> <li class="divider "></li> <li id="ul_c_ph_meeting_h">会场+团队房</li> </ul>酒店订单 ></div> </li> <li class="divider "></li> <li id="cui_nav_vac">旅游<span class="label-en" id="ACT_Label_31" style="display:none"><em>12-12</em><i class="triangle"></i></span><i class="cui_ico_triangle"></i><span class="point"></span><div class="cui_subnav_wrap"> <ul id="ul_nav_vac" class="cui_sub_nav"> <li id="ul_c_ph_vacations_v">旅游首页<span class="label-cn" id="ACT_Label_30" style="display:none"><em>5折起</em><i class="triangle"></i></span></li> <li class="divider "></li> <li id="ul_c_ph_around_v">周末游</li> <li class="divider "></li> <li id="ul_c_ph_vacationsd_v">跟团游</li> <li class="divider "></li> <li id="ul_c_ph_taocan_v">自由行</li> <li class="divider "></li> <li id="ul_c_ph_cruise_v">邮轮</li> <li class="divider "></li> <li id="ul_c_ph_taocanj_v">酒店+景点</li> <li class="divider "></li> <li id="ul_c_ph_huodong_v">当地玩乐</li> <li class="divider "></li> <li id="ul_c_ph_zhutiyou_v">主题游<span class="label-en" id="ACT_Label_21" style="display:none"><em>HOT</em><i class="triangle"></i></span></li> <li class="divider "></li> <li id="ul_c_ph_baotuan_v">定制旅行</li> <li class="divider "></li> <li id="ul_c_ph_youxue_v">游学</li> <li class="divider "></li> <li id="ul_c_ph_visa_v">签证</li> <li class="divider "></li> <li id="ul_c_ph_mice_v">企业会奖</li> <li class="divider "></li> <li id="ul_c_ph_hh_v">顶级游</li> <li class="divider "></li> <li id="ul_c_ph_golf_v">爱玩户外</li> <li class="divider "></li> <li id="ul_c_ph_insurance_v">保险</li> <li class="divider "></li> <li id="ul_c_ph_deals_v">特卖汇</li> </ul></i><a href="http://jiaxing.changtu.com/">嘉兴客运中心官网</a></div> </li> </li>