最近在做前端的可视化大屏展示，记录一下相关的知识点。
1、布局
display属性
根据CSS规范的规定，每一个网页元素都有一个display属性，用于确定该元素的类型，每一个元素都有默认的display属性值，比如div元素，它的默认display属性值为“block”，称为块元素，而span元素的默认display属性值为“inline”，称为“行内”元素。
display常用属性值
1. none：隐藏对象
1.1 不用none前：
1.2 用了none的时候：
2. inline： 指定对象为行内元素
3. block： 指定对象为块元素
4. inline-block：指定对象为行内块元素
5. table-cell：指定对象为表格单元格
6. flex：弹性盒
6.1 未使用flex前：
6.2 使用flex后：
7. inline转块级元素
这次我用到的是display：flex，弹性盒，它是自适应布局最好用的，它决定一个盒子在其它盒子中的分布，以及如何处理可用的空间。使用该模型，可以轻松的创建"自适应"浏览器窗口的流动布局。
实际布局案
flex-direction: row;纵向为 flex-direction: column;
而如果要居中布局：在横向中用justify-content: center属性，也就是下方的案例，其中 flex-direction: row;可不用写出，因为默认就是横向布局。
<div style="display:flex; flex-direction: row;justify-content:center">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</div>
而纵向布局的居中是 align-items:center;其中须有 flex-direction: column; ，如果是flex-direction: row;就不生效了。
<div style="display:flex; flex-direction: column;align-items:center">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</div>
当你在父盒子中使用 flex-direction: column; 让子元素 竖着排列时 这个时候想水平居中就是用 这个 align-items:center; 。垂直（纵向）居中就是用justify-content: center; 当父盒子 flex-direction: row;（默认的）则反之。
使用这两个属性还有一个前提那就是父盒子的宽度和高度得有，这个时候或许有人会有疑惑，我以前没指定过为什么也能用，原因是子盒子指定了把父盒子的给撑开了，但是如果是垂直方向上可能就会有问题，比如你想让一个盒子在一个页面的正中间，这个时候你就需要把父盒子的高度设为100%才可以。
二、调整背景透明度
在样式中使用rgba()函数，例如：
rgba(0,63,122,0.75)
函数中的前三位是颜色值，最后一位是透明度，取值范围0-1,0是完全透明，1是不透明。
三、div重叠在一起综合布局，但要能点击底层的元素，地图案例界面最常用到
这时需要用到z-index属性，pointer-events属性，position属性这个三个CSS属性。
1、z-index 属性指定一个元素的堆叠顺序。这个属性的作用是可以为堆叠在一起的元素上下层排序。如下图所示：
z-index : auto | number
auto:默认值。
number: 无单位的整数值，可为负数 。
z-index值较大的元素将叠加在z-index值较小的元素之上。对于未指定此属性的定位对象，z-index 值为正数的对象会在其之上，而 z-index 值为负数的对象在其之下。
注意：z-index 进行定位元素(position:absolute, position:relative, or position:fixed)。
二、position定位：relative、absolute定位一直是WEB标准应用中的难点，如果理不清楚定位那么可能应实现的效果实现不了，实现了的效果可能会走样。如果理清了定位的原理，那定位会让网页实现的更加完美。定位的定义：在CSS中关于定位的内容是：
position：relative、absolute、static、fixed、
static(静态)没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。
relative(相对定位)对象不可层叠、不脱离文档流，参考自身静态位置通过top、bottom、left、right定位，并且可以通过z-index进行层次分级。
absolute(绝对定位)脱离文档流，通过top、bottom、left、right定位。选取其最近一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。
fixed（固定定位）这里所固定的参照对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。
三、pointer-events属性
我们在HTML开发时可能会遇到这样的情况：
页⾯上有⼀些元素使⽤绝对定位布局，这些元素可能会遮盖住它们位置下⽅的某个元素的部分或者全部。默认情况下，下⽅元素被遮挡的部分是不会响应⿏标事件的。但有时我们可能需要被遮盖住的元素仍然能够处理⿏标事件。⽐如：我们在⼀个地图组件上覆盖了⼀个显⽰信息的元素，但⼜不想让这个信息⾯板影响下⽅地图的拖动等操作。那么我们可以使⽤⼀个叫pointer-events的css属性来实现。
pointer-events属性简单理解就是让底层的元素的点击事件也能点击，被触发。最后看一个融合了所有的综合案例吧：
最终效果
参考文献：
3、CSS里面position：relative与position：absolute 区别 - 百度文库 (baidu.com)
4、pointer-event属性详解_俺是老王的博客
5、z-index_百度百科 (baidu.com)
