对于双飞翼布局中的margin-left:-100%的理解

1、布局代码

2、css代码

3、显示结果（ppt做的，方便讲解）

如图所示：
    container是个父容器，他有三个子元素，left,right以及main 。双飞翼布局要求左右两边固定宽度，中间随着浏览器窗口变化而变化。

首先，给定父容器container和main,main的宽度为width:100%;

然后放上left ,这里的left的maigin-left:-100%之前就让我很迷惑，现在弄懂了

这里的100%是相对于父元素（container）来说的，（margin-left的意思是子元素的左边框距离父元素右边框的距离，我这里没考虑padding,border等因素哈），如图：

可以看到，当设置left元素的margin-left:-100%;时，left元素的左边框会与container的左边框重合。

同样，设置right元素的位置为margin-left:100px;这里的100px指的是right元素的宽度，

最后设置中间的main-inner元素，他是main元素的子元素，和圣杯布局不同之处也是这里，利用main元素的padding{0 100px 0 100px}来让main-inner实现居中，并且能跟随main元素宽度变化而变化

总结：这次主要是对margin的理解不够到位，要是充分理解了margin，就一眼能看懂这个布局了

作者：Night_Nine_Leaves
来源：CSDN
原文：https://blog.csdn.net/Night_Nine_Leaves/article/details/79660762
版权声明：本文为博主原创文章，转载请附上博文链接！