zoukankan      html  css  js  c++  java
  • 盒模练习及margin叠加

    边界叠加在元素之间维护了一致的距离

    只有普通文档流中块框的垂直边界才会发生边界叠加。行内框、浮动框或绝对定位框之间的边界不会叠加。

    解决方案:

            1.外层padding

            2.透明边框border:1pxsolidtransparent;

            3.绝对定位postion:absolute:

            4.外层DIVoverflow:hidden;

            5.内层DIV 加float:left;display:inline;

            6.外层DIV有时会用到zoom:1;

     
    一个盒模型练习:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <style>
        .Main{width406pxheight406px;border1px dashed #000000;margin0 auto;padding0;}
        #box1{border5px #d7effe solidmargin27px;}
        #box2{margin20px;background:#ffa0df;height302px;border:1px solid transparent;}
        /* margin会出现上下叠加问题(自动选择较大的那个margin) */
        #box3{borderdashed 1px #ffffff;margin40px}  
        #box4{border:dashed 1px #ffffff;margin3px;}
        #box5{margin49px;border#fcff00 5px solid;height100px;background-color#96ff38;}
         
    </style>
    <body>
        <div class="Main">
            <div id="box1">
                <div id="box2">
                    <div id="box3">
                        <div id="box4">
                            <div id="box5"></div>
                        </div>
                    </div>
                </div> 
            </div>  
        </div>
        
    </body>
    </html>
  • 相关阅读:
    css 中 overflow: hidden清楚浮动的真正原因
    Get、Post请求中文乱码问题有效解决方法
    安装PostgreSQL和卸载PostgreSQL
    PostgresSql日期字段比较大小
    关于多线程编程的一点思考
    Python 虚拟环境 pyenv、venv(pyvenv)、virtualenv之间的区别
    python常用命令
    python中各种文件打开模式a w r
    python-安装
    day1-安装配置
  • 原文地址:https://www.cnblogs.com/MR---Zhao/p/12751745.html
Copyright © 2011-2022 走看看