box-flex 弹性合布局+WebApp布局自适应
问：随着屏幕改变，中间自适应 两边固定宽度？
参考:
问：左侧导航栏隐藏后，右侧内容宽度自动（响应式）变大？
<!DOCTYPE html>
<html>
<head>
<style>
*{
margin: 0 ;padding: 0;
}
div {
display: -moz-box;
display: -webkit-box;
display: box;
width: 100%;
}
#p1 {
-moz-box-flex: 1.0;
-webkit-box-flex: 1.0;
background: red;
height: 500px;
}
#p2 {
-moz-box-flex: 8.0;
-webkit-box-flex: 8.0;
box-flex: 8.0;
background: blue;
height: 100px;
margin: 0 20px;
}
</style>
</head>
<body>
<div>
<p id="p1">Hello</p>
<p id="p2">W3School</p>
</div>
<p><b>注释：</b>IE 不支持 box-flex 属性。</p>
</body>
</html>
参考:
纯属个人观点,仅供参考！
box-flex 弹性合布局+WebApp布局自适应的更多相关文章
- flex 弹性合模型
网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中 ...
- box flex 弹性盒模型（转载）
css3引入了新的盒模型——弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间.这与XUL(火狐使用的用户交互语言)相似,其它语言也使用相同的盒模型,如XAML .GladeX ...
- 网页布局——Flex弹性框布局
布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. 需要安卓4.4及以上版本可以使用 ...
- 【flex弹性盒布局】------这个强大的功能
你知道flex弹性布局么? 我们先来了解它的概念:Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局 ...
- flex弹性布局学习
一.介绍 flex( flexible box:弹性布局盒模型),是2009年w3c提出的一种可以简洁.快速弹性布局的属性.主要思想是给予容器控制内部元素高度和宽度的能力.目前已得到以下浏览器支持: ...
- 记一下flex弹性布局
flex弹性布局也越来越广泛的在我们代码中出现了,更加方便我们的布局.自己用了查,查了用,有些还是记不住,俗话说好脑子不如烂笔头,原来都是写在本子上的,很不幸的一次次的想翻的时候总是找不到,还是写博客 ...
- flex弹性布局学习总结
本文首次发布在我的个人博客:Claiyre的个人博客 https://claiyre.github.io/ 博客园地址:http://www.cnblogs.com/nuannuan7362/如需转载 ...
- flex弹性布局的基本介绍
最近开始做元素排列比较复杂的项目,同时需要各种型号手机的适配,我发现以前所掌握的盒子模型.display.position.float等已经不能满足我的需求了, 于是开始着重学习flex弹性布局并运用 ...
- 87.CSS Flex 弹性盒模型布局教程（共用的css在48篇文章gird）
CSS Flex 弹性盒模型布局教程 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. flex布局就是给任何一个容器添加 dis ...
随机推荐
- 第三章 Hyper-V 2012 R2配置选项
原书中的第二章 是介绍了下hyper-v的管理器和检查点的使用,导入导出虚拟机,所以我跳过了不高兴写,很简单.直接进入第三部分,介绍虚拟机的三个重要组成部分:CPU,内存,硬盘的配置选项. Hyper ...
- （一）helloworld
欢迎来到windows编程的世界,先给我们的windows打个招呼吧: #include <Windows.h> #include <iostream> using names ...
- Linux 小知识翻译 - 「桌面环境」
这次聊聊桌面环境. 上次聊了 X Window System 相关的内容,虽然令人意外,但X Window System 和桌面环境不是一回事.请大家稍微考虑一下. X Window System 是 ...
- Beta冲刺！ Day1 - 磨刀
Beta冲刺! Day1 - 磨刀 今日已完成 晨瑶:罗列Beta计划.和新人交接.任务安排 昭锡:无 永盛:服务器出现一些 mysql 的问题,伟鹏的爬取脚本没办法远程链接到服务器,在修 立强:学习 ...
- Java面试题以及答案精选（架构师面试题）-基础题1
基础题 一.String,StringBuffer, StringBuilder 的区别是什么?String为什么是不可变的?1. String是字符串常量,StringBuffer和StringBu ...
- php如何控制用户对图片的访问 PHP禁止图片盗链
本文摘自网络仅供学习只用 本人根据教程总结了一下https://www.imooc.com/video/13412 主要是利用apache的htacess进行控制,,拿什么判断是不是通过本站点访问的呢 ...
- QT数据类型
typedef signed char int8_t;typedef short int16_t;typedef int int3 ...
- strcat、num2str
文章出处: http://blog.sina.com.cn/s/blog_6fb8aa0d01019id5.html http://wenda.so.com/q/1439143662729624 ht ...
- CVE-2016-7912 分析报告
CVE-2016-7912 背景介绍 在内核USB驱动中,进行异步读取或写入时,调用ki_complete(),会提前释放kiocb结构体,从而造成UAF漏洞,但经过分析,发现无法利用此漏洞进行攻击. ...
- 浅谈传感器常用Delta-SigmaADC
过采样ADC,或噪声整形ADC,也叫Delta-Sigma ADC.名字很多,基本上都由求差电路,积分求和电路组成调制器,后续由数字滤波器获得Nbit数字输出.不管怎样,数学上的除法能够让你理解这类A ...