zoukankan      html  css  js  c++  java
  • 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>
    个性签名:别低头,王冠会掉,别后退,梦想会碎~~~~~
  • 相关阅读:
    顺序前缀改为随机性前缀 反转时间戳 反转年月日
    后台组件的治理思路
    干货 | 高耦合场景下,Trip.com如何做支付设计与落地
    每天响应数亿次请求,腾讯云如何提供高可用API服务?
    系统管理及操作命令
    远程连接及系统管理
    linux系统部署安装过程
    day 1 硬件组成概念及介绍笔记
    day 4
    day 3
  • 原文地址:https://www.cnblogs.com/lily1010/p/5405906.html
Copyright © 2011-2022 走看看