转自：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. zigbee学习之路(十三):基于协议栈的Usart 实验

    一.前言 这次实验我们来学习基于zigbee的串口通信实验,揭开zigbee神秘的面纱,让大家可以用zigbee协议编制属于自己的程序,这次实验只是串口发送数据,并没有进行无线的数据传输,为的是使大家 ...

  2. Flesch Reading Ease -POJ3371模拟

    Flesch Reading Ease Time Limit: 1000MS Memory Limit: 65536K Description Flesch Reading Ease, a reada ...

  3. MVC的多表单

    中心思想就是在一个表单内不规定"action",在js里面用@Url.Axtion("视图层","控制器")方法来设置表单的传值. 控制器 ...

  4. eclipse 4.5.2 源码修改 格式化Java代码

    注:本文代码基于eclipse4.5.2 1. 需求:在换电脑之后,如何不用配置eclipse就可以很快进入开发呢,并保持原来的编码规范. 2. 方法:修改eclipse源码 分别修改了两个jar包2 ...

  5. Markdown工具之---Typora

    在项目集成阶段中,接口文档是不可避免的,以往的我使用word编辑器编写接口文档,虽然word使用不是很熟练,但是只要在网上下载模板或者自己花时间搞定一个文档格式 基本能一劳永逸.但是还是会有很多问题存 ...

  6. Android study --- 广播

    广播接收者 在Android系统运行时会产生很多事件,事件产生时,回想系统发送广播,只要向系统发送广播,系统就知道发生了相应的事件,从而执行相对应的代码.在系统中只要使用广播接受者,就可以接收广播 创 ...

  7. jQuery学习笔记（三）jQuery中的事件

    目录 加载DOM 事件绑定 合成事件 事件冒泡 移除事件 一．加载DOM Javascript 与HTML之间的交互是通过用户操作浏览器页面引发的事件来处理的.jQuery提供了丰富的事件处理机制.从 ...

  8. Duiib 创建不规则窗口(转载)

    方法一: 转载:http://blog.csdn.net/chenlycly/article/details/46447297 转载:http://blog.csdn.net/harvic880925 ...

  9. 1000【入门】熟悉一下Online Judge的环境

    var a,b:longint; begin read(a,b); writeln(a+b); end. #include <stdio.h> int main() { int a,b; ...

  10. 书__Oracle

    1.高可用性 1.1.ORACLE数据高可用之路 1.2.Oracle数据库进阶-高可用性.性能优化和备份恢复 2. 3. 4. 5.