可以实现水平等分切割等。日后在研究，做个记录。

首先要声明：display:box，像谷歌浏览器要加前缀识别码：display:-webkit-box;

然后才开始使用其属性，同时也是要带上前缀识别码。

参考：

flex:

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

box:

http://www.warting.com/web/201402/68557.html

CSS3盒模型display初探（display:box/display:flex）的更多相关文章

  1. CSS3盒模型display:box详解

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

  2. CSS3盒模型温故

    CSS有一种基础设计模式叫盒模型,定义了Web页面中的元素是如何看做盒子来解析的.每一个盒子有不同的展示界面,下面就来介绍盒模型,主要有一下几种盒模型:inline.inline-block.bloc ...

  3. css3 盒模型记

    css3 盒模型 css假定每个元素都会生成一个或多个矩形框,这称为元素框.各元素框中心有一个内容区.这个内容区周围有可选的内边距,边框和外边距.这些项之所以被认为是可选的,原因是它们的宽度可以设置为 ...

  4. css3 盒模型

    0,前言 在css2.1 之前,我们都熟知的两种盒模型,一种是w3c标准盒模型,另外一种是怪异模式下的盒模型.在css3之前我们一直使用的是标准盒模型,但是标准盒模型的宽度总是需要小心的去使用,稍有不 ...

  5. 第94天：CSS3 盒模型详解

    CSS3盒模型详解 盒模型设定为border-box时 width = border + padding + content 盒模型设定为content-box时 width = content所谓定 ...

  6. 5.css3盒模型--margin/border/padding/content

    1.css3盒模型: ①margin外边距: Margin-top,Margin-right,Margin-bottom,Margin-left ②Border边框: Border-width Bor ...

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

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

  8. CSS3盒模型之box-sizing

    这些天在做一个手机端的页面,遇到了一些问题!首当其冲的就是盒子的溢出问题!大家都知道,手机的尺寸各异,各种型号的手机多得能闪瞎你们的眼睛,为了能 让这些设置更好的浏览我们的页面,我们已经不能固定页面的 ...

  9. CSS3盒模型——box-sizing

    box-sizing盒模型是CSS3的一个重要属性之一,常常被很多人给忽略了!CSS3出现之前box-sizing盒模型默认的宽高是指内容的宽高,css3之后可以用box-sizing来指定宽高. 目 ...

  10. CSS3 盒模型---css初始化会用到：box-sizing: border-box 盒子大小为 width 就是说 padding 和 border 是包含到width里面的

    CSS3中可以通过box-sizing 来指定盒模型,即可指定为content-box.border-box,这样我们计算盒子大小的方式就发生了改变. 可以分成两种情况: 1.box-sizing: ...

随机推荐

  1. 4815 江哥的dp题a

    4815 江哥的dp题a  时间限制: 1 s  空间限制: 256000 KB  题目等级 : 黄金 Gold 题解       题目描述 Description 给出一个长度为N的序列A(A1,A ...

  2. Cordova - 使用Cordova开发iOS应用实战4（调用摄像头拍照，并编辑）

    使用Cordova可以很方便的通过js代码来使用设备摄像头拍照,只需把camera插件添加进来即可. 一,添加camera插件 首先我们要在“终端”中进入工程所在的目录,然后运行如下命令: 1 cor ...

  3. 清北学堂2017NOIP冬令营入学测试P4749 F’s problem(f)

    时间: 1000ms / 空间: 655360KiB / Java类名: Main 背景 冬令营入学测试 描述 这个故事是关于小F的,它有一个怎么样的故事呢. 小F是一个田径爱好者,这天它们城市里正在 ...

  4. spring mvc4：异常处理

    前面学习过struts2的异常处理,今天来看下spring mvc4的异常处理: 一.Servlet配置文件修改 <bean id="exceptionResolver" c ...

  5. XmlSpy / XSD 以及 验证

    很早以前看过一句话:“XML就象空气”,在企业应用开发中XML是一个重要的数据交换标准.而XSD则可以用来校验XML的数据格式是否正确. 一个典型的XSD文件如下: <?xml version= ...

  6. 【深圳】OSC源创会第44期 开始报名

    时间:2016-03-19 14:00 地点: 深圳 南山区海德三道天利中央商务广场B座负一楼(意启创业) 费用:50元/人(现场交),女士.50积分的账号.开源软件作者.学生免费 (用于准备茶歇小食 ...

  7. 数据字典生成工具之旅(6)：NVelocity语法介绍及实例

    本章开始将会为大家讲解NVelocity的用法,并带领大家实现一个简单的代码生成器. NVelocity是一个基于.NET的模板引擎(template engine).它允许任何人仅仅简单的使用模板语 ...

  8. 整合Apache与PHP教程

    Apache下载安装完成后,PHP下载解压后,最重要的是如何将他们连接起来,就是整合到一起,让它们之间有联系,笔者根据自己多次配的经验和帮学弟学妹配时他们的理解程度整理了一个比较详细易理解的版本,下面 ...

  9. .Net相关

    Lucene 全文搜索 http://lucenenet.apache.org/ Memcached 分布式缓存 http://memcached.org/ selenium UI自动化测试 http ...

  10. redis的主从复制，读写分离，主从切换

    当数据量变得庞大的时候,读写分离还是很有必要的.同时避免一个redis服务宕机,导致应用宕机的情况,我们启用sentinel(哨兵)服务,实现主从切换的功能. redis提供了一个master,多个s ...