本文主要阐述了，自己在对这篇文章（http://www.cnblogs.com/imwtr/p/4441741.html）的理解过程中感到困惑的地方做个补充。
先对圣杯布局作补充：
之前对盒模型不是很理解，只知道单独的一个盒子是怎样的。但是，却不知道多个盒子在嵌套，并列时，相互之间的关系该是如何的。
- 由于父container设置了左右padding，所以 父container的所有子元素在水平方向的活动区域 被限制在(窗口的宽度 减去 父container的左右padding)这个范围内。为了之后叙述方便称“(窗口的宽度 减去 父container的左右padding)”为tWidth。
由于middle设置了width：100%，所以middle的宽度为tWidth。- 在middle, left, right设置了float之后，middle占据第一行，left，right在第二行从左到右紧挨着排列(left, right之所以在第二行，是因为middle的宽度占满了第一行，所以left，right被挤到了第二行)。
- 在left被设置了margin-left: -100%后(margin-left的value取正整数时，left元素会相对其左侧元素的右边框向右移动。value取负值，left元素则向左移动)，向左移动tWidth的宽度。
(可以把middle和left看作是紧挨着的2个元素，只不过第一行没有空间放置left，才把left放置到第二行) 将left元素向左移动tWidth后，正好middle和left的左边框对齐。
在left元素移动后，right元素左侧紧贴middle元素右侧，位于第二行。接着设置margin-left：-220px后，right左移了220px。并且right宽度为220px，所以 right右侧紧贴middle元素右侧。- left，right元素设置relative，并且使用left，right属性调整position。使得left，right元素占据 父container的padding区域。
双飞翼布局 不同于 圣杯布局的地方 在于：
- 双飞翼：main，sub，extra三者并列浮动。main元素包含了main-inner元素。
圣杯： middle，left，right三者并列浮动。没有嵌套。- main的宽度100%占据窗口的宽度。sub的margin-left：-100%也是左移了窗口的宽度。
- main-inner设置margin-left和margin-right是为了使自己的内容想中间缩。这样移动left元素，right元素后，不会叠在main-inner的内容上。
自己可能说的不太清楚，果然自己理解不透 是给别人 讲不清的。那就先这样吧。
网友评论