HTML/CSS/JS笔记-属性和方法以及特性的记录

整日游离于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;