详解CSS外边距折叠引起的难题

日期:2020-10-29 类型:科技新闻 

关键词:在线网页制作,建网页,个人简介网页制作,简单网页,建立网页

第1种:两个块级元素的左右边距折叠

第2种:父元素和子元素(或最终1个元素)的外边距

第3种:空的块级元素的左右外边距

折叠的压根缘故:

margin之间立即触碰,沒有隔绝

折叠后外边距的测算:

1.假如两个外边距全是恰逢,折叠后的外边距取较大的1个
2.假如两个外边距1正1负,折叠后的边距为边距之和
3.假如两个外边距都为负数,折叠后面距为较小的边距

处理计划方案:处理方式具体上也便是阻拦外边距立即触碰

第1种、第3种:仅有静态数据流的元素才会产生外边距合拼故设定float position inline-block都可以以

<style>
.bother{
            width: 50px;
            height: 50px;
            margin: 50px;
            background-color: #44cc00;
            /*1.float: left;*/
            /*2.position: absolute;*/
            <!-⑶.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>

第2种(嵌套循环的状况)要是border padding非0或有inline元素分隔,例如在父元素里加1写作字还可以

<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{
            <!-⑶.overflow: hidden;-->
            background:#cccdd1;
            /*1.border: 1px solid;*/
            /*2.padding: 20px;*/
            /*5.1 display: inline-block;*/
        /*假如沒有border和padding仅有检测这个字,那末子元素的外边距不容易在父元素里显示信息*/
        /*而仅仅仅有上外边距显示信息,下外边距无法显示*/
        /*而假如在子元素下面一样写1个检测,那末下外边距也会显示信息*/
        }

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

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。