学 css 遇到的问题,求前端高手解答

2014-07-22 22:17:21 +08:00
 whrhw
代码是这样:
<!DOCTYPE html>
<html>
<head>
<style>
#c1{background:red;height:80px;width:30px;float:left;}
#c2{margin:0px;background:dimgray;}
#c21,#c22,#c23,#c24,#c25{margin:10px;background:green;width:100px;height:30px;}
#c22,#c24{background:gold;}
</style>
</head>
<body>

<div id="c1"></div>
<div id="c2">
<div id="c21">Text 1</div>
<div id="c22">Text 2</div>
<div id="c23">Text 3</div>
<div id="c24">Text 4</div>
<div id="c25">Text 5</div>
</div>
</body>
</html>

此时的效果图是这样:


当我把#c2的margin改为30px时效果变成了这样:


#c2会影响前面的浮动元素#c1的定位?

求v2的前端工程师解答,前端菜鸟一枚,范了低级错误求轻喷
3172 次点击
所在节点    问与答
21 条回复
lijsh
2014-07-22 22:30:56 +08:00
看看body
whrhw
2014-07-22 22:34:00 +08:00
@lijsh 不解,body有什么问题?
qiayue
2014-07-22 22:49:11 +08:00
c1 没变啊,是 c2 动了
jings
2014-07-22 22:50:52 +08:00
@qiayue c1向下移了
kamal
2014-07-22 22:55:27 +08:00
CSS 外边距(margin)重叠及防止方法
http://www.hujuntao.com/web/css/css-margin-overlap.html

Collapsing margins
http://www.w3.org/TR/CSS2/box.html#collapsing-margins

关于Block Formatting Context--BFC和IE的hasLayout
http://www.cnblogs.com/pigtail/archive/2013/01/23/2871627.html
qiayue
2014-07-22 22:56:48 +08:00
@kamal 学习了
kamal
2014-07-22 22:57:14 +08:00
Margin collapsing
https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing

善用搜索引擎啊楼主
Tonni
2014-07-22 23:03:51 +08:00
我最讨厌的就是写HTML和CSS代码了
whrhw
2014-07-22 23:14:15 +08:00
@kamal

恕我愚笨

这里: http://www.hujuntao.com/web/css/css-margin-overlap.html说:

相邻的盒模型中,如果其中的一个是浮动的(float),垂直margin不会重叠,并且浮动的盒模型和它的子元素之间也是这样。

还有这里: http://www.w3.org/TR/CSS2/box.html#collapsing-margins说:

Margins between a floated box and any other box do not collapse (not even between a float and its in-flow children)

能否具体指出?
wxt2005
2014-07-22 23:35:41 +08:00
我的理解是,div#c2的margin-top和body的margin-top融合变为了30px,所以导致在body中的div#c1也随之下降了30px。
不知道是否正确。
p2p
2014-07-23 00:09:14 +08:00
@wxt2005

折叠的margin 会出现在最外层 也就是body上
whrhw
2014-07-23 00:18:02 +08:00
@wxt2005 非常感谢

在v2潜水了很久,这是我第一次发帖,v2气氛真不错
yreenchan
2014-07-23 08:59:27 +08:00
如果第二个c2也加了左浮动,两个盒子就不会重叠在一起了
kamal
2014-07-23 09:59:34 +08:00
@whrhw 刚看到,这句话的前提是“相邻的盒模型中”,你的代码中是父级重叠了。
whrhw
2014-07-23 10:58:59 +08:00
@kamal 谢谢解答
forreal
2014-07-23 11:44:17 +08:00
学习了
@kamal
类似这种问题向搜索引擎描述啊,比如一开始我可能不知道是margin collapsing
un
2014-07-23 12:11:34 +08:00
@wxt2005 父元素和子元素的 margin 也能重叠么?
un
2014-07-23 12:17:05 +08:00
这个 30px 就是 #c2 的,我觉得和 body 的 margin 没有关系。
kamal
2014-07-23 12:22:52 +08:00
@forreal 也是啊,如果第一次碰到这个问题,我也不知道怎么搜。
这次搜的关键词是 margin 重叠。
wxt2005
2014-07-23 13:21:14 +08:00
@un http://www.w3school.com.cn/css/css_margin_collapsing.asp

"当一个元素包含在另一个元素中时(假设没有内边距或边框把外边距分隔开),它们的上和/或下外边距也会发生合并。"

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/123999

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX