CSSmarging浅析

一、margin可以为负值

在盒模型中，内容区的width/height、padding、border都不能为负值，但是margin例外，它可以为负值。

关于margin负值的使用技巧，了解不多，日后有机会再补充，此处先贴两个经典应用。

1. margin-left负值结合浮动实现不改变DOM结构的流体布局。

（此demo与CSS float浅析篇中的是同一个。）

  1     DOCTYPE html  > 
  2     html  > 
  3         head  > 
  4             meta   charset  ="utf-8"  > 
  5             title  > 不改变DOM结构的流体布局   title  > 
  6             style  > 
  7               .container   { 
  8                   width  :  600px  ; 
  9                   margin-left  :   auto  ; 
 10                   margin-right  :   auto  ; 
 11                   background-color  :   orange  ; 
 12                   font-size  :   16px  ; 
 13                   line-height  :   1.5  ; 
 14               } 
 15  
 16               .box1   { 
 17                   width  :  100%  ; 
 18                   float  :  left  ; 
 19               } 
 20  
 21               .box2   { 
 22                   margin-right  :   220px  ; 
 23                   padding-left  :   20px  ; 
 24               } 
 25  
 26               img   { 
 27                   width  :  200px  ; 
 28                   float  :  left  ; 
 29                   margin-left  :  -200px  ; 
 30               } 
 31  
 32               .clearfix:after   { 
 33                   content  :   ""  ; 
 34                   display  :   table  ; 
 35                   clear  :   both  ; 
 36               } 
 37  
 38               .clearfix   { 
 39                   *zoom  :   1  ; 
 40               } 
 41  
 42             style  > 
 43         head  > 
 44         body  > 
 45             div   class  ="container clearfix"  > 
 46                 div   class  ="box1"  > 
 47                     div   class  ="box2"  > 
 48                     h3  > 不改变DOM位置的流体布局   h3  > 
 49                     p  > 假如有一段文本和一幅图像，在DOM节点中，文本在前，图像在后，怎么能把图像定位到右边呢？   p  > 
 50                     p  > 通常的做法是，调换DOM节点中图像与文本的位置，让图像在前，文本在后，然后将图像浮动到右边即可。   p  > 
 51                     p  > 但这样改变DOM节点顺序始终不妥，还有什么更好的方法呢？   p  > 
 52                     p  > 下面就介绍一种新的思路来完成布局。   p  > 
 53                     ul  > 
 54                         li  > 将文本用div包起来，定义为box1；现在的结构是一个box1和一个img。   li  > 
 55                         li  > 将box1宽度设为100%，左浮动；将img设置一个宽度，也左浮动，然后margin-left设为负的宽度值；此时图像就定位到文本的右边啦。   li  > 
 56                         li  > 但是有一个问题，图像盖住了文本内容，这可怎么办？   li  > 
 57                         li  > 重点来了，在box1中增加一个box2，box2把文本全部包起来，然后margin-right设为图像的宽度（+额外的间距），这样就解决问题啦！   li  > 
 58                     ul  > 
 59                     div  >    关闭box2  --> 
 60                 div  >    关闭box1  --> 
 61                 img   src  ="http://imgsrc.baidu测试数据/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg"   alt  ="a picture"   style  ="width:200px;height:300px"   /> 
 62             div  >    关闭container  --> 
 63         body  > 
 64     html  >  

查看更多关于CSSmarging浅析的详细内容...