【CSS】样式记录

1、element.style.border加边框时会改变原有div等元素的size

     可以改成设置轮廓，即改为element.style.outline="2px dotted"，清除时设置为"2px dotted transparent"

2、获取页面元素的坐标

　　var rect = element.getBoundingClientRect();
　　console.log(rect.top, rect.right, rect.bottom, rect.left);

3、res = element.getElementsByClassName('className')的时候注意，返回的是数组，如果搜索结果只有一个元素需要通过res[0]来获取。

4、鼠标事件穿透上层div，及上层div不响应鼠标点击，下层响应

页面上如果有一个div盖住了下面的div或者链接元素后，那么下层元素事件将不会被触发。
但是现在Firefox3.6+/Safari4+/Chrome支持一个称为pointer-events的css属性。
使用该属性可以决定是否能穿透绝对定位元素去触发下面元素的某些行为：
pointer-events:none;

5、div居中

　　<div style="margin-left:auto;margin-right:auto;50px;height:30px; "></div>

     span居中　

　　text-align: center;display: block;

　　其他居中问题参见：http://howtocenterincss.com/#contentType=div&content.width=50px&content.height=30px&horizontal=center&vertical=top

6、VUE中style增加了scope不起作用

　　例如我想修改滚动条样式由overflow: auto;改为overflow: overlay;发现不起作用。

　　不加scope，会影响其他组件；加了，反而样式不起作用。

　　解决方法：其他的样式还是放在<style scope>中。新增一个不带scope的<style>，同时为了不影响其他组件，给目标元素增加一个id。这样就解决了。

7、button等行内块级元素在div里居中

　　https://blog.csdn.net/xiasohuai/article/details/80613404

8、鼠标点击事件穿透上层元素

　　即A元素在B元素的上层，当鼠标点击在A元素上时，B直接响应点击事件（如同A不存在）

　　方法为：在A的CSS中增加一个样式 pointer-events: none;  

9、光标的形状cursor.style

　　http://www.mamicode.com/info-detail-2768660.html
10、