1.子元素作为父元素的第一个元素，设margin-top没用


6、margin中的一些问题 - 图1

  • 解决办法：

    1. //1.给父元素    
    2. overflow: hidden;
    3. //2.给父元素设置伪元素
    4. .parent::before{
    5.  content:"";  
    6.  display:table;
    7. }

    2.margin重合问题

    相同的间距，取 中间值
不同的间距  取 较大值

    3、margin设百分比

  • 子元素margin设百分比，都相对于父元素的宽

image.png
6、margin中的一些问题 - 图3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 子元素margin设百分比  都是相对于父元素的宽 */
        *{
            margin: 0;
            padding: 0;
        }
        .parent{
            width: 400px;
            height: 500px;
            background-color: red;
        }
        .child{
            width: 200px;
            height: 200px;
            margin-top: -50%;
            margin-left: -50%;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">
        </div>
    </div>
</body>
</html>