转自：http://www.frontopen.com/288.html

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

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

1、三列自适应布局，且有固定margin：

<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>

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中font-face属性的用法详解

    @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许 ...

  2. CSS3中transform属性的用法

    有时候网站也要愚弄一下访客,比如愚人节.下面我给大家推荐个效果,就是整个页面左右颠倒了.css3 很强大,简单的几行代码就可以帮我们实现这个效果. view source   print? 01 &l ...

  3. css3中webkit内核的滚动栏样式

    项目其中用到的滚动栏样式,在别人的基础上调成适合自己的样式.(IE能够调试滚动栏样式,firefox眼下不能调试) ::-webkit-scrollbar { width: 14px; }/* Tra ...

  4. html5+css3中的background: -moz-linear-gradient 用法

    在CSS中background: -moz-linear-gradient 让网站背景渐变的属性,目前火狐3.6以上版本和google浏览器支持这个属性. background: -moz-linea ...

  5. html5+css3中的background: -moz-linear-gradient 用法 (转载)

    转载至-->http://www.cnblogs.com/smile-ls/archive/2013/06/03/3115599.html 在CSS中background: -moz-linea ...

  6. MFC中List box的用法

    首先在头文件中创建对象,CSGrid m_proViewList;//创建表头#pragma region 建立grid表的标题 m_proViewList.AppendColumn(_T(" ...

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

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

  8. 不可不看！CSS3中三十一种选择器用法

    原文 The 30 CSS Selectors you Must Memorize 由 Jeffrey Way 发表于 2012 年 6 月,介绍了 30 种最常用的 CSS 选择器用法,多加了一种, ...

  9. CSS3中flexbox如何实现水平垂直居中和三列等高布局

    最近这些天都在弥补css以及css3的基础知识,在打开网页的时候,发现了火狐默认首页上有这样一个东西.

  10. css3 media媒体查询器用法总结

    随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得在国内IE6用户居高不下的情况下,这些新的技术还不会广泛的蔓延下去,那你就错了,如今淘宝,凡客,携程等等公司都已经在大胆 ...

随机推荐

  1. div css 自适应

    怎样实现响应式布局? 对于这个问题,我们可以通过CSS3中的Media Query来实现,即媒介查询.媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件.媒体查询的大部分媒体特性都接受 ...

  2. android 命名 数组 所有国家 String[] COUNTRIES

    static final String[] COUNTRIES = new String[] { "Afghanistan", "Albania", " ...

  3. Android4.0.3 USB OTG底层插入上报过程分析(1)

    下面的两个宏是PM8058的MMP11(R15),MMP12(P15)管脚.#define EXT_CHG_VALID_MPP 10#define EXT_CHG_VALID_MPP_2 11 sta ...

  4. 使用 CSS3 绘制 Hello Kitty

    偶然间看到了 SegmentFault 上的一篇文章,感觉这个 Hello Kitty 画的还不错,心血来潮也用 CSS3 画了个 Hello Kitty,现在在这里记录一下详细的绘制过程.想要源码. ...

  5. 我的Markdown笔记

    一片简单的Markdown笔记,共8项,基本上满足Markdown文档的编写(表格不建议用Markdown),每项上半部分是源码,下半部分是效果图片. 标题 段落 列表 强调 分割线 代码 连接 图片 ...

  6. PHP5.5.13 + Apache2.4.7安装配置流程详解

    ---恢复内容开始--- 自学PHP的这段时间里,真是倍感辛酸,相信广大的菜鸟们应该很我感同身受吧,在查阅了网上和众多数资料后,总结出来想当比较全面的安装方法,拿出来与广大的编程爱好者一起分享哈. 首 ...

  7. POJ Challenge消失之物

    Description ftiasch 有 N 个物品, 体积分别是 W1, W2, ..., WN. 由于她的疏忽, 第 i 个物品丢失了. "要使用剩下的 N - 1 物品装满容积为 x ...

  8. 线性表-双向链表（LinkedList）

    双向链表:如图1-3 所示,会把当前header拆分开,重新插入一个Entry<E>. LinkedList源码 0.首先这个类中的两个变量 private transient Entry ...

  9. android模拟器genymotion安装virtualbox不能为虚拟电脑启动一个新任务

    错误详情如下: Unable to load R3 module C:\Program Files\Oracle\VirtualBox/VBoxDD.DLL (VBoxDD): GetLastErro ...

  10. 课程作业01：模仿JavaAppArguments.java示例，编写一个程序，此程序从命令行接收多个数字，求和之后输出结果。

    1.设计思想: 首先是从JavaAppArguments.java示例开始,此示例已打印参数,定义数字 之和和作为存储单位的整型,然后将输入参数的字符串转化为整型,之后求和即可. 2.程序流程图: 3 ...