css display:box 新属性

一、display:box;

　　在元素上设置该属性，可使其子代排列在同一水平上，类似display:inline-block;。

二、可在其子代设置如下属性

　　前提：使用如下属性，必须在父代设置display:box;

　　1.box-flex:number;

　　　　1）占父级元素宽度的number份

　　　　2）若子元素设置固定宽度，则该子元素应用固定宽度，其他未设置固定宽度的字元素将余下的父级宽度（父级-已设置固定宽度的子代元素的总宽度按　number占份数

　　　　3）若子元素有margin值，则按余下（父级宽度-子代固定总宽度-总margin值）宽度占number份

　　2.box-orient:horizontal/vertical

　　　　在父级上设置该属性，则子代按水平排列或竖直排列。

　　　　注：所有主流浏览器不支持该属性，必须加上前缀。

　　　　1）horizontal 水平排列，子代总width=父级width。若父级固定宽度，则子代设置的width无效，子代会撑满父级宽度。

　　　　2）vertical 垂直排列，子代总height=父级height。若父级固定高度，则子代设置的height无效，子代会撑满父级高度。

　　3.box-direction:normal/reverse

　　　　在父级上设置该属性，确认子代的排列顺序。

　　　　1）normal 默认值，子代按html顺序排列

　　　　2）reverse 反序

　　4.box-align:start/end/center/stretch

　　　　在父级设置，子代的垂直对齐方式。

　　　　1）start 垂直顶部对齐

　　　　2）end 垂直底部对齐

　　　　3）center 垂直居中对齐

　　　　4）stretch 拉伸子代的高度，与父级设置的高度一致。子代height无效。

　　5.box-pack:start/end/center

　　　　在父级设置，子代的水平对齐方式。

　　　　1）start 水平左对齐

　　　　2）end 水平右对齐

　　　　3）center 水平居中对齐

转载于:https://www.cnblogs.com/whiteMu/p/5378747.html

css display:box 新属性相关推荐

DIV CSS display (block none inline)属性的用法教程
在一般的CSS布局制作时候,我们常常会用到display对应值有block.none.inline这三个值.下面我们来分别来认识和学习什么时候用什么值.这里通过CSS display知识加实例.图演示 ...
display:box和flex的区别
没区别,仅是各阶段草案命名. flex是最新的,但是在实际的浏览器测试中,display: flex 不能完全替代display: -webkit-box display: box 使用可以参考htt ...
html表格自动分列,[css]display: table-cell，用div做分列布局
table-cell我们却能用得到,而且是用它来干一件很重要的事情--多列布局. 多列布局在css中有多重要就不用我说了吧,传统模式下大家都使用float来解决这一问题,但是float写出来的东西代码 ...
html+css:display:flex属性
博客 </a></li><li class="" title="高价值源码课程分享"><a data-report-c ...
php display block,CSS display (block inline none )常见属性和用法教程
display 属性规定元素应该生成的框的类型. 这个属性用于定义建立布局时元素生成的显示框类型.对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定 ...
CSS display 属性的重叠覆盖
原文详解:CSS display 属性的重叠覆盖原文链接: http://licocom.com/archives/1168 CSS display属性,一般为隐藏某个标签的显示, 并列N个div或 ...
Vue3新属性 — css中使用v-bind（v-bind in css）
Vue3新属性:CSS 中的 v-bind() 写在前面: 本文主要介绍Vue3中的新增的v-bind()的常用使用方式,主要包括在css,less,scss中的使用,可以参考官方文档查看:Vue3官 ...
CSS display:table属性用法解析
本节和大家重点讨论一下CSS display:table的使用,当IE8发布时,它将支持很多新的CSS display属性值,包括与表格相关的属性值,CSS表格能够解决所有那些我们在使用绝对定位和浮动 ...
[css] 举例说明background-repeat的新属性值：round和space的作用是什么？
[css] 第举例说明background-repeat的新属性值:round和space的作用是什么? space 背景图不会产生缩放,会被裁切 round 缩放背景图至容器大小(非等比例缩放) ...

css display:box 新属性

css display:box 新属性相关推荐

最新文章

热门文章