负边距在布局中的应用
根据前几天对css负边距的研究（《浅析css负边距》），在理解负边距的原理之后，可以用在以下情况当中。
一、两列布局
1、右侧定宽，左侧宽度自适应
思路：要实现效果，首先，左侧的宽度要能够自适应，那么宽度可选100%或auto，我们知道设置成100%会使左侧div的宽度为父元素的100%，设置成auto会根据左侧div的实际大小自适应宽度，那如果div里面有块级元素，右侧就会被挤到下一行，所以我们选择100%；然后我们需要在左侧div的右边空出位置给右侧div，那么只要把左侧div的宽度变短，设置右外边距为负值即可，然后负值是多少呢？当然是右侧div需要多少就是多少啦！
实现：左侧和右侧的div都设置左浮动，左侧宽度100%，并设置margn-right为右侧宽度的负值。
验证：代码如下。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>右侧定宽，左侧宽度自适应布局</title> 6 <style> 7 #left{ 8 height: 200px; 9 background-color: red; 10 float: left; 11 12 width: 100%; 13 margin-right: -200px; 15 } 16 #right{ 17 height: 200px; 18 background-color: blue; 19 width: 200px; 20 float: left; 21 } 22 </style> 23 </head> 24 <body> 25 <div id="wraper"> 26 <div id="left"></div> 27 <div id="right"></div> 28 </div> 29 </body> 30 </html>
效果图如下图图一，且左侧缩放自如。
图一：
二、三列布局
1、左右两列定宽，中间一列宽度自适应
思路：假设左右两列宽200px，要实现效果，可以让3个div都左浮动，然后给予一定的设置让它们能够显示在一行，主要就是让右列不要被挤下去，那么我们只要让中间列把右列的位置空出来即可，怎么空出来？不要再问了吧，不懂就看上文吧！
实现：3个div都左浮动，左右两列定宽200px，中间列宽度设置为100%，留给右列的宽度绝对值为左列宽度加右列宽度400px。
验证：代码如下。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>右右定宽，中间宽度自适应布局</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 #left{ 12 height: 200px; 13 width: 200px; 14 background-color: red; 15 float: left; 16 } 17 #right{ 18 height: 200px; 19 width: 200px; 20 background-color: blue; 21 float: left; 22 } 23 #middle{ 24 height: 200px; 25 background-color: yellow; 26 float: left; 27 28 width: 100%; 29 margin-right: -400px; 30 } 31 </style> 32 </head> 33 <body> 34 <div id="wraper"> 35 <div id="left"></div> 36 <div id="middle"></div> 37 <div id="right"></div> 38 </div> 39 </body> 40 </html>
效果图如下图图二。
图二：
三、单列布局
单列布局主要用在一个div垂直水平居中。
思路：要实现效果，可以设置绝对定位，把top和left都设置为50%，这样div的左上角就到正中间了，但要实现效果我们是需要把div的中心点放到正中间，这时，我们可以利用负边距把div的中心点拉到正中间。怎么做呢？margin-top和margin-left再设置为width的一半的负值，使div向上、向左移动对应边长的一半，就把中心点拉过来了。
代码如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>垂直水平居中</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 #wraper{ 12 width: 400px; 13 height: 200px; 14 background-color: red; 15 16 position: absolute; 17 left: 50%; 18 top: 50%; 19 margin-left: -200px; 20 margin-top: -100px; 21 } 22 </style> 23 </head> 24 <body> 25 <div id="wraper"></div> 26 </body> 27 </html>
效果图如下：
