css嵌套崩塌

最新推荐文章于 2023-04-03 17:53:28 发布

梅子酒青丶

最新推荐文章于 2023-04-03 17:53:28 发布

阅读量495

点赞数

文章标签： css

本文链接：https://blog.csdn.net/qq_37085926/article/details/109132664

版权

css嵌套崩塌

嵌套崩塌的表现
嵌套崩塌，外边距塌陷也称为外边距合并，是指在正常文档流中的父子元素的块级元素的外边距组合在一起变成单个外边距，当给子元素设置外边距时，父元素会出现样式现象，产生崩塌的现象。
嵌套崩塌的解决方法

给父元素设置内边距（设置外边距无效）。
下面展示一些 内联代码片。

<!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;
        }
        .box{
            width: 200px;
            height: 200px;
            margin: 0 auto;
            background-color: aqua;
            /* 给父元素设置一个外边距 */
            padding-top: 1px;

        }
        .small-box{
            width: 100px;
            height: 100px;
            background-color: pink;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="small-box">

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

给父元素设置边框。

<!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;
        }
        .box{
            width: 200px;
            height: 200px;
            margin: 0 auto;
            background-color: aqua;
            /* 给父元素设置一个外边距 */
            /* padding-top: 1px; */
		
            /*给父元素设置一个边框*/
            /*transparent是透明的意思，设置一个透明边框尽量不影响原来的样式*/
            border: 0.000000001px solid transparent;
        }
        .small-box{
            width: 100px;
            height: 100px;
            background-color: pink;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="small-box">

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

给父元素添加overflow：hidden

<!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;
        }
        .box{
            width: 200px;
            height: 200px;
            margin: 0 auto;
            background-color: aqua;
            /* 给父元素设置一个外边距 */
            /* padding-top: 1px; */

            /*给父元素设置一个边框*/
            /* border: 0.000000001px solid transparent; */


            overflow: hidden;
        }
        .small-box{
            width: 100px;
            height: 100px;
            background-color: pink;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="small-box">

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

通过定位来解决。添加绝对定位或者相对定位可以解决，但会使元素脱离文档流，一般不推荐使用。

梅子酒青丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css嵌套崩塌

css嵌套崩塌嵌套崩塌的表现嵌套崩塌，外边距塌陷也称为外边距合并，是指在正常文档流中的父子元素的块级元素的外边距组合在一起变成单个外边距，当给子元素设置外边距时，父元素会出现样式现象，产生崩塌的现象。嵌套崩塌的解决方法给父元素设置内边距（设置外边距无效）。下面展示一些内联代码片。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta n
复制链接

扫一扫