V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
whrhw
V2EX  ›  问与答

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

  •  
  •   whrhw · 2014-07-22 22:17:21 +08:00 · 3291 次点击
    这是一个创建于 3762 天前的主题,其中的信息可能已经有所发展或是发生改变。
    代码是这样:
    <!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的前端工程师解答,前端菜鸟一枚,范了低级错误求轻喷
    21 条回复    2014-07-23 13:47:27 +08:00
    lijsh
        1
    lijsh  
       2014-07-22 22:30:56 +08:00 via Android
    看看body
    whrhw
        2
    whrhw  
    OP
       2014-07-22 22:34:00 +08:00
    @lijsh 不解,body有什么问题?
    qiayue
        3
    qiayue  
       2014-07-22 22:49:11 +08:00
    c1 没变啊,是 c2 动了
    jings
        4
    jings  
       2014-07-22 22:50:52 +08:00
    @qiayue c1向下移了
    kamal
        5
    kamal  
       2014-07-22 22:55:27 +08:00   ❤️ 2
    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
        6
    qiayue  
       2014-07-22 22:56:48 +08:00
    @kamal 学习了
    kamal
        7
    kamal  
       2014-07-22 22:57:14 +08:00
    Margin collapsing
    https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing

    善用搜索引擎啊楼主
    Tonni
        8
    Tonni  
       2014-07-22 23:03:51 +08:00
    我最讨厌的就是写HTML和CSS代码了
    whrhw
        9
    whrhw  
    OP
       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
        10
    wxt2005  
       2014-07-22 23:35:41 +08:00   ❤️ 1
    我的理解是,div#c2的margin-top和body的margin-top融合变为了30px,所以导致在body中的div#c1也随之下降了30px。
    不知道是否正确。
    p2p
        11
    p2p  
       2014-07-23 00:09:14 +08:00
    @wxt2005

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

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

    "当一个元素包含在另一个元素中时(假设没有内边距或边框把外边距分隔开),它们的上和/或下外边距也会发生合并。"
    whrhw
        21
    whrhw  
    OP
       2014-07-23 13:47:27 +08:00
    @wxt2005 应该加上一句只有根元素(html 元素)不会重叠,body和div一样会重叠
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2792 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 14:49 · PVG 22:49 · LAX 06:49 · JFK 09:49
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.