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>

    运行后变成

  • 相关阅读:
    Hbase 0.98集群搭建的详细步骤
    java使用Apache POI操作excel文件
    linux下用非root用户重启导致ssh无法连接的问题
    solr update
    solr(一)
    libreoffice
    git
    hbase基本操作
    http://webapp.docx4java.org/OnlineDemo/PartsList.html
    git
  • 原文地址:https://www.cnblogs.com/hack-ing/p/11738316.html
Copyright © 2011-2022 走看看