display:box属性
- 在移动端开发的时候,圣杯布局,弹性盒,是我们经常会用得到的,W3C很久以前就有一个display:box属性
- flex是最新的,但是在实际的浏览器测试中,display: flex 不能完全替代display: -webkit-box
- display: box 使用可以参考http://www.html5rocks.com/en/tutorials/flexbox/quick/
- display: flex 使用可以参考https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- Android UC浏览器只支持display: box语法。而iOS UC浏览器则支持两种方式
- 需要注意的是如果要使用line-clamp时需要用display:box
- display:box
- 父元素设置该属性后,作用与display:flex类似,子元素可在一行显示,且实现自适应。
- box-orient:horizontal/vertical
- 父元素设置该属性后,作用与flex-direction: column相似。使子元素排列方向发生变化。
- horizontal 水平排列,子代总width=父级width。若父级固定宽度,则子代设置的width无效,子代会撑满父级宽度。
- vertical 垂直排列,子代总height=父级height。若父级固定高度,则子代设置的height无效,子代会撑满父级高度。
- box-direction:normal/reverse
- 在父级上设置该属性,作用使改变子元素的排列顺序,
- normal 默认值,子代按html顺序排列 1,2,3,4
- reverse 反序,所有元素相反顺序来 ,4,3,2,1
- box-align:start/end/center/stretch
- 在父级设置,子代的垂直对齐方式。
- start 垂直顶部对齐
- end 垂直底部对齐
- center 垂直居中对齐
- stretch 拉伸子代的高度,与父级设置的高度一致。子代height无效。
- box-pack:start/end/center
- 在父级设置,子代的水平对齐方式。
- start 水平左对齐
- end 水平右对齐
- center 水平居中对齐
- box-flex: 1
- 作用与flex: 1;相同。若子元素设置固定宽高,则子元素按照该子元素的宽和高,若没有设置该属性的子元素会占满具有display:box属性父元素中剩余的所有的空间。
- 设置为1则为所有剩余空间,可以为负数。
- 若子元素有margin值,则按余下(父级宽度-子代固定总宽度-总margin值)宽度占number份
- 大家不难发现display:box属性与display:flex属性几乎一模一样,就下来就会有人问了,这两个一样的东西到底有什么区别呢?
- - W3C 2009年第1次草案:[display:box;](https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/)
- - W3C 2011年第2次草案:[display:flexbox | inline-flexbox;](https://www.w3.org/TR/2011/WD-css3-flexbox-20110322/)
- - W3C 2012年第5次草案及以后的候选推荐标准:[display:flex | inline-flex;](https://www.w3.org/TR/2012/WD-css3-flexbox-20120612/)
- 前者是flex 2012年的语法,也将是以后标准的语法,大部分浏览器已经实现了无前缀版本。
- 后者是2009年的语法,已经过时,是需要加上对应前缀的。
- 所以兼容性的代码,大致如下
- display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
- display: -moz-box; /* Firefox 17- */
- display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
- display: -moz-flex; /* Firefox 18+ */
- display: -ms-flexbox; /* IE 10 */
- display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
- 如果要说区别,display:box; 是老规范,要兼顾古董机子就加上它。
- flexbox flex 是新规范,老机子不支持的
display:box属性的更多相关文章
- css3 display:box 属性
先看例子: .ub{ display: -webkit-box !important; display: box !important; position:relative;}.ub-f1{ posi ...
- css display:box 新属性
一.display:box; 在元素上设置该属性,可使其子代排列在同一水平上,类似display:inline-block;. 二.可在其子代设置如下属性 前提:使用如下属性,必须在父代设置displ ...
- CSS3盒模型display:box;box-flex:3;
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- display:box和display:inline-box的区别
display:box我想大家很熟悉,那么display:inline-box呢,今天在项目中需要设置这样的属性box-align:center,那么就想到用 display:box;如果设置BOX, ...
- 关于display: box 和 box-flex
这两天做手机项目,使用到这个css3新属性.现在还不为所有浏览器支持,所以使用的时候要加上前缀.使用方法见下面: html代码: <div class="s-indLine" ...
- 被废了的display:box弹性盒模型
这几天在研究弹性布局,看书中写的是display:box,结果在chrome浏览器中是正常的,想着移动端大部分浏览器也是webkit内核的应该也没啥问题,结果确实没问题,但仔细一看,高度呢?好吧,严重 ...
- CSS3盒模型display初探(display:box/display:flex)
可以实现水平等分切割等.日后在研究,做个记录. 首先要声明:display:box,像谷歌浏览器要加前缀识别码:display:-webkit-box; 然后才开始使用其属性,同时也是要带上前缀识别码 ...
- CSS3.0盒模型display:box;的使用
CSS3.0盒模型display:-webkit-box;的使用 box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂 ...
- 尖刀出鞘的display常用属性及css盒模型深入研究
一:diplay:inline-block 含义:指元素创建了一个行级的块级元素,该元素内部(内容)被格式化成一个块级元素,同时元素本身则被格式化成一个行内元素.更简单的说就是说inline-bloc ...
随机推荐
- linux---(6/27)tr命令和sed命令详解
Tr命令: tr是简单的单个“字符”处理工具,而sed是功能非常强大的“字符串”处理工具. 用于查询,字符串2用于处理各种转换.tr刚执行时,字符串1中的字符被映射到字符串2中的字符,然后转换操作开始 ...
- poj2092
/*水题,算每个号码处出现的次数*/ #include<stdio.h> #include<string.h> #include<algorithm> using ...
- NOIP 能量项链
描述 在Mars星球上,每个Mars人都随身佩带着一串能量项链.在项链上有N颗能量珠.能量珠是一颗有头标记与尾标记的珠子,这些标记对应着某个正整数.并且,对于相邻的两颗珠子,前一颗珠子的尾标记一定等于 ...
- COS-6主存管理
操作系统是用户和计算机的接口,同时也是计算机硬件和其他软件的接口.操作系统的功能包括管理计算机系统的硬件.软件及数据资源,控制程序运行,改善人机界面,为其它应用软件提供支持,让计算机系统所有资源最大限 ...
- CodeChef FORESTGA 二分
Forest Gathering Problem code: FORESTGA Tweet ALL SUBMISSIONS All submissions for this problem ...
- ASCII_02_扩展
1.来自“http://www.360doc.com/content/10/1007/22/3775569_59187136.shtml” 2. 3. 4. 5.
- Java多线程 - 线程同步
多线程操作同一个对象时,容易引发线程安全问题.为了解决线程安全问题,Java多线程引入了同步监视器. 同步代码块 同步代码块语法格式如下: synchronized(obj){ //此处的代码即为同步 ...
- Linux 设备驱动之 UIO 机制
一个设备驱动的主要任务有两个: 1. 存取设备的内存 2. 处理设备产生的中断 对于第一个任务.UIO 核心实现了mmap()能够处理物理内存(physical memory),逻辑内存(logica ...
- 进入root权限操作
su:authentication failure的解决办法 $ su - rootPassword:su: Authentication failureSorry. 这时候输入 $ sudo pas ...
- Apache Tomcat 服务因 0 (0x0) 服务性错误而停止
操作系统:Windows Server 2003 SP2/win7 64JDK 版本为 6.0 update 6 安装在 D:\Java 目录下Tomcat 版本为 6.0.16 安装 D:\Tomc ...