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

首先要声明：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. 毫米转换为PX

    公式:毫米数/25.4*你的电脑的DPI,win7 DPI  100%缩放为96,125%为120,150%为144,200%为192 象素数 / DPI = 英寸数 英寸数 * 25.4 = 毫米数

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

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

  3. 如何拿到半数面试公司Offer——我的Python求职之路

    从八月底开始找工作,短短的一星期多一些,面试了9家公司,拿到5份Offer,可能是因为我所面试的公司都是些创业性的公司吧,不过还是感触良多,因为学习Python的时间还很短,没想到还算比较容易的找到了 ...

  4. Enum引发的血案，反思

    前几天公司产品更新版本,更新完后不少用户反应原先保存的report的一些表在新版本打开后设置突然变了,本来选的第六个,现在打开变成第四个了.领导要求赶紧查出原因修改好,发紧急补丁.啊啊..发紧急补丁可 ...

  5. Jquery 页面首次加载方式

    $(document).ready(function(){ alert("111"); }); $(function(){ alert("222"); }); ...

  6. PHP 依赖注入，从此不再考虑加载顺序

    说这个话题之前先讲一个比较高端的思想--'依赖倒置原则' "依赖倒置是一种软件设计思想,在传统软件中,上层代码依赖于下层代码,当下层代码有所改动时,上层代码也要相应进行改动,因此维护成本较高 ...

  7. VBPR: Visual Bayesian Personalized Ranking from Implicit Feedback-AAAI2016 -20160422

    1.Information publication:AAAI2016 2.What 基于BPR模型的改进:在商品喜好偏序对的学习中,将商品图片的视觉信息加入进去,冷启动问题. 3.Dataset Am ...

  8. 《ImageNet Classification with Deep Convolutional Neural Networks》 剖析

    <ImageNet Classification with Deep Convolutional Neural Networks> 剖析 CNN 领域的经典之作, 作者训练了一个面向数量为 ...

  9. Android几种打开SQLite的方法

    第一种:用SQLiteOpenHelper辅助类 SQLiteOpenHelper类可以用来创建或打开数据库,两个关键的方法:onCreate(SQLiteDatabase db)和onUpgrade ...

  10. 9-cat 简明笔记

    连接或显示文件 cat [options] [file-list] 参数 file-list 是cat要处理的单个文件路径名或多个文件路径名列表,如果不指定任何参数或指定一个连字符(-)代替文件名,c ...