zoukankan      html  css  js  c++  java
  • 【前端】外边距合并问题 -- 嵌套盒子

    css外边距重合指的是两个垂直相邻的块级元素,当上下两个margin相遇时,会产生重叠现象,且重叠后的margin为较大的那一个。

    具体是怎么一回事呢,我们来直观的看一下:

    1. 首先把body的背景色设置为骚粉,方便观察,再新建三个俄罗斯套盒,分别是container – father – son,然后给他们的宽高分别设置为600600、400400、200*200,背景色分别设置为蓝、红、绿。margin和padding都初始化为0。效果如下图所示:
      在这里插入图片描述
    2. 我们试着来给father这个盒子设置一个上边距,也就是margin-top,设置为30px,效果如下图所示:
      在这里插入图片描述

    注意了,是不是跟我们预想的不一样,按理说应该是father相对于container来说上面有一个30px的margin-top,但是现在确实他们三个盒子同时相对于body有一个margin-top了,这时候就是发生了外边距合并问题。
    因为我们一开始就把三个盒子的margin都设置为零了,而且他们三个还有垂直相邻关系,所以他们的margin-top就统一成了最大的那个margin-top.
    为了验证这个结论,我们再把son这个盒子的margin-top设置为60px,看下图:在这里插入图片描述
    很明显现在三个盒子的margin-top统一成了60px。

    1. OK,那我们继续,如何解决这种问题呢,有好几种方法。
      第一种:可以给父元素添加一个padding值,这里可以添加一个padding-top,当然用这种方法的话,你的margin就得重新计算了。
      第二种:给父元素设置一个overflow: hidden,这种方法对距离来说会更友好些。
      我们来给container添加一个overflow: hidden
      在这里插入图片描述
      可以看到container与body之间的上边距已经消失了,因为超出container的部分已经被隐藏了(这个说法其实我不太理解,添加padding来把子盒子挤下去这个我是理解的,但是如果超出部分隐藏的话,为什么子盒子还是有这个margin呢?不过我还是把它理解为就是为了解决这个问题,所以规定成这样的。)。
    2. 我们再来给father添加一个overflow: hidden,看一下:
      在这里插入图片描述
      这一下就很清楚了,就是我们代码中表示的意思。
      最后贴上源码:
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>外边距合并问题</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            
            body {
                background-color: pink;
            }
            
            .container {
                height: 600px;
                 600px;
                background-color: blue;
                /* padding-top: 1px; */
                overflow: hidden;
            }
            
            .father {
                height: 400px;
                 400px;
                background-color: red;
                margin-top: 30px;
                overflow: hidden;
            }
            
            .son {
                height: 200px;
                 200px;
                background-color: green;
                margin-top: 60px;
            }
            
            .above {
                height: auto;
                 333px;
                border: 2px solid red;
                padding: 9px;
                margin: 50px auto;
            }
        </style>
    </head>
    
    <body>
        <div class="container">
            <div class="father">
                <div class="son">
                </div>
            </div>
        </div>
        <div class="above">
            <h3>css外边距重合指的是两个垂直相邻的块级元素,当上下两个margin相遇时,会产生重叠现象,且重叠后的margin为较大的那一个。</h3>
        </div>
    
    </body>
    
    </html>
    
  • 相关阅读:
    解释机器学习模型的一些方法(一)——数据可视化
    机器学习模型解释工具-Lime
    Hive SQL 语法学习与实践
    LeetCode 198. 打家劫舍(House Robber)LeetCode 213. 打家劫舍 II(House Robber II)
    LeetCode 148. 排序链表(Sort List)
    LeetCode 18. 四数之和(4Sum)
    LeetCode 12. 整数转罗马数字(Integer to Roman)
    LeetCode 31. 下一个排列(Next Permutation)
    LeetCode 168. Excel表列名称(Excel Sheet Column Title)
    论FPGA建模,与面向对象编程的相似性
  • 原文地址:https://www.cnblogs.com/mqjing/p/13629274.html
Copyright © 2011-2022 走看看