整日游离于C++/C#/JS和SQL之间，整个人都快魔怔了.
个人备查笔记/这篇笔记记录一些CSS/HTML/JS特性/浏览器适配/浏览器功能项启用关闭等
方便复制粘贴
-----------------------------------------------------------------------------
Q.vertical-align：
元素关于y轴的对齐方式, 但只能用于行内元素(inline,inline-block,table-cell)
比较值是以父元素的基准线(line-heihgt)为基准
例如,middle :
近似垂直居中属性,根据父级元素的line-heihgt来判别
例子：
https://codepen.io/linqingwudiv1/pen/vYEgKZQ
Q.应该搞明白的JS语言特性：
- console.log( 0/0 == NaN ); => true;
- console.log( 0.111 + 0.1 == 0.211 ); => false;
- console.log( undefined === null ); => false;
- console.log( undefined == null); => true;
- function (){}和()=>{}的区别：
this指向不同
function(){}的this指向调用函数的对象
()=>{}的this指向定义匿名函数的对象或函数的指向的this.
Q.CSS元素/DIV事件多层穿透：
Point-Event属性
Q.CSS用户不可选择：
user-select属性
Q.HTML不允许缓存：
<meta http-equiv="Cache-Control" content="no-cache">
Q.禁止右键菜单：
<body contextmenu="function (ev){return false;}"></body>
只禁用单个元素区域的话范围的话window改成htmlelement
window.oncontextmenu = function(event) { event.preventDefault(); event.stopPropagation(); return false; };
Q.CSS撑满可用空间（Width/Height等属性）：
-webkit-fill-available;
height:-webkit-fill-available;
Q.CSS scoped穿透上层：
<style lang="stylus" scoped> >>>.el-form-item__content //some thing
</style>
Q.Chrome/electron滚动条样式:
记一个样式..方便copy（stylus）
::-webkit-scrollbar-track-piece
box-shadow : inset 0 0 3px rgba(0, 0, 0, 0.1);
border-radius: 5px;
background : #ededed;
::-webkit-scrollbar
width : 10px;
min-height: 30px;
::-webkit-scrollbar-thumb
border-radius: 5px;
box-shadow : inset 0 0 3px rgba(0, 0, 0, 0.1);
background : #737373;
::-webkit-scrollbar-thumb:hover
-webkit-border-radius:10px;
background : #737373;
Q.Vue cli 3.0中使用 stylus全局变量:
npm
npm install stylus
npm install stylus-loader
全局依赖vue.config.js:
module.exports = { css: { loaderOptions: { stylus: { import: "~@/assets/css/GVariable.styl" } } } }
GVariable.styl是我常用的配色变量...
如
$qing-primary = #409EFF;
$qing-success = #67C23A;
$qing-danger = #F56C6C;
$qing-warning =#E6A23C;
$qing-info = #909399;
// 主边框色
$qing-border-1 = #DCDFE6;
// 二级边色
$qing-border-2 = #E4E7ED;
// 三级边色
$qing-border-3 = #EBEEF5;
// 四级边色·
$qing-border-4 = #F2F6FC;