1.z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

注释：元素可拥有负的 z-index 属性值。

注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！

JavaScript 语法： object.style.zIndex="1"

z轴，距离用户远近，是基于屏幕的垂直距离属性。

使用这个属性可以实现页面元素的堆叠顺序。好用

2.display属性取值有：block,inline-block;table;inline-table,table-row,table-cell,table-caption;list-item等，这都是基本的用法

如:在jQuery中可以：

$("#div").css("display":"block");来显示隐藏想要的DOC对象；

1、block与inline-block属性其实都是块级元素，不过inline-block一个是行内的块级元素；

2、table,table-row,table-cell,table-caption,list-item;

相信大部分的很少去了解这些属性值，其实这些都是对应的在表格table中的对应项跟ul标签中的li项，其中display:table其实就是一个table表格，而table-row与table-cell分别对应table表格中的tr跟td标签，list-item就是li标签；其实这些属性在移动前端开发中用的也挺多的，而且对应的也符合table标签的一些属性,如在td中vertical-align用div display:table-cell同样可以实现，这样可以帮我们解决一些较前卫的浏览器中减少很多不必要的困扰。

display:-webkit-box

Flexbox为 display 属性赋予了一个新的值（即 box 值）, flexbox的属性有很多，记录一些比较常用的属性：

用于父元素的样式：

display:box; 该属性会将此元素及其直系子代加入弹性框模型中。（Flexbox 模型只适用于直系子代）
box-orient: horizontal | vertical | inherit;该属性定义父元素的子元素是如何排列的。
box-pack: start | end | center | justify; 设置沿 box-orient 轴的父元素中子元素的排列方式。因此，如果 box-orient 是水平方向，则父元素的子元素是水平的排列方式，反之亦然。（表示父容器里面子容器的水平对齐方式--垂直排列时--定宽）
box-align: start | end | center | baseline | stretch; 基本上而言是 box-pack 的同级属性。设置框的子代在框中的排列方式。如果方向是水平的，该属性就会决定垂直排列，反之亦然。（表示父容器里面子容器的垂直对齐方式--水平排列时--定高）

用于子元素的样式：

box－flex: 0 | 任意数字; 该属性让子容器针对父容器的宽度按一定规则进行划分。

父元素：

display: -webkit-box;
-webkit-box-orient: horizontal;/* 默认的排列方式是水平的*/

子元素：

child1：-webkit-box-flex: 1;/*子元素按照比例进行水平排列*/

child2：-webkit-box-flex: 2;

child3：-webkit-box-flex: 3;

这样父元素的3个子元素会按照1:2:3的比例在父元素的宽度下进行水平排列。假设其中一个没有设置box-flex属性，那么剩下2个子元素在父元素宽度减去未设置的子元素的宽度下进行比例水平排列。

box，box-flex

前者是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:flex；/*弹性布局*/，用法

一、页面行排列布局