cssmagic
commented
8 years ago 评论存档
-
www.ddig.info [2009-10-12 10:57 AM]
受教了，继续挖掘这一特性去 :flushed:
-
独孤逸辰 [2010-01-30 02:39 PM]
外边距溢出该如何解释那？
cssmagic [2010-01-30 09:30 PM]
就是“外边距叠加”的一种特殊的表现。
-
duanhun87 [2010-03-06 10:55 AM]
当时我看书的时候就纳闷了，明明外边距合并是w3c的规范，怎么被作者说成是一种bug呢？想上网批斗一下的，哈哈哈，博主竟然发现了。。。
《CSS 网站布局实录：基于 Web 标准的网站设计指南》是一本非常经典的国产 CSS 教材，也是我的 CSS 启蒙书，我认为它适合每一位初学 CSS 的朋友阅读。此书第一版发布于 2006 年 9 月，上市不久即被发现存在较多的字面错误；于是一年后此书发行第二版，修正了部分错误，并针对行业趋势补充了少量章节。但是读者发现，在第二版中，仍然存在较多笔误。
尽管如此，《CSS 网站布局实录》仍然是当前最值得推荐的 CSS 教材之一，也正因为如此，有热心读者自发为此书整理和维护着多份勘误表。
除了这些字面错误之外，我发现《CSS 网站布局实录》还存在一个非常重大的概念错误，在第二版中依然延续，极易误导初学者。由于它鲜被提及，因此我决定记录成文，为这本书的读者做一个提示。
原文
我们看一下《CSS 网站布局实录》的 “第 7 章：浏览器兼容与解析问题” 下的 “7.7 高度不适应” 的这个小节，这里提到了一个 “高度不适应” 的现象，原文节选如下。
这一现象被作为浏览器渲染 bug 安排在了第 7 章，但事实上这种 “高度不适应” 并非 IE 或 Firefox 等浏览器的 bug。相反，这种表现是符合 CSS 规范的——虽然看起来似乎 “不太合理”。这种 “高度不适应” 是 CSS 盒模型 “外边距重叠” 特性的一种表现。
外边距重叠
“外边距重叠” 的英文原文是 “Margin Collapsing”，由于翻译的问题，通常又可能被称作 “空白边/margin 叠加/合并/塌陷” 等等。“外边距重叠” 是盒模型的重要特性之一，CSS 学习者必须了解和掌握。
“外边距重叠” 的表现在于，一个元素的垂直方向上的外边距可能会和其它元素或者它自身的垂直外边距进行重叠。这种重叠的行为并不像我们期望的那样把两个外边距相加，而是取其中的较大者；同时，这种重叠行为可能会连续发生，也就是说，可能会有多个元素的垂直外边距会重叠在一起。
“外边距溢出”
此外，外边距重叠还有一个非常特殊的情况，它也就是本文勘误的重点。我们来看一种实战当中比较常见的形情，我称它为 “外边距溢出”：
这种表现与我们的期望大相径庭。因此，很多人误以为这种现象是浏览器 bug（有网友将其戏称为 “margin 劫持”），但实际上浏览器的这种表现是正确的。本文所要澄清的《CSS 网站布局实录》一书中的重要错误也在于此。
更多讨论
相信每位 CSS 学习者都会提出一个疑问：为什么 CSS 规范要设置这么一个 “莫名其妙” 的规矩？
这实际上是为了更好地进行文章排版。限于篇幅，本文不做赘述，推荐阅读《精通 CSS》一书的《2.1.2 空白边叠加》一节（第一版中文版 P25～27）。当然我们也可以参考《CSS 权威指南》的相关章节，但《精通 CSS》在这个问题上的描述更加生动和到位。
除此以外，本站也会推出相关的文章，帮助你更好地剖析和掌握 “外边距重叠” 特性，同时提示你正确认识 IE6,7 在处理外边距重叠方面的问题，引导你如何在页面布局中避免它所带来的因扰，并且告诉你如何利用这一特性进行精确的文章排版。
相关阅读