• css position弹性盒子测试


    总结:

    1.利用样式height:100%设置div高度为全屏时候必须设置所有的父元素,但是父元素那么多,不可控,所以此法不可行;

    2.设置父框架的padding为100px,div进行float,padding有效;但div进行position,并配合left:0,padding失效;

    3.弹性盒子模型需要position属性和两个相对立的属性,比如top和bottom,left和right。

    4.要做出来自适应的三个模块,要会计算中间div进行position后left和right的值,此值与左右两边的div宽度有关

    测试的代码如下:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title></title>
            <style type="text/css">
            *{
                padding: 0;
                margin: 0;
                
            }
            /*html,body{
                height: 100%;
            }*/
            .elasticityBox{
                border: 1px #000 solid;
                padding: 100px;
            }
            .elasticityBox .box01{
                position: absolute;
                border: 1px red solid;
                top:0;
                bottom: 0;
                left: 200px;
                right: 200px;
            }
            /*.elasticityBox .box01{
                border: 1px red solid;
                float: left;
            }*/
            .elasticityBox .box02{
                border: 1px yellowgreen solid;
                width: 100px;
                position: absolute;
                left: 0;
                top:0;
                bottom: 0;
            }
            .elasticityBox .box03{
                border: 1px yellowgreen solid;
                width: 100px;
                position: absolute;
                right: 0;
                top:0;
                bottom: 0;
            }
            </style>
        </head>
        <body>
            <div class="elasticityBox">
                <div class="box01">123</div>
                <div class="box02">3456</div>
                <div class="box03">789</div>
            </div>
        </body>
    </html>
    个性签名:别低头,王冠会掉,别后退,梦想会碎~~~~~
  • 相关阅读:
    ROC曲线
    数学建模的时间表和分工
    找寻子串
    被7整除
    Java中BufferedReader和scanner的对比
    机器学习降维方法
    梯度下降法
    天池大赛
    统一认证系统(三)
    软件设计方案
  • 原文地址:https://www.cnblogs.com/lily1010/p/5405906.html
Copyright © 2020-2023  润新知