头痛的layout (2)
书接上回(头痛的layout)，这次我们要实现稍复杂一点的。
1. 加入头部和尾部：
如图所示。
代码如下，也可以试着自己修改一下再看效果：
使用的手法和前几例差不多，同样：
- 测试了主流浏览器，应该都能兼容。
- 支持标准模式和怪癖模式。
- #header的position:relative和top:10px实现头部空白，如果使用margin:10px，根据margin合并原则，父元素body将会多出10px的margin，导致滚动条出现。
- #main的border: 1px solid必须和#wrapper的border-bottom: 1px solid配合使用。
- 计算#wrapper和#main的margin时要注意将border等考虑进去。
- #wrapper的width要考虑#header与#footer的border。
- #footer的原理与#header相似。
- #footer:after是为了修复chrome下滚动条出现后底部空白消失的问题。
- #header和#footer的height设定，由于盒模型的问题以及ie6的特殊性，所以使用#header,#footer的height: 30px;及* html #header,* html #footer的height: 32px来区分大部分浏览器，而用* html #header,* html #footer的height: expression(document.compatMode == 'BackCompat' ? '32px' : '30px')的特殊方式来处理。
2. 进一步深化，中间出现边栏
如图所示：
代码如下，也可以试着自己修改一下再看效果：
解释：
- 测试了主流浏览器，应该都能兼容。
- 支持标准模式和怪癖模式。
- 上中下布局的原理和前一个例子一样，主要是中间左中右的布局，左中右这种经典的布局已经有很多先辈尝试研究过了，留下不少宝贵的资料，具体的可以看这里，看这里，看这里，但是.....
经过我个人测试，
holy grail在ie6下左栏会有闪烁问题，宽度过小时还会消失，怪癖模式完败；
any order在ie7，6下右栏有时会有闪烁；
layout galary很ok，没测出什么问题。 - #wrapper根据左右边栏占据的空间计算好padding:0 240px 0 180px，配合#main的width:100%就实现了#main宽度的自适应。
- 将#nav,#main,#side都设成float:left，然后利用负边距技术，分别摆放至正确位置，不需要任何的wrapper div。
口诀是：让左边的归左边，让右边的归右边，多么的好记啊。 - 除ie以外的主流浏览器都支持:after，我们就利用这个来画中间层的底部border，#wrapper的position:relative和:after的position:absolute及bottom:0，顺利将层定位到了中间各栏的底部，接下来就各自指定一下width,left,right之类就完毕了。
- ie总是那么的出众，为了兼容ie，总要耗费许多额外的精力，这回使用了ie的条件判断<!--[if IE]>...<![endif]-->，额外构造了一些div来实现底部border的效果，原理还是那句：让左边的归左边，让右边的归右边。
- 不要忘记#bborder_wrapper div的line-height:0，作用参考不屈服的div。
- * html #nav, * html #nav_bborder的display: inline修复ie6下float的margin引发的IE6 Doubled Float-Margin Bug。
- #wrapper的相对定位在ie6下会引发bug，用* html #wrapper的position: static重置。
