css解决外边距塌陷的7种方法

最新推荐文章于 2024-04-29 15:35:16 发布

这是一个对象

最新推荐文章于 2024-04-29 15:35:16 发布

阅读量1.8k

点赞数 3

文章标签： css html 前端

本文链接：https://blog.csdn.net/m0_67576744/article/details/126806634

版权

3，给父元素设置溢出隐藏，触发bfc机制：bfc全称是box-formatting-context (块级格式化上下文) 它是一个独立的渲染区域规定了内部block-level的盒子如何渲染并且不影响外部元素。

4，给父元素或者子元素增加浮动，让其脱离标准流

5，将父元素转变为行内块元素，display：inline-block

6，给父元素或者子元素定位都可以，原理同样是使其脱离标准流，不过只能用绝对定位和固定定位

7，给父元素增加flex或者inline-flex

什么是外边距塌陷:

外边距合并也叫作外边距塌陷,当父元素包裹着一个子元素的时候，当给子元素设置margin-top属性时，此时只是想让子元素的边框距离父元素边框有一段距离，而却出现了父元素的顶端距离body这个边框出现了位移，这就是外边距塌陷的现象

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            width: 500px;
            height: 500px;
            background-color: red;
            margin: 0 auto;
        }
        .box {
            width: 200px;
            height: 200px;
            background-color: teal;
            /* 给子元素设置margin-top 100px 想让子元素离父元素顶端距离100px,可是高度塌陷导致了父元素离body移动了100px,没达到想要的效果 */
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="box">
            
        </div>
    </div>
</body>
</html>

解决方法

1，给父元素加边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            width: 500px;
            height: 500px;
            background-color: red;
            margin: 0 auto;
            /* 给父元素设置边框 */
            /* border: 1px solid red; */
            /* 或者 以下这种方式给父元素加边框但是不显示线*/
            border: 1px solid transparent;
        }
        .box {
            width: 200px;
            height: 200px;
            background-color: teal;
            /* 给子元素设置margin-top 100px 想让子元素离父元素顶端距离100px,可是高度塌陷导致了父元素离body移动了100px,没达到想要的效果 */
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="box">
            
        </div>
    </div>
</body>
</html>

2，给父元素设置padding挤下去

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            width: 500px;
            height: 500px;
            background-color: red;
            margin: 0 auto;
            /* 设置padding挤下去 */
            /* 设置padding值后要加边框盒子不然会撑开盒子 */
            box-sizing: border-box;
            padding-top: 100px;
        }

        .box {
            width: 200px;
            height: 200px;
            background-color: teal;
            /* 给子元素设置margin-top 100px 想让子元素离父元素顶端距离100px,可是高度塌陷导致了父元素离body移动了100px,没达到想要的效果 */
            /* margin-top: 100px; */
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="box">

        </div>
    </div>
</body>

</html>

3，给父元素设置溢出隐藏，触发bfc机制：bfc全称是box-formatting-context (块级格式化上下文) 它是一个独立的渲染区域规定了内部block-level的盒子如何渲染并且不影响外部元素。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            width: 500px;
            height: 500px;
            background-color: red;
            margin: 0 auto;
            /* 给父元素设置溢出隐藏触发bfc机制 */
            overflow: hidden;
        }

        .box {
            width: 200px;
            height: 200px;
            background-color: teal;
            /* 给子元素设置margin-top 100px 想让子元素离父元素顶端距离100px,可是高度塌陷导致了父元素离body移动了100px,没达到想要的效果 */
            margin-top: 100px;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="box">

        </div>
    </div>
</body>

</html>

4，给父元素或者子元素增加浮动，让其脱离标准流

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            width: 500px;
            height: 500px;
            background-color: red;
            margin: 0 auto;
            /* 给父元素或者子元素设置浮动*/
            /* float: left; */
        }

        .box {
            width: 200px;
            height: 200px;
            background-color: teal;
            /* 给子元素设置margin-top 100px 想让子元素离父元素顶端距离100px,可是高度塌陷导致了父元素离body移动了100px,没达到想要的效果 */
            margin-top: 100px;
            float: left;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="box">

        </div>
    </div>
</body>

</html>

5，将父元素转变为行内块元素，display：inline-block

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            width: 500px;
            height: 500px;
            background-color: red;
            margin: 0 auto;
            /* 转换为行内块 */
            display: inline-block;
        }

        .box {
            width: 200px;
            height: 200px;
            background-color: teal;
            margin-top: 100px;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="box">

        </div>
    </div>
</body>

</html>

6，给父元素或者子元素定位都可以，原理同样是使其脱离标准流，不过只能用绝对定位和固定定位

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            width: 500px;
            height: 500px;
            background-color: red;
            margin: 0 auto;
            /* 给父元素或者子元素绝对定位或者固定定位 */
            /* position: absolute; */
        }

        .box {
              /* 给父元素或者子元素绝对定位或者固定定位 */
            position: fixed;
            width: 200px;
            height: 200px;
            background-color: teal;
            margin-top: 100px;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="box">

        </div>
    </div>
</body>

</html>

7，给父元素增加flex或者inline-flex

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            width: 500px;
            height: 500px;
            background-color: red;
            margin: 0 auto;
            /* 给父元素增加flex或者inline-flex  */
            display: flex;
            /* display: inline-flex; */
        }

        .box {
            width: 200px;
            height: 200px;
            background-color: teal;
            margin-top: 100px;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="box">

        </div>
    </div>
</body>

</html>