我这里面margin-top为什么给了父元素detail-wrapper

Answer 1

提问者 行走在二进制世界 2018-08-18 09:47:26

<div v-show="isdetail" class="detail clearfix">
    <div class="detail-wrapper">
        <div class="detail-main">
            <h1 class="name">{{seller.name}}</h1>
            <div class="star-warpper">
            <v-star :size="48" :score="seller.score"></v-star>
            </div>
            <div class="title">
            <div class="line"></div>
            <div class="text">优惠信息</div>
            <div class="line"></div>
            </div>
        </div>
    </div>
    <div class="detail-close">
        <i class="icon-close"></i>
    </div>
</div>

.detail
    position: fixed
    z-index: 100
    width: 100%
    height: 100%
    top: 0
    left: 0
    overflow: auto
    background: rgba(7, 17, 27, 0.8)
        .detail-wrapper
        min-height: 100%
        .detail-main
            margin-top: 64px
            padding-bottom: 64px
            .name
                line-height: 16px
                text-align: center
                font-size: 16px
                font-weight: 700
            .star-warpper
                margin-top: 18px
                padding: 2px 0
                text-align: center
.detail-close
        position: relative
        width: 32px
        height: 32px
        margin: -64px auto 0 auto
        clear: both
        font-size: 32px

Answer 2

ustbhuangyi 2018-08-16 19:03:21

贴一下你的具体代码

• 提问者 行走在二进制世界 #1

  嗯嗯，如果.detail-main 里面 margin-top 换成 padding-top 就没有这样的问题，或者给父元素加上 overflow：hidden 这应该是 margin 塌陷问题，父子元素的 margin-top 会层叠到一起作用到父元素上，可是视频里面为什么没有这种情况，而且我代码没有改变，有时候又不会产生这种塌陷问题，不知道怎么回事

• ustbhuangyi 回复 提问者 行走在二进制世界 #2

  clearfix 你是怎么实现的呢？

• 提问者 行走在二进制世界 回复 ustbhuangyi #3

  .clearfix{
      display: inline-block;
  }
  
  .clearfix:after{
      display: block;
      content: ".";
      height: 0;
      line-height: 0;
      clear: both;
      visibility: hidden;
  }

点开查看后面1条评论