子元素向下移动时,父元素跟着向下移动

最新推荐文章于 2023-07-10 16:20:34 发布

aiyayaya_

最新推荐文章于 2023-07-10 16:20:34 发布

阅读量1k

点赞数 2

文章标签： css html

本文链接：https://blog.csdn.net/aiyayaya_/article/details/110205007

版权

解决子元素向下移动,父元素跟着向下移动的问题:

<!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: 0;
            padding: 0;
        }
        .item {
            background-color: pink;
            height: 100px;
        }
        .son {
            background-color: skyblue;
            /* margin-top: 100px; */
        }
    </style>
</head>
<body>
    <div class="item">
        <div class="son">
            子元素向下移动时,会带着父元素一起往下移动
        </div>
    </div>
</body>
</html>

运行效果如图:
此时如果我们想让子元素(蓝色)部分向下移动时,会给一个margin-top值

.son {
            background-color: skyblue;
             margin-top: 100px; 
        }

可以看到运行效果:
在这里插入图片描述
遇到这种情况有以下几个方法可以解决:
html中一个元素包裹着一个子元素,再给子元素设置margin-top的时候,会传递给父元素,击穿父元素
解决办法:(推荐使用前两种)
1 给父元素添加: overflow:auto;
2 给父元素添加 overflow: hidden;
3 给父元素添加边框border(不建议使用)
4 给父元素或子元素添加绝对定位(不建议使用)
5 给父元素或者子元素添加浮动(不建议使用)