CSS3盒模型display:-webkit-box;的使用
<!DOCTYPE html>
<html><meta charset="utf-8" />
<style>
.wrap {
display: -webkit-box;
-webkit-box-orient: horizontal;
}
.child {
min-height: 200px;
border: 2px solid #666;
margin: 10px;
font-size: 40px;
font-weight: bold;
font-family: Georgia;
-webkit-box-align: center;
}
.w200 {width: 200px}
.flex1 {display:block;-webkit-box-flex: 3}
.flex2 {display:block;-webkit-box-flex: 1}
</style>
<div class="wrap">
<!-- <div class="child w200">200px</div>
<div class="child flex1">比例1</div>
<div class="child flex2">比例2</div> -->
<input type="text" class="child flex1" value="比例1">
<input type="text" class="child flex2" value="比例2">
</div>
</html>
Ps:例如上面的child要求是块（block）元素才有效。
CSS3盒模型display:-webkit-box;的使用的更多相关文章
- CSS3盒模型display:box详解
display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 目前box ...
- CSS3盒模型display:box;box-flex:3;
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- CSS3盒模型display:box简述
display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分. box-f ...
- [转]CSS3盒模型display:box详解
时间:2014-02-25来源:网络作者:未知编辑:RGB display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布 ...
- CSS3盒模型display初探（display:box/display:flex）
可以实现水平等分切割等.日后在研究,做个记录. 首先要声明:display:box,像谷歌浏览器要加前缀识别码:display:-webkit-box; 然后才开始使用其属性,同时也是要带上前缀识别码 ...
- css3盒模型学习--利用box自适应布局
box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典 的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 目前box-flex属性还没 ...
- CSS3.0盒模型display:box;的使用
CSS3.0盒模型display:-webkit-box;的使用 box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂 ...
- 移动web开发实践-css3（1）盒模型display:-webkit-box;的使用
提到移动布局不得不提到盒模型display:-webkit-box;这个属性,在移动布局中浮动已经不在重要,相反自适应成为主要的需求,所以display:-webkit-box;变得尤为重要. box ...
- CSS3盒模型温故
CSS有一种基础设计模式叫盒模型,定义了Web页面中的元素是如何看做盒子来解析的.每一个盒子有不同的展示界面,下面就来介绍盒模型,主要有一下几种盒模型:inline.inline-block.bloc ...
随机推荐
- 第三方浏览器内核嵌入一、Crosswalk
本篇分为三部分: 介绍Crosswalk背景 介绍Crosswalk集成步骤 为了减小体积,仅集成兼容ARM的Crosswalk(针对X86同理) PART_A Crosswalk背景介绍 Web技术 ...
- Oracle运维 专业的事情交给专业的人来做
关于Oracle运维的重要性,随便写了几句,放在这儿和大家共勉. Oracle数据库在RDBMS中独占熬头,07年统计其市场份额占关系数据库市场的48.6%稳居首位,而且逐年增加,上升势头强劲.在使用 ...
- Linux自制离线源，利用百度网盘等下载离线资源
CentOS安装Axel: 目前yum源上没有Axel,我们可以到http://pkgs.repoforge.org/axel/下载rpm包安装. 32位CentOS执行下面命令: wget -c h ...
- 在ASP.NET MVC自定义错误页面
异常处理跳转页面 第一步,在项目的Web.config文件中找到节点<system.web> 在此节点下添加配置(Error为定义的控制器也可以多添加些error标签用于区分不同的错误) ...
- Qt5 多显示器获取不同显示器的分辨率和位置的方法
Qt5 多显示器获取不同显示器的分辨率和位置的方法 先放官方文档链接:QDesktopWidget - Qt5 Reference 之前一直在用被我乱搞后的ShadowPlayer作为默认播放器,后来 ...
- 转：HTML 5 控件事件属性
Window 事件属性 window 对象触发的事件. 适用于 <body> 标签: 属性 值 描述 onafterprint script 在打印文档之后运行脚本 onbeforepri ...
- Linux man 后面的数字含义及作用
Linux的man很强大,该手册分成很多section,使用man时可以指定不同的section来浏览,各个section意义如下: 1 Executable programs or shell co ...
- CSS自学笔记（10）:CSS3盒子模型
CSS3为CSS技术的升级版本.最新版本. 就CSS而言,它是一个模块,是一个庞大而又复杂的模块,但是在CSS3中,将这一个庞大的模块分解为一个个容易理解的同时又很精简的小模块,同时CSS3中又添加了 ...
- linux----suid\sgid
1.suid和sgid 都是针对二进制程序来说了,bash脚本不在它的作用范围. 2.如果一个二进制文件设置有suid,那么在userA用户执行它时,会以文件所属用户的身份来执行.sgid同理: 3. ...
- delphi 实现微信开发
大体思路: 1.用户向服务号发消息,(这里可以是个菜单项,也可以是一个关键词,如:注册会员.) 2.kbmmw web server收到消息,生成一个图文消息给微信,在图文消息中做好自己的url,在u ...