CSS 负margin 以及 -100%的理解和3列式左右排版理解

来源：互联网发布：贵阳软件著作权资助编辑：程序博客网时间：2024/05/21 19:30

首先，这个要从box的模型说起（个人理解）：

1> 可以认为margin是由4条（left,top,right,bottom）margin线组成的区域，如图；

2> 这4条margin线和border组成的block没有位置上的明确关系，以left margin为例，margin-left那条线可以在left border的左边，也可以left border那条线的右边，这里可以认为margin-left那条线可以左右浮动，浮动的方向取决于margin-left>0还是<0，>0时，margin-left那条线在left border的左边，<0时，在left border的右边。

那怎么理解负margin,以及margin-left: -100%呢。

以下面的代码为例：

<body>

</div>

</body>

CSS代码：

   #center {
      float: left;
      width: 100%;
      margin-bottom: 2em;
   }

   #left{
      float: left;
      width: 15em;
      margin-left: -100%;
      background: #efd;
    }

    #right {
      float: left;
       width: 20em; /*Width of right column in pixels*/
       margin-left: -20em; /*Set margin to that of -(RightColumnWidth)*/
       background: #efd;
    }

看上面的HTML代码和CSS代码，以及示意图，注意其中的特殊之处在于：HTML代码中是BAC的顺序，通过CSS，可以形成图示ABC的顺序，蛮神奇的，这就是负margin的运用，可以用相对运动的想法去理解，解释如下：

1> #center的width是100%，代表宽度铺满整个页面；

2> #margin-left是-100%，代表margin-left线向border线的右边移动100%width，这是什么意思呢？用相对运动的观点，假设margin-left线不动，那么整个B就要向左移动100%width，而代码中B是紧跟在A后面的，这样，B块就移动到了A的左边

3> 用上面的观点，C向左移动C的width个距离，正好就是在页面右边。

这样，就形成了ABC的排版