CSS的margin边界叠加深度剖析图文演示

ttx9n · 发表于 2007-9-22 22:30:38

边界叠加是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。简单地说，当两个垂直边界相遇时，它们将形成一个边界。这个边界的高度等于两个发生叠加的边界的高度中的较大者。

　　当一个元素出现在另一个元素上面时，第一个元素的底边界与第二个元素的顶边界发生叠加，见图：

图1-1
　　但是，产生的样式实际上像图1-2。

图1-2

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
这里发生了两个情况。首先，段落的20像素上边界和上边界与div的10像素边界叠加，形成一个单一的20像素垂直边界。其次，这些边界不是被DIV包围，而是突出到DIV的顶部和底部的外边。出现这种情况是由于具有块级子元素的元素计算其高度方式造成的。

　　如果元素没有垂直边框和填充，那么它的高度就是它包含的子元素的顶部和底部边框边缘之间的距离。因此，包含的子元素的顶部和底部空白边就突出到容器元素的外边。但是，有一个简单的解决方案。通过添加一个垂直边框或填充，空白边就不再叠了，而且元素的高度就是它包含的子元素的顶部和底部空白边边缘之间的距离。

　　为了让前面的示例看起来像图1-1这样，只需在div周围添加补白或边框：
复制代码代码如下:
#box{
margin:10px;
padding:1px;/*或者border:1px solid color;*/
background-color:#d5d5d5;
}
p{
margin:20px;
background-color:#6699ff;
}

　　边l界叠加的大多数问题可以通过添加透明边框或1px的补白来修复。

　　补充解决方案：
复制代码代码如下:

　　　　1.外层 padding
　　　　2.透明边框 border:1px solid transparent;
　　　　3.绝对定位 postion:absolute:
　　　　4.外层DIV overflow:hidden;
　　　　5.内层DIV 加float:left; display:inline;
　　　　6.外层DIV有时会用到zoom:1;

z80vh · 发表于 2022-8-15 12:23:29

我要金豆金豆金豆

a75620618 · 发表于 2022-8-22 06:13:30

那三门，你们谁寂寞才快乐撒

qwe520 · 发表于 2022-11-25 13:57:21

dfdsafdsfdsfdsf

feiyasqhr · 发表于 2022-12-8 15:39:24

很不错的样子

小伙伴 · 发表于 2022-12-11 10:14:43

搞个免费的用用

fwn2rd · 发表于 2022-12-17 05:38:30

撒房产税陈飞飞

黑白键 · 发表于 2022-12-18 12:19:38

还有人在不。。。。。。。。。。啊

黑白键 · 发表于 2023-4-8 08:51:21

抽根烟，下来看看再说

feiyasqhr · 发表于 2023-6-16 04:10:00

呵呵呵呵呵呵呵a

账号		自动登录	找回密码
密码			立即注册

[CSS/HTML] CSS的margin边界叠加深度剖析图文演示

相关帖子