简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
前端 - margin的问题，那个老哥帮我解释下
伊谢尔伦
伊谢尔伦 2017-04-17 14:53:40
0
5
966
<!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 학습자의 빠른 성장을 도와주세요！