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>
css position弹性盒子测试的更多相关文章
- CSS Flexbox 弹性盒子模型
CSS Flexbox 弹性盒子模型 设置元素样式为 display: flex 或 display: inline-flex, 让元素变成flex容器, 从而可以通过flex模式布局它的子元素. f ...
- css横向 弹性盒子布局的一些属性
<head> <meta charset="utf-8"> <meta name="viewport" content=" ...
- css FlexBox 弹性盒子常用方法总结
总结一下弹性盒子常用的方法,弹性盒子的功能强大,这次我做了兼容性的felxbox,虽然代码多了一点,但在项目时候可以直接复制过来用,同时在项目上线的时候,如果这时候弹性盒子出了兼容问题,那就可急了~ ...
- Flexible 弹性盒子模型之CSS justify-content 属性
实例 在弹性盒对象的 <div> 元素中的各项周围留有空白: div { display: flex; justify-content: space-around; } 复制 效果预览 浏 ...
- css中的f弹性盒子模型的应用案例
案例1: <!doctype html> <html> <head> <meta charset="utf-8"> <meta ...
- CSS box-flex属性，然后弹性盒子模型简介(转)
一.淡淡的开头语 昨天趁着不想工作的时间间隙闲逛24ways,在My CSS Wish List一文中,见到了个新鲜的CSS属性,就是题目中的box-flex,以前没有见过,顿生疑惑,不知是骡子还是马 ...
- css弹性盒子学习
css3弹性盒子是一种布局方式,在适应不同的屏幕大小的时候,能够确保元素拥有更恰当的排布行为.它只是视觉呈现上的,即显示顺序适应显示空间,与源代码无关,源代码顺序不受影响. 定义一个弹性盒子: 在cs ...
- CSS弹性盒子的基本用法
.container { width: 302px; height: 302px; border: 1px solid; display: flex } .item { width: 100px; h ...
- 快速使用CSS 弹性盒子
布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现:2009年,W3C提出了一种新的方案 ...
随机推荐
- 计蒜客 微软大楼设计方案（RMQ）
题目链接 微软大楼设计方案 中文题就不说题意了~ 首先是简单版本 满足$1 <= n, m <= 50$ 那么设$c[i][j]$为从第$i$幢楼到第$j$幢楼的最低的那幢楼的高度 计算两 ...
- 中国正式发放5G牌照 详细对比中美两国5G实力
今天,中国5G商用走进新里程:工信部向中国电信.中国移动.中国联通.中国广电发放5G商用牌照,中国也成为继韩国.美国.瑞士.英国后,第五个正式商用5G的国家. 按照之前的规划,中国原定于2020年开启 ...
- BT种子文件文件结构分析（转）
估计80%以上接触互联网的人都知道bt是什么东西,任何一个用bt下载的人都知道这样一个概念,种子.bt种子就是记录了p2p对等网络中tracker, nodes, files等信息,也就是说,这个种子 ...
- javascript --- 多重继承
多重继承就是指,一个子对象中有不止一个父对象的继承模式. 想要实现她,还是非常简单的,而我们只需要延续属性拷贝的继承思路依次扩展对象即可,而对参数中所继承的对象没有限制. function multi ...
- java正则过虑字符
public static void main(String[] args) { String testrString = "{\"abc\" : \"[123 ...
- app 检查更新和更新
第一种,手动检查 //// Harpy.h// Harpy//// Created by Arthur Ariel Sabintsev on 11/14/12.// Copyright (c) ...
- Kermit,Xmodem,1K-Xmodem,Ymodem,Zmodem传输协议小结
来自:http://blog.163.com/czblaze_3333/blog/static/208996228201272295236713/ Kermit协议 报文格式: 1. MA ...
- JMeter 压力測试使用函数和 CSV 文件參数化 json 数据
在 http Load Testing 中.json 数据的提交是个让人头疼的问题.本文具体介绍怎样进行 JMeter 的 json 測试提交,以及怎样将其參数化. St ...
- Oracle对没有主键的表分页
普通情况对于有主键,能够做唯一表识的表.我们能够利用主键和rownum配合实现.比如: select scott.emp.* from scott.emp left join (select empn ...
- Android的logger机制分析
分析安卓的Logger机制 一.概述 Logger机制是在Android系统中提供的一个轻量级的日志系统,这个日志系统是以驱动程序的形式在内核空间实现的,在用户空间分别提供了Java接口和C/C++接 ...