想做自适应的流体布局 box很有用 。 还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私有属性定义firefox(-moz-)、opera(-o-)、chrome/safari（-webkit-)。

有以下属性：box-orient   子元素排列方式(水平还是竖直)  vertical  horizontal   inline-axis   block-axis

box-flex       子元素之间比例

box-align     子元素垂直对齐方式   start end center baseline stretch

box-pack     子元素水平对齐方式   start  end  center  justify

box-direction    normal   reverse

1.   box-orient    horizontal 和  inline-axis  是水平排列     vertical  和  block-axis 是竖直排列

2.   box-flex       子元素之间比例   如果有一个像固定宽度  直接写像素  比例为0即可

3.   box-align      normal  按正常顺序显示    reverse  反转顺序

4.   box-align      start   居顶对齐   end  居底对齐   center 居中对齐  stretch  拉伸到父容器等高

5.   box-pack      start   居左对齐   end  居右对齐   center 居中对齐   justify   水平等分父容器宽度（firefox与opera暂时不支持，只有safari、chrome支持）

上代码 ：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

       .box{

        display: box;

        display: -webkit-box;

        display: -moz-box;

        display: -o-box;

        box-orient:horizontal;

        -webkit-box-orient:horizontal;

        -moz-box-orient:horizontal;

        -o-box-orient:horizontal;

        padding: 10px;

        padding-right: 0px;

        width:100%;

        height:300px;

        background: green;

       }

       .item{

        box-flex:1;

        -webkit-box-flex:1;

        -moz-box-flex:1;

        -o-box-flex:1;

        height:100%;

        margin-right:10px;

        background: grey;

       }

       .item:first-of-type{

        box-flex:0;

        -webkit-box-flex:0;

        -moz-box-flex:0;

        -o-box-flex:0;

        width:200px;

       }

       .item:nth-of-type(2){

        box-flex:2;

        -webkit-box-flex:2;

        -moz-box-flex:2;

        -o-box-flex:2;

       }

    </style>

</head>

<body>

    <div class = "box">

        <div class = "item">column1</div>

        <div class = "item">column2</div>

        <div class = "item">column3</div>

    </div>

</body>

css3 display:box的更多相关文章

  1. 转: css3: display:box详解

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

  2. css3 display:box 属性

    先看例子: .ub{ display: -webkit-box !important; display: box !important; position:relative;}.ub-f1{ posi ...

  3. CSS3.0盒模型display:box;的使用

    CSS3.0盒模型display:-webkit-box;的使用 box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂 ...

  4. CSS3盒模型display:box详解

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

  5. CSS3弹性盒模型 display:box

    刚开始做网页时就有一个困惑,为什么display:block只能垂直排列,如果要水平排列就要使用float:left等方式.这种方法最难受的当然是当子元素的数量改变时,需要去修改子元素的宽度使重新适应 ...

  6. CSS3盒模型display:box简述

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

  7. [转]CSS3盒模型display:box详解

    时间:2014-02-25来源:网络作者:未知编辑:RGB display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布 ...

  8. CSS3盒模型display:box;box-flex:3;

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  9. CSS3盒模型display初探（display:box/display:flex）

    可以实现水平等分切割等.日后在研究,做个记录. 首先要声明:display:box,像谷歌浏览器要加前缀识别码:display:-webkit-box; 然后才开始使用其属性,同时也是要带上前缀识别码 ...

随机推荐

  1. python之lambda表达式

    lambda函数小结 1.lambda表达式: 以前看人家写一个长式子就能干一件我写一个函数干的事情觉得好帅,现在通过学习知道了lambda表达式其原理就是一个函数,而且是一个只能处理简单功能的函数. ...

  2. 通过iframe在其父窗口中打开隐藏元素

    先上代码 $(".login-box,#dl,.top_01 a:eq(1)").click(function(){ if(self!=top){ parent.$("# ...

  3. 20140613_JavaWeb学习之开发环境配置篇

    本文所使用软件百度云盘网址:http://pan.baidu.com/s/1kTDRFwz 1安装JDK 操作系统:windows7-64bit 版本号:jdk-7u51-windows-x64 安装 ...

  4. Swift 闭包表达式

    闭包是功能性自包含模块,可以在代码中被传递和使用. Swift 中的闭包与 C 和 Objective-C 中的 blocks 以及其他一些编程语言中的 lambdas 比较相似. 闭包的形式主要有三 ...

  5. dataset 用法（1）

    DataSet是表和列结构在内存中的表示方式,DataSet支持多表.表间关系.数据约束等,和关系数据库的模型基本一致.(本质上是微型的数据库.包含一组DataTable对象和DataTable之间的 ...

  6. C++ 文件操作实例

    图1 文件个数及名称 图2 文件内容 背景:如图1所示,现有9个要处理的文件,每个文件的内容格式如图2所示,仅仅只是数值部分不同. 问题:如何提取每个文件中的相同属性的数值到同一个文件中? 输出示例: ...

  7. 关于多线程中GCD的使用

    GCD 分为异步和同步 异步: ```objc  dispatch_async (  参数1  , {      } 同步: dispatch_sync( 参数1   , {   } ``` ###参 ...

  8. 转 --maven系列之二 安装与配置

    http://blog.csdn.net/jiuqiyuliang/article/details/45390313 [项目管理和构建]——Maven下载.安装和配置(二) 标签: 工具开发maven ...

  9. hdu 4454 Stealing a Cake (三分)

    Stealing a Cake Time Limit: 5000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  10. [转载]php 处理上百万条的数据库如何提高处理查询速度

    转载自http://www.jb51.net/article/22063.htm ----------------------------------------------------------- ...