哎，不想吐槽自己了，表示已远远落后，从今天起开始恶补吧，来一个实例

<html>

  <head>

    <meta name="generator"

    content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />

    <title></title>

	<style>

		*{

			margin:0px;

			padding:0px;

		}

		.test{

			width:700px;

			height:200px;

			display:-moz-box;

			display:-webkit-box;

			display:box;

		}

		.test div{

			background:green;

			margin-right:20px;

		}

		 .test div:first-child{

			-moz-box-flex:2;

			-webkit-box-flex:2;

		}

		.test div:nth-child(2){

			-moz-box-flex:3;

			-webkit-box-flex:3;

		}

		.test div:nth-child(3){

			-moz-box-flex:3;

			-webkit-box-flex:3;

		}

	</style>

  </head>

  <body>

	<div class="test">

		<div></div>

		<div></div>

		<div></div>

	</div>

  </body>

</html>

哎，老了之display-box的更多相关文章

  1. display:box和display:inline-box的区别

    display:box我想大家很熟悉,那么display:inline-box呢,今天在项目中需要设置这样的属性box-align:center,那么就想到用 display:box;如果设置BOX, ...

  2. CSS3 display:flex和display:box有什么区别？

    **区别**,仅是各阶段草案命名.- W3C 2009年第1次草案:[display:box;](https://www.w3.org/TR/2009/WD-css3-flexbox-20090723 ...

  3. display:box；display:flex；弹性盒模型

    display:box:display:flex:弹性盒模型 非常适用于移动端.PC端高级浏览器,效果也很好. display: -webkit-box; display: -moz-box; dis ...

  4. display:box属性

    在移动端开发的时候,圣杯布局,弹性盒,是我们经常会用得到的,W3C很久以前就有一个display:box属性 flex是最新的,但是在实际的浏览器测试中,display: flex 不能完全替代dis ...

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

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

  6. 关于display: box 和 box-flex

    这两天做手机项目,使用到这个css3新属性.现在还不为所有浏览器支持,所以使用的时候要加上前缀.使用方法见下面: html代码: <div class="s-indLine" ...

  7. 被废了的display:box弹性盒模型

    这几天在研究弹性布局,看书中写的是display:box,结果在chrome浏览器中是正常的,想着移动端大部分浏览器也是webkit内核的应该也没啥问题,结果确实没问题,但仔细一看,高度呢?好吧,严重 ...

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

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

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

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

  10. CSS3盒模型display:box详解

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

随机推荐

  1. Java实现最小费用最大流问题

    1 问题描述 在最大流有多组解时,给每条边在附上一个单位费用的量,问在满足最大流时的最小费用是多少? 2 解决方案 下面代码所使用的测试数据如下图: package com.liuzhen.pract ...

  2. Linux 系统资源查看

    vmstat监控系统资源 vm [刷新延时 刷新次数],vmstat 1 3 dmesg查看开机时内核检测信息 dmesg | grep CPU free命令查看内存使用状态 查看cpu信息:cat ...

  3. 小师妹学JavaIO之:目录还是文件

    目录 简介 linux中的文件和目录 目录的基本操作 目录的进阶操作 目录的腰疼操作 总结 简介 目录和文件傻傻分不清楚,目录和文件的本质到底是什么?在java中怎么操纵目录,怎么遍历目录.本文F师兄 ...

  4. mybatis源码解析-日志适配器

    1.为什么需要使用适配器?    集成第三方日志组件,屏蔽日志组件底层实现,统一提供写日志的接口. 2.什么是适配器模式 定义:将一个类的接口变成客户端所期待的另一种接口,从而使原本因接口不匹配而无法 ...

  5. 【微信H5】 Redirect_uri参数错误解决方法

    1 https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx14127af0bc9fd367&redirect_uri=http ...

  6. php5.5下安装pdflib的步骤

    php5.5下安装pdflib的步骤 1. 下载pdflib 下载地址为:http://www.pdflib.com/download/pdflib-family/pdflib/ 然后选择对应的版本, ...

  7. OKR-Periods of Words【KMP最小前后缀】

    OKR-Periods of Words 传送门:链接    来源:UPC 8180 题目描述 串是有限个小写字符的序列,特别的,一个空序列也可以是一个串.一个串P是串A的前缀,当且仅当存在串B,使得 ...

  8. Proving Equivalences(缩点+有环图变强连通分量)【tarjian算法】

    Proving Equivalences 题目链接(点击) 参考博客(点击) Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 32768 ...

  9. turtle 画国旗

    代码实现: import turtle import time import os def draw_square(org_x, org_y, x, y): turtle.setpos(org_x, ...

  10. <用户输入url按下回车，一直到用户看到界面，这期间经历了什么>

    用户输入url按下回车,一直到用户看到界面,这期间都经历什么? 一.  DNS解析缓存: 1. 找到浏览器缓存解析域名: 2. 找到和 DNS 缓存 ; 3. 找到路由器 DNS 缓存: 4. 找到查 ...