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

<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实现第九届蓝桥杯整理玩具

    整理玩具 小明有一套玩具,一共包含NxM个部件.这些部件摆放在一个包含NxM个小格子的玩具盒中,每个小格子中恰好摆放一个部件. 每一个部件上标记有一个0~9的整数,有可能有多个部件标记相同的整数. 小 ...

  2. CSS清除浮动&内容居中&文字溢出

    学习! 1.CSS清除浮动的方法 (1)添加标签清除浮动: 在浮动元素结尾处,并列的添加标签<div style="clear:both;"></div>. ...

  3. java正则匹配 指定内容以外的 内容

    今天,遇到一个需要 匹配出 指定内容以外的 内容的需求. 乍一看,需求貌视很简单啊,直接上 非贪婪模式的 双向零宽断言(有的资料上也叫 预搜索.预查.环视lookaround): 比如,我要匹配 串内 ...

  4. 数据结构与算法-python描述-双向链表

    # coding:utf-8 # 双向链表的相关操作: # is_empty() 链表是否为空 # length() 链表长度 # travel() 遍历链表 # add(item) 链表头部添加 # ...

  5. Spark Streaming，Flink，Storm，Kafka Streams，Samza：如何选择流处理框架

    根据最新的统计显示,仅在过去的两年中,当今世界上90%的数据都是在新产生的,每天创建2.5万亿字节的数据,并且随着新设备,传感器和技术的出现,数据增长速度可能会进一步加快. 从技术上讲,这意味着我们的 ...

  6. Centos7下源编译安装Postgresql 并设置开机自动启动postgresql.serivce 服务相关研究

    编写开机自动启动服务脚本: # cat >> /usr/lib/systemd/system/postgresql.service >> EOF [Unit] Descript ...

  7. [转] C++中的namespace

    点击阅读原文 namespace中文意思是命名空间或者叫名字空间,传统的C++只有一个全局的namespace,但是由于现在的程序的规模越来越大,程序的分工越来越细,全局作用域变得越来越拥挤,每个人都 ...

  8. @hdu - 6607@ Easy Math Problem

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 求: \[\sum_{i=1}^{n}\sum_{j=1}^{n ...

  9. @atcoder - AGC026F@ Manju Game

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定一个含 N 个数的序列,Alice 与 Bob 在博弈.Al ...

  10. Linux中tomcat的部署

    红帽7如何配置tomcat 1.下载tomcat9.0和java-1.8 tomcat的下载地址: https://tomcat.apache.org/ java1.8是radhat7自带: [roo ...