SS中margin边界叠加问题及解决方案.docVIP

你对CSS的margin边界叠加的概念足否了解，这里和人家分亨一卜*,当一个元索出现 在另一个元素上面吋，第一个元素的底边界与第二个元素的顶边界发生叠加。 CSS的margin边界叠加深度剖析 边界叠加简介 边界魯加是一个相当简单的概念。但是，在实践屮对网页进行布局时，它会造成许多浞 淆。简单地说，当W个垂直边界相遇时，它们将形成一个边界。这个边界的高度等于两个发 生叠加的边界的高度中的较大者。 当一个元素出现在另一个元素上而吋，第一个元素的底边界与第二个元素的顶边界发生 叠加，见阁： 叠加之前 内容区域 margin-bottom: 30px 1空白边叠加形 ‘成一个空白边 margin-top： 2Opx 内容区域 叠加之后 ?元素的顶边界与前面元素的底边界发生叠加 当一个元素仅含在另一个元素中吋（假设没有填充或边框将边界分隔开），它们的顶和 /或底边界也发生叠加，见图： 叠加之前 margin-top: 3Opx margin-top: 2Opx 容 l空白边叠加形 f成一个空白边 叠加之后 ?儿素的顶边界勾父儿素的顶边界发生叠加 从管初看上去右点儿夼怪，但是边界其至可以与木5发生朁加。假设柯一个空元素，它 有边界，似是没有边框或填充。在这种情况卜‘，顶边界勹底边界就碰到了-?起，它们会发生 叠加，见图： 叠加之苗 S加之后 margin-top: 20pxmargin-bottom: 2Opx 1空白边鲞加形 j成一个交白边 margin-top: 20px ?元素的顶边界与底边界发生叠加 如果这个边界碰到另一个元素的边界，它还会发生卺加，见图： 叠加之后 1所有空白边叠加 j形成一个空白边 margm-top: 2Opx 登加之前 margin-top: 2Opx ?暴??麝秦毳＜?晷??秦?泰扇一穆馨^嚳??豢麝蠢 margin-top： 2Opx MMt tXtMfK9MM margin-bottom: 2Opx ?空元素中已经昝加的边界与另一个空元素的边界发生卺加 这就是一系列空的段落元素占川的空间非常小的原因，因为它们的所行边界都叠加到一 起，形成一个小的边界。 边界叠加初看上去吋能冇点儿奇怪，但是它实际上是冇意义的。以由几个段落组成的典 型文木页衡为例（见图2 8）。笫一个段落上面的空间等于段落的顶边界。如果没冇边界叠 加，后续所乜段落之间的边界将足相邻顶边界和底边界的和。这意味着段落之间的空问足页 面顶部的两倍。如果发生边界叠加，段落之问的顶边界和底边界就叠加在-?起，这样各处的 SIT离就一致了。 没有空白边叠加 段落之间的空司是顶 部空间的两倍 1 \ V- J 1 ■ ■ \ f \ T r*i .1 wL 一 r \ I \ I L： L_L L_J \ / 有空白边叠加 段落之间的空司与 顶部空间相同 ?边界叠加在元素之间维护了一致的距离 只有普通文捫流中块框的垂且边界冰会发生边界佥加。行内桐、浮动框或绝对定位框之 间的边界不会叠加。 边界叠加的问题 边界佥加足一个如果误解就会导致许多麻烦的CSS特性。请参考div元素（Aj嵌食段落的 简单示例： dividdivid=box”〉 pThisparagraphhasa20pxmargin.p div div框没置了 10像素边界，段落设置了 20像素的边界: #box{ margin：10px； background-color:#d5d5d5； } p{ margin:20px； background-color：#66 99ff ； } 你会自然地认为产生的样式会像图1 1那样，在段落和div之间冇20像素的距离，在 div外边围绕着10像素的边界。 图1-1 似足，产生的样式实P小上像图1-2。 图卜2 This paragraph has a 20px margin. 这圼发生了两个情况。首先，段落的20像素上边界和上边界与div的10像素边界叠加， 形成一个单一的20像素垂且边界。其次，这些边界不是被DIV包围，而是突出到D1V的顶 部和底部的外边。岀现这种情况是由于其有块级子元素的元素计算其高度方式造成的。 如果元素没侖乖直边框和填充，那么它的高度就足它包含的？元素的顶部和底部边框边 缘之间的距离。因此，包含的f元素的顶部和底部空G边就突出到界器元素的外边。似足, 有一个简单的解决方案。通过添加一个乖直边框或填充，空G边就不再叠了，而且元素的高 度就是它包含的子元素的顶部和底部空白边边缘之间的距离。 为了让前面的示例看起来像图1-1这样，只需在div周围添加补內或边框： TOC \o 1-5 \h \z #box{ margin：10px； padding: lpx； /*或者 bord