zoukankan      html  css  js  c++  java
  • HTML-完美解决父子元素的外边距重叠和高度塌陷问题

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                *{margin:0px; padding:0px;}
                .box1{
                     300px;
                    height: 300px;
                    background-color: red
                }
                .box2{
                     200px;
                    height: 200px;
                    background-color: yellow;
                    margin-top: 100px;
                }
        
            </style>
        </head>
        <body>
            
            
            <div class="box1 ">
                
                <div class="box2"></div>
            </div>
            
        </body>
    </html>

    当把子元素margin-top:100 时,其父元素会跟着一样改变

    解决方法

    用css解决

    .clearfix:before,
                .clearfix:after{
                    content: "";
                    display: table;
                    clear: both;
                }
                
                .clearfix{
                    zoom: 1;
                }

    形成以下完全代码

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                *{margin:0px; padding:0px;}
                .box1{
                     300px;
                    height: 300px;
                    background-color: red
                }
                .box2{
                     200px;
                    height: 200px;
                    background-color: yellow;
                    margin-top: 100px;
                }
                .clearfix:before,
                .clearfix:after{
                    content: "";
                    display: table;
                    clear: both;
                }
                
                .clearfix{
                    zoom: 1;
                }
        
            </style>
        </head>
        <body>
            
            
            <div class="box1  clearfix">
                
                <div class="box2"></div>
            </div>
            
        </body>
    </html>

    运行后变成

  • 相关阅读:
    C语言 · 新生舞会
    C语言 · 集合运算
    C语言 · 字符串的展开
    C语言 · 学做菜
    C语言 · 最长公共子序列 · 最长字符序列
    C语言 · 复数求和
    C语言 · 扶老奶奶过街
    C语言 · 删除重复元素
    1-3
    1-4
  • 原文地址:https://www.cnblogs.com/hack-ing/p/11738316.html
Copyright © 2011-2022 走看看