CSS中，margin-top塌陷问题的解决

来源：互联网发布：十字军之王2优化补丁编辑：程序博客网时间：2024/06/05 00:43

CSS中，margin-top塌陷问题的解决

1：外部盒子设置一个边框
2：外部盒子设置 overflow:hidden
3：使用伪类元素类

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>margin-top 塌陷</title>    <style>        .con{            width: 300px;            height: 200px;            background-color: gold;            /*border:1px solid gold;*/            /*  line-height:只针对文本 */            /*line-height: 200px;*/            /*padding-top: 50px;*/            /* 元素溢出 */            /*overflow: hidden;;*/        }        .box{            width: 100px;            height: 100px;            background-color: green;            margin-top: 50px;        }        /*  使用伪类元素类 */        .clearfix:before{            content: "";            display: table;        }    </style></head><body>    <div class="con clearfix">        <div class="box">        </div>    </div></body></html>

阅读全文

0 0