黑松山资源网

详解CSS外边距折叠引发的问题
站长资源 2024/6/27 佚名
2 0
黑松山资源网 Design By www.paidiu.com

第一种：两个块级元素的上下边距折叠

第二种：父元素和子元素（或者最后一个元素）的外边距

第三种：空的块级元素的上下外边距

折叠的根本原因：

margin之间直接接触，没有阻隔

折叠后外边距的计算：

1.如果两个外边距都是正值，折叠后的外边距取较大的一个
2.如果两个外边距一正一负，折叠后的边距为边距之和
3.如果两个外边距都为负数，折叠后边距为较小的边距

解决方案：解决方法实际上也就是阻止外边距直接接触

第一种、第三种：只有静态流的元素才会发生外边距合并故设置float position inline-block都可以

<style>
.bother{
            width: 50px;
            height: 50px;
            margin: 50px;
            background-color: #44cc00;
            /*1.float: left;*/
            /*2.position: absolute;*/
            <!--3.display: inline-block;-->
        }
        /*.father{*/
            /*2.position: relative;*/
            /*background:#cccdd1;*/
        /*}*/
        /*.bother1{*/
            /*2.top:50px;*/
        /*}*/
        /*.bother2{*/
            /*2.top:250px;*/
        /*}*/
</style>
<body>
<div class="father">
<div class="bother1 bother"></div>
<div class="bother2 bother"></div>
</div>
</body>

第二种（嵌套的情况）只要border padding非0或者有inline元素隔开，比如在父元素里加一行文字也可以

<style>
        .margin-box{
            width: 50px;
            height: 50px;
            /*margin: 50px;设置了上下左右的外边距*/
            margin: 50px;
            /*margin-left: 50px;*/
            /*margin-right: 50px;*/
            /*div是块级元素，所以设置左右外边距也不会使父元素有左右外边距*/
            background-color: #fae900;
            /*5.2 display: inline-block;*/
        }
        .father{
            <!--3.overflow: hidden;-->
            background:#cccdd1;
            /*1.border: 1px solid;*/
            /*2.padding: 20px;*/
            /*5.1 display: inline-block;*/
        /*如果没有border和padding只有测试这个字，那么子元素的外边距不会在父元素里显示*/
        /*而仅仅只有上外边距显示，下外边距不显示*/
        /*而如果在子元素下面同样写一个测试，那么下外边距也会显示*/
        }

    </style>
</head>
<body>
<div class="father">
    <!--4.<span>测试</span>-->
    <div class="margin-box"></div>
    <!--4.<span>测试</span>-->
</div>
</body>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

黑松山资源网 Design By www.paidiu.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
黑松山资源网 Design By www.paidiu.com
www.paidiu.com 黑松山资源网
39,976影音资源
44,792技术资源
21,817软件资源
651,128站长资源

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？

根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 更多链接
黑松山资源网 Design By www.paidiu.com