转自：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. ANGULAR JS WATCH监听使用（详）

    ANGULAR 监听使用: 当angular数据模型发生变化时,我们需要如果需要根据他的变化触发其他的事件. $watch是一个scope函数,用于监听模型变化,当你的模型部分发生变化时它会通知你. ...

  2. java udp与tcp

    一:基础  NET基本对象java.net.InetAddress类的使用 IP地址是IP使用的32位(IPv4)或者128位(IPv6)位无符号数字,它是传输层协议TCP,UDP的基础.InetAd ...

  3. WebForm基础

    客户端与网页端: C/S(客户端): 两种方式:winform WPF 数据是存在其它的电脑上或服务器上 运行时需要从服务器上下载相应的数据 数据加工的过程是在用户电脑上执行 好处是数据请求速度比较快 ...

  4. Mybatis配置文件

    XML 映射配置文件 MyBatis 的配置文件包含了设置(settings)和属性(properties)信息. properties 这些属性都是可外部配置且可动态替换的,既可以在典型的 Java ...

  5. ubuntu和windows上pip和windows上conda国内源更新module

    ubuntu上: -i http://pypi.douban.com/simple --trusted-host pypi.douban.com # pip install web.py -i htt ...

  6. ionic入门之色彩、图标、边距和界面组件：列表

    目录: 色彩.图标和边距 色彩 图标 内边距 界面组件:列表 列表:.list 成员容器:.item .item: 嵌入文本 .item : 嵌入图标 .item : 嵌入头像 .item : 嵌入缩 ...

  7. java web使用gradle配置详情

    博客说明:本片博客为FSSARB项目片面部分,目前项目还在更新中,请持续关注... 序言 项目构建工具从ant到maven,再到gradle,这是在严峻的技术考验下不停过度的结果.依照百度百科的阐述, ...

  8. Reactor事件驱动的两种设计实现：面向对象 VS 函数式编程

    Reactor事件驱动的两种设计实现:面向对象 VS 函数式编程 这里的函数式编程的设计以muduo为例进行对比说明: Reactor实现架构对比 面向对象的设计类图如下: 函数式编程以muduo为例 ...

  9. a 锚点跳转滑动效果

    点击a链接时,跳转到相应id的位置处,有一个滑动效果. <a href="#my">我是跳转到div</a><div id="my" ...

  10. servlet获取表单数据的方式和编码方式

    .在servlet中获取表单的数据的几种方式  1>request.getParameter(“name”)://获取指定名称的值,返回值类型是一个字符串  2>request.getPa ...