webkit-box

1、之前要实现横列的web布局，通常就是float或者display：inline-block; 但是都不能做到真正的流体布局。至少width要自己去算百分比。
2.flexible box 就可以实现真正意义上的流体布局。只要给出相应属性，浏览器会帮我们做额外的计算。

提供的关于盒模型的几个属性：

box-orient           子元素排列 vertical or horizontal
box-flex             兄弟元素之间比例，仅作一个系数
box-align            box 排列
box-direction        box 方向
box-flex-group       以组为单位的流体系数
box-lines
box-ordinal-group    以组为单位的子元素排列方向
box-pack以下是关于flexible box的几个实例
1、三列自适应布局，且有固定margin：

<!DOCTYPE html><html><style>
.wrap {
display: -webkit-box;
-webkit-box-orient: horizontal;
}
.child {
min-height: 200px;
border: 2px solid #666;
-webkit-box-flex: 1;
margin: 10px;
font-size: 100px;
font-weight: bold;
font-family: Georgia;
-webkit-box-align: center;
}
</style><div><div>1</div><div>2</div><div>3</div></div></html>

2、当一列定宽，其余两列分配不同比例亦可(三列布局，一列定宽，其余两列按1：2的比例自适应)：

<!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 {-webkit-box-flex: 1}
.flex2 {-webkit-box-flex: 2}
</style><div><div>200px</div><div>比例1</div><div>比例2</div></div></html>
3、下面是一个常见的web page 的基本布局：

<!DOCTYPE html><html><meta charset=”utf-8″ /><style>
header, footer, section {
border: 10px solid #333;
font-family: Georgia;
font-size: 40px;
text-align: center;
margin: 10px;
}
#doc {
width: 80%;
min-width: 600px;
height: 100%;
display: -webkit-box;
-webkit-box-orient: vertical;
margin: 0 auto;
}
header,
footer {
min-height: 100px;
-webkit-box-flex: 1;
}
#content {
min-height: 400px;
display: -webkit-box;
-webkit-box-orient: horizontal;
}

.w200 {width: 200px}
.flex1 {-webkit-box-flex: 1}
.flex2 {-webkit-box-flex: 2}
.flex3 {-webkit-box-flex: 3}
</style><div id=”doc”><header>Header</header><div id=”content”><section>定宽200</section><section>比例3</section><section>比例1</section></div><footer>Footer</footer></div></html>

css3 webkit-box的用法的更多相关文章

  1. css3中user-select的用法详解

    css3中user-select的用法详解 user-select属性是css3新增的属性,用于设置用户是否能够选中文本.可用于除替换元素外的所有元素,以下是user-select的主要用法和注意事项 ...

  2. CSS3 Flex Box（弹性盒子）

    CSS3 Flex Box(弹性盒子) 一.简介 弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及 ...

  3. 前端CSS3布局display:grid用法

    前端CSS3布局display:flex用法 1. 先附上代码 点击查看代码 <!DOCTYPE html> <html> <head> <meta char ...

  4. 前端CSS3布局display:flex用法

    前端CSS3布局display:flex用法 先附上代码 点击查看代码 <!DOCTYPE html> <html> <head> <meta charset ...

  5. css3 box-shadow 阴影的用法

    text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果.随着html5和CSS3的普及,这一特殊效果使用越来越普遍. 基本语法是{box-shadow:[inset ...

  6. 转: css3: display:box详解

    示例见:  css3: flexbox (BTW: blog不能包含iframe script真不方便啊~~) display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决 ...

  7. css3中webkit-box的用法（平分父元素）

    display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分.目前box- ...

  8. CSS3 RGBA 属性高级用法

    这个属性的兼容问题比较简单,IE8已经支持这个属性,IE6和IE7也可以通过hack支持.RGBA和CSS2里的RBG属性差不多,只是RGBA属性多了一个透明度的定义,CSS3标准里对RGBA属性的解 ...

  9. CSS3 Flex Box 弹性盒子、弹性布局

    目录 1. 概要 2. justify-content 属性 3. align-items 属性 4. flex-wrap 属性 5. align-content 属性 6. 居中 7. align- ...

  10. css3中webkit-box的用法

    转自:http://www.frontopen.com/288.html 1.之前要实现横列的web布局,通常就是float或者display:inline-block; 但是都不能做到真正的流体布局 ...

随机推荐

  1. 关于KEIL编译报错和警告问题

    编译时候报错.. Library reports error: __use_no_semihosting was requested, but _ttywrch was referenced 上网找了 ...

  2. Modbus库开发笔记之七：Modbus其他辅助功能开发

    前面开发了各种应用,但是却一直没有提到一个问题,你就是对具体的数据进行读写操作.对于Modbus来说标准的数据有4种:线圈数据(地址:0000x).输入状态量数据(地址:1000x).保持寄存器数据( ...

  3. 机器学习之SVD分解

    一.SVD奇异值分解的定义 假设是一个的矩阵,如果存在一个分解: 其中为的酉矩阵,为的半正定对角矩阵,为的共轭转置矩阵,且为的酉矩阵.这样的分解称为的奇异值分解,对角线上的元素称为奇异值,称为左奇异矩 ...

  4. 细说Django的中间件

    分析Django的生命周期,我们知道所有的http请求都要经过Django的中间件. 假如现在有一个需求,所有到达服务端的url请求都在系统中记录一条日志,该怎么做呢? Django的中间件的简介 D ...

  5. vue之node.js的简单介绍

    一.什么是node.js? 它是可以运行JavaScript的服务平台,可以吧它当做一门后端程序,只是它的开发语言是JavaScript 二.安装 1.node.js的特性: - 非阻塞IO模型 - ...

  6. kali linux宿主机和虚拟机互访实现方案

    1.攻防模拟中,将DVWA安装到自己的宿主机中,在kali Linux中通过sqlmap和其他工具启动嗅探攻击,需要配置网络.虚拟机采用桥接方式,并复制Mac地址状况. 2.查看各自系统下的IP地址. ...

  7. bzoj 4816

    这题是莫比乌斯反演的典型题也是很有趣的题. 题意:求,其中f为为斐波那契数列 那么首先观察一下指数,发现是我们熟悉的形式,可以转化成这样的形式: 令T=kd,且假设n<m,有: 令 则原式= 这 ...

  8. jenkins持续集成：jenkins+SVN

    实现jenkins从svn拉取最新的代码,再执行驱动脚本进行自动化测试 新建一个任务 输入任务名,选“构建一个自由风格的软件项目”,点左下角“确定” 丢弃旧的构建,如下设置为保留3天内的10条构建记录 ...

  9. springcloud Eureka控制台参数说明

    Home进入Eureka控制台首页,首先看HOME页的头部 System Status Environment : 环境,默认为test, 该参数在实际使用过程中,可以不用更改 Data center ...

  10. ActiveSync中的SendMail

           SendMail命令是专门用于发送MIME格式邮件的.在这里,子元素ClientId必须不同,否则会被认为是同一封邮件,被服务器拒绝.         疑问:ClientId应该是和账户 ...