zoukankan      html  css  js  c++  java
  • Html margin合并和margin塌陷

    代码

    <!doctype html>
    <html>
    <head>
        <title>margin合并和margin塌陷</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta http-equiv="Pragma" content="no-cache"/>
    </head>
    <style>
        #wrap {
             300px;
            height: 300px;
            background-color: blue;
            margin-top: 100px;
    
            /*margin塌陷 第一种解决*/
            /*position: absolute;*/
    
            /*margin塌陷 第二种解决*/
            /*display: inline-block;*/
    
            /*margin塌陷 第三种解决*/
            /*float: left;*/
    
            /*margin塌陷 第四种解决*/
            /*overflow: hidden;*/
    
            /*margin塌陷 第五种解决 不推荐 增加了1px*/
            /*border-top: solid blue 1px;*/
    
            /*margin塌陷 第六种解决  webkit*/
            /*-webkit-box-sizing: content-box;*/
            /*-moz-box-sizing: content-box;*/
            /*box-sizing: content-box;*/
        }
    
        #content {
            position: relative;
            left: 50px;
            margin-top: 150px;
             100px;
            height: 100px;
            background-color: red;
        }
    
        #wrap2 {
            height: 10px;
            margin-bottom: 50px;
            background-color: blue;
        }
    
        #content2 {
            height: 10px;
            margin-top: 100px;
            background-color: red;
        }
    </style>
    <body>
    <h1>margin塌陷</h1>
    <div id="wrap">
        <div id="content"></div>
    </div>
    
    <br/>
    <hr/>
    <br/>
    
    <h1>margin合并</h1>
    <div id="wrap2"></div>
    <div id="content2"></div>
    </body>
    </html>
    
  • 相关阅读:
    以太坊学习笔记
    linux找不到动态链接库
    centos7 firewall指定IP与端口访问
    VMware Fusion 序列号
    mysql pxc无法启动
    vmware workstation许可证密钥
    Gradle上传依赖到私服(nexus)
    Java对象操作工具
    Java获取不到请求的真实IP
    java8+ Lambda表达式基本用法
  • 原文地址:https://www.cnblogs.com/kikyoqiang/p/14152353.html
Copyright © 2011-2022 走看看