总结：

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. 洛谷——P1086 花生采摘

    P1086 花生采摘 题目描述 鲁宾逊先生有一只宠物猴,名叫多多.这天,他们两个正沿着乡间小路散步,突然发现路边的告示牌上贴着一张小小的纸条:“欢迎免费品尝我种的花生!――熊字”. 鲁宾逊先生和多多都 ...

  2. FMDB使用SQLite事务Save Point

    FMDB使用SQLite事务Save Point   在SQLite中,事务提供了批量处理,批量撤销的功能.当批量操作中有一步无法完成操作,就会把执行过的语句都撤销,恢复到撤销前的状态.但是由于SQL ...

  3. Java中的文件上传2（Commons FileUpload:commons-fileupload.jar）

    相比上一篇使用Servlet原始去实现的文件上传(http://www.cnblogs.com/EasonJim/p/6554669.html),使用组件去实现相对来说功能更多,省去了很多需要配置和处 ...

  4. AngularJS的控制器示例

    代码下载:https://files.cnblogs.com/files/xiandedanteng/angularjsCtrl.rar 代码: <!DOCTYPE HTML PUBLIC &q ...

  5. 【Java编程】Java在dos窗体编译与运行的批处理

    近期在Java编程过程中,常常使用到dos窗体对程序进行编译与执行. 可是不方便之处在于每次都要输入命令进入将要编译的程序的文件夹(事实上也有简单的方法,在文章末尾给出).于是编写了一个配置文件,能够 ...

  6. 笔记03 wpf 在MVVM模式下怎样在Viewmodel里面获得view的控件对象

     转自http://blog.csdn.net/qing2005/article/details/6601199http://blog.csdn.net/qing2005/article/detail ...

  7. LINUX创建用户的命令

    LINUX创建用户的命令useradd -g test -d /home/test1 -s /etc/bash -m test1注解:-g 所属组 -d 家目录 -s 所用的SHELL 删除用户命令u ...

  8. angular.js 入门

    1.安装nodejs 首先要安装nodejs,如果你的电脑已经装过了,最好确认是比较新的版本,否则可能会出问题. 没有安装的直接去nodejs官网下载nodejs安装.安装过程很简单,官网有教程. 安 ...

  9. 浅析嵌入式C优化技巧

    嵌入式C语言优化小技巧 1 概述 嵌入式系统是指完毕一种或几种特定功能的计算机系统,具有自己主动化程度高,响应速度快等长处,眼下已广泛应用于消费电子,工业控制等领域.嵌入式系统受其使用的硬件以及运行环 ...

  10. FFmpeg解码详细流程

    FFmpeg在解码一个视频的时候的函数调用流程.为了保证结构清晰,其中仅列出了最关键的函数,剔除了其它不是特别重要的函数. 下面解释一下图中关键标记的含义. 函数背景色 函数在图中以方框的形式表现出来 ...