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提出了一种新的方案 ...
随机推荐
- UVA 10635 Prince and Princess【LCS 问题转换为 LIS】
题目链接: http://acm.hust.edu.cn/vjudge/problem/visitOriginUrl.action?id=19051 题意: 有两个长度分别为p+1和q+1的由1到n2 ...
- SYN攻击SYN Attack
SYN攻击SYN Attack SYN Attack是一种DOS攻击方式.它利用的是TCP协议的漏洞,攻击目标,使其不在响应网络请求.在TCP协议中,需要三次握手,才能建立TCP连接.在握手过程中 ...
- 【ZJOI2017】树状数组
题目描述 漆黑的晚上,九条可怜躺在床上辗转反侧.难以入眠的她想起了若干年前她的一次悲惨的 OI 比赛经历.那是一道基础的树状数组题. 给出一个长度为 $n$ 的数组 $A$,初始值都为 $0$,接下来 ...
- idea没有subversion问题
问题描述:idea导入svn项目,但点击项目文件右键没有找到subversion选项.同时,idea界面底部没有version control菜单. 解决方法:原因是idea没有启动版本控制.点击id ...
- PAT1001~1005AC代码
晚上了,睡不着觉,做CF把,太累了,那就来几道乙级的编程小题吧. 1001.卡拉兹(Callatz)猜想: 对任何一个正整数 n,如果它是偶数,那么把它砍掉一半:如果它是奇数,那么把 ( 砍掉一半.这 ...
- java并发之hashmap
在Java开发中经常会使用到hashmap,对于hashmap又了解多少,经常听到的一句话是hashmap是线程不安全的,那为什么是线程不安全的,如何才能保证线程安全,JDK又给我们提供了那些线程安全 ...
- MyBatis的一级缓存和二级缓存
一级缓存 是SqlSession级别的缓存,当使用了clearCache方法和,或者close方法的话,这个缓存失效,如果还有同样的查询,则还会发送一次查询 SqlSession session = ...
- ios构造和析构
遵循规则: 构造先父类后子类 析构先子类后父类 所以,自定义的init函数需要首先[super init....] dealloc中[super dealloc]却是放在最后的 - (id)initW ...
- CNN网络--VGGNet
Simonyan, Karen, and Andrew Zisserman. "Very deep convolutional networks for large-scale image ...
- Aws Dynamodb数据导出到S3
本节将描写叙述怎样从一个或多个DynamoDB的表导出数据到S3的bucket中.在运行导出之前你须要提前创建好S3的bucket. 注意 假设你还没有使用过AWS Data Pipeline,在运行 ...