简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
前端 - margin的问题，那个老哥帮我解释下
伊谢尔伦
伊谢尔伦 2017-04-17 14:53:40
0
5
953
<!DOCTYPE html>
<html lang="en">
<head>
    <title>test</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .a{
            height:48px;
            background: #eee;
        }

        .b{
            height:520px;
            background: #ff4949;
        }

        .c{
            width:90%;
            height:300px;
            margin:20px auto;
            background: #fff;
        }
    </style>
</head>
<body>
<p class="a"></p>
<p class="b">
    <p class="c"></p>
</p>

</body>
</html>

p.c 不是应该被红色环绕吗？烦请那个老哥解释下。

伊谢尔伦
伊谢尔伦

小伙看你根骨奇佳，潜力无限，来学PHP伐。

全部回覆(5)
大家讲道理
大家讲道理2017-04-17 14:55:40 5樓

因為在BFC中，兩相鄰（兄弟或父子）、沒有邊框且沒有padding，元素的margin-top與其第一個常規文檔流的子元素的margin-top，會產生marign-collapse（外側距折疊）。

你給b加邊框，

border: 1px solid transparent;

或加padding，

padding: 1px 0;

都能消除。

或者，你可以加b overflow: hidden;。

可以參考：深入理解BFC和Margin Collapse

點贊 +0
新增回覆
Ty80
Ty802017-04-17 14:55:40 4樓

你在.b中加入個overflow: hidden;就可以了。

因為overflow 使用除了 visible 以外的值（hidden，auto，scroll）會觸發BFC。
什麼是BFC？
Block Formatting Contexts (區塊級格式化上下文)
具有BFC 的元素可以看作是隔離了的獨立容器，容器裡面的元素不會在佈局上影響到外面的元素，並且BFC 具有普通容器沒有的一些特性，例如可以包含浮動元素，上文中的第二類清除浮動的方法（如overflow 方法）就是觸發了浮動元素的父元素的BFC ，使到它可以包含浮動元素，從而防止出現高度塌陷的問題。

點贊 +0
新增回覆
Peter_Zhu
Peter_Zhu2017-04-17 14:55:40 3樓

overflow: hidden; 你把這句話加到 p.b 上。

點贊 +0
新增回覆
迷茫
迷茫2017-04-17 14:55:40 2樓

搜尋「子元素margin影響父元素」

點贊 +0
新增回覆
左手右手慢动作
左手右手慢动作2017-04-17 14:55:40 1樓

這個叫外邊距重疊吧,子級元素的外邊距會影響父級元素,並且這兩的外邊距大整個容器的外邊距就以大的為準。這時候應該選擇觸發BFC,BFC是什麼前面幾位說的很清楚了,觸發BFC的情況有:

  • 根元素

  • float屬性不為none；

  • position為absolute或fixed；

  • display為inline-block, table-cell, table-caption, flex, inline-flex；

  • overflow不為visible；

解決方法：

如果你给父级加上overflow：hidden,或者加上透明边框就可以解决了。
點贊 +0
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！