总结：

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>

css position弹性盒子测试的更多相关文章

  1. CSS Flexbox 弹性盒子模型

    CSS Flexbox 弹性盒子模型 设置元素样式为 display: flex 或 display: inline-flex, 让元素变成flex容器, 从而可以通过flex模式布局它的子元素. f ...

  2. css横向 弹性盒子布局的一些属性

    <head> <meta charset="utf-8"> <meta name="viewport" content=" ...

  3. css FlexBox 弹性盒子常用方法总结

    总结一下弹性盒子常用的方法,弹性盒子的功能强大,这次我做了兼容性的felxbox,虽然代码多了一点,但在项目时候可以直接复制过来用,同时在项目上线的时候,如果这时候弹性盒子出了兼容问题,那就可急了~ ...

  4. Flexible 弹性盒子模型之CSS justify-content 属性

    实例 在弹性盒对象的 <div> 元素中的各项周围留有空白: div { display: flex; justify-content: space-around; } 复制 效果预览 浏 ...

  5. css中的f弹性盒子模型的应用案例

    案例1: <!doctype html> <html> <head> <meta charset="utf-8"> <meta ...

  6. CSS box-flex属性，然后弹性盒子模型简介(转)

    一.淡淡的开头语 昨天趁着不想工作的时间间隙闲逛24ways,在My CSS Wish List一文中,见到了个新鲜的CSS属性,就是题目中的box-flex,以前没有见过,顿生疑惑,不知是骡子还是马 ...

  7. css弹性盒子学习

    css3弹性盒子是一种布局方式,在适应不同的屏幕大小的时候,能够确保元素拥有更恰当的排布行为.它只是视觉呈现上的,即显示顺序适应显示空间,与源代码无关,源代码顺序不受影响. 定义一个弹性盒子: 在cs ...

  8. CSS弹性盒子的基本用法

    .container { width: 302px; height: 302px; border: 1px solid; display: flex } .item { width: 100px; h ...

  9. 快速使用CSS 弹性盒子

    布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现:2009年,W3C提出了一种新的方案 ...

随机推荐

  1. PostgreSQL 二进制安装

    一.安装前准备工作 新建用户 sudo groupadd sql sudo useradd -g sql postgressudo passwd postgres 创建数据及日志目录,并做相应授权 s ...

  2. Chelly的串串专题

    CF149E 题意:给出一个长度为n的文本串和m个模式串,求有多少个模式串可以拆成两半,使得这两半按顺序匹配(n<=2e5,m<=100) 最暴力的想法就是对于每个询问串,全部和原串做一遍 ...

  3. ANT---调用外部命令的一些坑

    最近用到了Ant,发现还是有许多功能是Ant没有提供相应Task支持,而操作系统提供了相应的系统命令.Ant说明书上说了,用<exec>可以调用系统命令,实际操作起来才发现陷阱可不少,一不 ...

  4. JVM--------3

    一.为什么要使用类加载器?Java语言里,类加载都是在程序运行期间完成的,这种策略虽然会令类加载时稍微增加一些性能开销,但是会给java应用程序提供高度的灵活性.例如:1.编写一个面向接口的应用程序, ...

  5. javascript --- 移除DOM节点

    在IE中移除容器类节点,会引起内存泄露,最好是创建一个新的节点,比如div,然后将要删除的节点放入这个div中,再将div的innerHTML清空.其它的直接removeChild就可以了. var ...

  6. unigui控件的FASTSCRIPT封装

    unigui控件的FASTSCRIPT封装 unit fs_uniControl; interface{$i fs.inc}uses fs_iinterpreter, fs_itools, fs_ie ...

  7. xamarin studio 中SpinButton ComBox Splid 鼠标放上去就会自动接收焦点，然后进行数值变化

    公司做跨平台项目,用XamarinStudio 开发mac版本,语法还是C#,但是,尼玛XamarinStudio的控件就是坑爹啊. 其他的暂时不累赘,笔者画界面,一堆控件放到一个界面上,当超出屏幕时 ...

  8. Pearson product-moment correlation coefficient in java(java的简单相关系数算法)

    一.什么是Pearson product-moment correlation coefficient(简单相关系数)? 相关表和相关图可反映两个变量之间的相互关系及其相关方向,但无法确切地表明两个变 ...

  9. Windows 如何为绿色软件运行时添加参数 如最小化,无窗口运行

    1 有些软件运行的时候需要或者可以添加参数来实现一些特殊要求,比如开机自启动,运行时不显示主界面,不显示托盘图标等,比如下面的这个流量精灵软件,"urlcore.exe /h /r /t 4 ...

  10. centos7+ 安装Docker 17.03.2

    cnetos7 安装 docker17.03.2 升级内核 http://m.blog.csdn.net/article/details?id=52047780 注意切换内核时查看 新内核位置 awk ...