旧的flex
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<style type="text/css">
*{margin: 0;padding:0}
html,body{
width:100%;
height:100%;
}
#container{
height: 100%;
display: -webkit-box;
-webkit-box-orient: vertical;
}
header{
width: 100%;
height: 100px;
background: darkcyan; -webkit-box-flex-group: 3;
}
footer{
width: 100%;
height: 100px;
background: darkcyan;
-webkit-box-flex: 1;
-webkit-box-flex-group: 1;
}
section{
width: 100%;
height: 100px;
background: #FFFFFF;
-webkit-box-flex: 2;
-webkit-box-flex-group: 1;
} </style>
</head>
<body>
<div id="container">
<header></header>
<section></section>
<footer></footer>
</div>
</body>
</html>
旧的flex的更多相关文章
- CSS旧版flex及兼容
× 目录 [1]适用范围 [2]伸缩项目 [3]伸缩流方向[4]伸缩流换行[5]主轴对齐[6]伸缩性[7]显示顺序[8]flex兼容 前面的话 flex弹性盒模型有3个版本: 旧版本.混合版本和新版本 ...
- 让旧版本的 Flash IDE 支持更新的 Flash Player/AIR 功能
转载:https://blog.zengrong.net/post/1568.html 让旧版本的 Flash IDE 支持更新的 Flash Player/AIR 功能 今天在论坛上看到一篇文章:H ...
- css3 新旧伸缩盒的异同
由于不需要理会IE浏览器,伸缩盒(flexible box)移动端开发中非常好用! 工作中使用APICLOUD开发手机App,老板要求兼容到安卓2.3(新版的需要安卓4.4以上),所以一直使用的是旧版 ...
- flex盒子布局
看过很多对于弹性盒子flex的简介,但还是觉得阮一峰大神的解析和张鑫旭大神(旧版flex)的解析比较容易理解,下面,我以自己的理解来叙述关于flex弹性布局! 1.概念(容器和项目) 在flex中,有 ...
- 走进flex布局
简介:flex 是一个CSS的display 属性中新添加一个值. 随着inline-flex的使用,它将使它适用的元素成为一个flex container(伸缩容器),而这个元素的每个子元素将成为 ...
- CSS学习目录
前面的话 CSS是前端工程师的基本功,但好多执迷于学习javascript的人的基本功并不扎实.可能一些人从w3school网站匆匆过了一遍,只是对CSS常用概念有一些表面上的理解,就一头扎进java ...
- 文本溢出text-overflow和文本阴影text-shadow
前面的话 CSS3新增了一些关于文本的样式,其中text-overflow文本溢出和text-shadow文本阴影有些特别.因为它们有对应的overflow溢出属性和box-shadow盒子阴影属性. ...
- Flex-box 学习
.flex-cont{ /*定义为flexbox的“父元素”*/ display: -webkit-box; display: -webkit-flex; display: flex; /*子元素沿主 ...
- swf version 与flash player 对应关系
2013-04-16更新:更新Flash Player 11.7/AIR 3.7正式版. 详细链接FlashPlayer 11.7详情 2013-03-10更新:更新Flash Player 11.6 ...
随机推荐
- 重装wordpress
1.删除wordpress: https://blog.csdn.net/yeqinghanwu/article/details/77916912 2.uninstall lnmp 3.安装lnmp ...
- HDUOJ-----Climbing Worm
Climbing Worm Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Tot ...
- 最新CoreData封装Demo
1.创建CoreData文件 2. 3. 4. UploadCoreDataAPI.h // // UploadCoreDataAPI.h // dsafsda // // Created by 冯敏 ...
- rc522头文件
//本头文件是以51为蓝本 #ifndef __rc522_h__ #define __rc522_h__ #include <string.h> #include <wiringP ...
- kubernetes删除pod失败
一.概述 k8s中删除pod失败,可能是该pod有rc,rs上层控制,而且很有可能,所以删除上层对应的rc,rs,deployment即可: 删除的方法: 1.直接删除rc,rs,deployment ...
- 【Oracle】Oracle索引
在关系数据库中,索引是一种与表有关的数据库结构,它可以使对应于表的SQL语句执行得更快.索引的作用相当于图书的目录,可以根据目录中的页码快速找到所需的内容. 对于数据库来说,索引是一个必选项,但对于现 ...
- Block（二）内存管理与其他特性-b
一.block放在哪里 我们针对不同情况来讨论block的存放位置: 1.栈和堆 以下情况中的block位于堆中: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 ...
- GIF Brewery for Mac（录制 Gif 动图工具）安装
1.软件简介 GIF Brewery 一款用于录制 Gif 动图等的工具. 2.资源列表 链接 提取密码 系统要求 软件语言 GIF Brewery for Mac v3.9.5 ltmf ma ...
- Tomcat7并发和线程数
最近一直在解决线上一个问题,表现是: Tomcat每到凌晨会有一个高峰,峰值的并发达到了3000以上,最后的结果是Tomcat线程池满了,日志看很多请求超过了1s. 服务器性能很好,Tomcat版本是 ...
- Python读文本文件中文乱问题
file_object = open('thefile.txt')try: all_the_text = file_object.read().decode("gb2312")fi ...