《CSS禅意花园》读书笔记－－第三章

上周五考完试，现在终于有时间来整理一下我的禅意花园读书笔记了，第三章是正文布局，从标题就可以看出来这一章会比前两章更有技术含量（这里的技术是指CSS布局技术），事实也确实如此，我从中学到了不少技巧。
首先我要说说给我印象最深的一个技巧－－使用负外边距来让容器居中。现在广泛使用的实现容器居中的方法就是自动外边距，即：
#container {
margin:0 auto;
width:800px;
}
但这种被认为最合理、最正确的方法却不一定有最佳的浏览器兼容性（低于6.0版本的IE浏览器不支持，令人欣慰的是现在的浏览器都能很好地支持自动外边距），因此禅意花园30号作品的设计师采用了一种出乎人们意外的解决方案－－绝对定位＋负外边距。代码如下：
#container {
position:absolute;
left:50%;
width:800px;
margin-left:-400px;
}
真是巧妙，既没用到自动外边距也没用到晦涩的text-align:left;(至于我为什么用晦涩来形容后者，后面再解释），这就注定了它的广泛适用性，据原文知，这种居中方法甚至在Netscape navigator 4.x中都没有任何问题，真让人吃惊！
接下来说说内容溢出的解决办法，当两个子容器的宽度总和超过它们目容器的宽度时就会发生溢出，这个问题在实践中经常能碰到，解决办法就是精确计算浮动元素的宽度，这个方法是所有人都第一时间能想到的，但有时即使计算得很精确，内容也不那么听话地跑了出去，该怎么办？如果使用的是IE，而且内容是里有斜体文字，那么就从它们身上找问题吧！这是我以前从没想过的问题，遇到溢出后只会一味地调整宽度，原来在IE中斜体文字非常可能导致水平溢出。
另外就是绝对定位时溢出的解决办法,原文给出了这样一个链接,是一个“清除”绝对定位元素脚本 .
其它的就是一些我以前知道并熟知的一些布局技术,这里就不多说了,毕竟是笔记不是教程,所以只会多针对一些自己需要了解的问题来说!还有就是一些设计方面的知识了,由于我对设计知之甚少,有些体会用言语也表达不出来,所以设计方面的技巧就暂时不写了.
现在解释一下前面我说的晦涩，因为text-align:center;也常用在元素居中上，它本是用来使文本居中对齐的，把它用在容器的居中上按常理来说是hack，而在完全遵循标准的浏览器上并不会使容器居中，只会使其中的文字居中显示。况且这种方法也代来额外的工作，因为一旦在一个容器中定义了text-align:center;那么它的子孙元素都会继承这个属性来居中显示，而要它们按以前的样式显示就得再在它们的样式里定义text:align:left;(或right)来覆盖前面的样式，这样一来就麻烦了不少，再说遵循W3C也是今后的趋势，养成一个好习惯也可以在以后少走点弯路！