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. iOS -- Effective Objective-C 阅读笔记 (1)

    1: 在类的头文件中尽量 少 的引用其他头文件,尽量用 @class xxxxxx; 理解: 当你创建了一个 A 类,这个类又 需要具有 B 类的实例, 你可以直接为 A 类添加 B 类类型的 属性, ...

  2. 信息摘要算法之二：SHA1算法分析及实现

    SHA算法,即安全散列算法(Secure Hash Algorithm)是一种与MD5同源的数据加密算法,该算法经过加密专家多年来的发展和改进已日益完善,现在已成为公认的最安全的散列算法之一,并被广泛 ...

  3. linux 批量进行：解压缩某一类压缩文件类型的文件

    1: 编写脚本 [oracle@oracle oracle]$ vim unzip.sh ziphome=/u01/app/oracle ziplist=`du -a $ziphome |grep ' ...

  4. Confluence 6 注册单一小工具

    如果你不能订阅一个应用的小工具,你需要将小工具一个一个的添加进来.针对网站不支持小工具订阅和你的应用和你的 Confluence 不能建立信任连接的情况,你就只能这样添加了. 首先你需要获得小工具的 ...

  5. Java并发编程-并发工具类及线程池

    JUC中提供了几个比较常用的并发工具类,比如CountDownLatch.CyclicBarrier.Semaphore. CountDownLatch: countdownlatch是一个同步工具类 ...

  6. nmap 扫描信息收集

    1.端口镜像 port Mirroring 功能通过在交换机上或者路由器上,将一个或者多个源端口的数据流量妆发大奥某一个指定的端口来实现对网络的监听,指定端口成为镜像端口或目的端口. 2.ARP攻击捕 ...

  7. java String正则表达式

    1.正则表达式 字符串替换,     例子; String s="131hello334thrid  ".replaceAll("[a-zA-Z]"," ...

  8. cf1144G 将串分解成单调递增和递减子串（贪心）

    这算哪门子dp.. 具体做法就是贪心,建立两个vector存递增序列递减序列,操作过程中a可以合法地匀一个给b 就是判断第i个数放在递增序列里还是放在递减序列里,需要根据后面的数来进行决策 #incl ...

  9. String 类的实现（3）String类常用函数

      2 #include<iostream> 3 #include<stdio.h> 4 #include<assert.h> 5 #include <iom ...

  10. Lua中assert( )函数的使用

    当Lua遇到不期望的情况时就会抛出错误,比如:两个非数字进行相加:调用一个非函数的变量:访问表中不存在的值等.你也可以通过调用error函数显示的抛出错误,error的参数是要抛出的错误信息. ass ...