标签：color top 100px height width 兼容性问题 margin

1.上下margin重叠问题

HTML:

<div class="box1"></div>
<div class="box2"></div>

CSS:

* {
      margin: 0;
      padding: 0;
        }
.box1 {
       height: 100px;
       width: 100px;
       background-color: pink;
       margin-bottom: 50px;
        }
.box2 {
       width: 100px;
       height: 100px;
       background-color: green;
       margin-top: 100px;
     }

说明：

有两个元素box1和box2, box1元素设置margin-bottom, box2元素margin-top, 此时上下margin会重叠; 谁的取值大以谁为准

解决方案：

1.只给其中一个元素设置margin值

.box1 {
    height: 100px;
    width: 100px;
    background-color: pink;
}
.box2 {
    width: 100px;
    height: 100px;
    background-color: green;
    margin-top: 50px;
}

2. 给其中一个元素添加父元素，并且给父元素添加overflow:hidden;(BFC(块级格式化上下文) 布局)

HTML:

<div class="box">
    <div class="box1"></div>
</div>
<div class="box2"></div>

CSS:

* {
    margin: 0;
    padding: 0;
}
.box {
    overflow: hidden;
}
.box1 {
    height: 100px;
    width: 100px;
    background-color: pink;
    margin-bottom: 50px;
}
.box2 {
    width: 100px;
    height: 100px;
    background-color: green;
    margin-top: 50px;
}

2.margin-top穿透问题

说明：

给子元素设置的margin-top值，会作用到父元素的身上，这种想象称之为margin-top的穿透问题

解决方案：

1.给父元素添加border

弊端：需要进行盒模型计算，此操作会使父元素宽高各增加2px

.box {
    height: 200px;
    width: 200px;
    background-color: pink;
    border: 1px solid red;
}

2.给父元素添加overflow:hidden

弊端：使用定位时超出盒子的元素，溢出会被隐藏

.box {
    height: 200px;
    width: 200px;
    background-color: pink;
    overflow: hidden;
}

3.使用父元素的padding-top代替子元素margin-top

.box {
    /* 高度减去50px */
    height: 150px;
    width: 200px;
    background-color: pink;
    padding-top: 50px;
}
.box1 {
    width: 100px;
    height: 100px;
    background-color: green;
}

标签：color,top,100px,height,width,兼容性问题,margin
来源： https://www.cnblogs.com/Eamon-18/p/15975125.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。