iview无法绑定点击等事件

在使用iview过程中，我们会发现有时候在一些组件上监听click或其他事件时并没有按照我们预期的情况执行，这是因为被封装的组件在底层上可能并不是用一个可以绑定click事件的vue组件实现的，所以无法直接绑定click事件，这个时候我们可以用事件修饰符.native绑定原生事件。例如v-on:click.native，这样就可以绑定成功了。

span标签无法设置宽和高

为什么在给span标签设置了宽和高后无法生效？因为span标签是内联元素，没有固定的格式表现，在浏览器标准中span标签的width与height属性会被忽略，故无法设置宽和高。

我们可以给span标签设置display属性为inline-block，使span标签成为行内块级元素，这样就可以改变span标签的宽和高了。

javascript判断类型

typeof运算符

typeof "a"; // "string"
typeof a; // "undefined" 未声明变量
typeof 1; // "number"
typeof function () {}; // "function"
typeof (() => {}) // "function"
typeof (function() {})(); // "undefined"
typeof (() => {})(); // "undefined"
typeof undefined; // "undefined"
typeof null; // "object"
typeof []; // "object"
typeof {}; // "object"

通过上面的例子可以看出typeof运算符可以判断出除了null、array外的基本类型，IIFE则以return的值为准，无return语句就是默认return了undefined

instanceof运算符

instanceof运算符用于测试构造函数的prototype属性是否出现在对象的原型链中的任何位置，这样就可以区分Array与Object

const arr = [];
arr instanceof Array; // true

constructor属性

还有一种方法就是利用对象的constructor属性，也可以区分Array和Object

const arr = [];
arr.constructor === Array; // true

ES6中新增了Array.isArray()方法来判断是否为数组

const arr = [];
Array.isArray(arr); // true

css隐藏浏览器滚动条

Chrome

body::-webkit-scrollbar {
    display: none;
}

IE/Edge

body {
    -ms-overflow-style: none;
}

子元素 width: 100%后再设置 margin 或 padding 就会溢出父元素

<div
  style="
    width: 200px;
    height: 50px;
    background: green;
    "
>
  <div
    style="
        width: 100%;
        height: 100%;
        background: pink;
        margin: 10px;
        "
  ></div>
</div>

如何解决？

一、父元素设置 padding，取消子元素上的 margin 与 padding 设置

<div
  style="
    width: 200px;
    height: 50px;
    background: green;
    padding: 10px;
    "
>
  <div
    style="
        width: 100%;
        height: 100%;
        background: pink;
        "
  ></div>
</div>

二、box-sizing: border-box

若子元素只有 padding 设置而没有 margin 设置，则可以在子元素上设置 box-sizing: border-box; 这样子元素的宽度 100%将包含内容宽度、padding 和边框宽度三者。

<div
  style="
    width: 200px;
    height: 50px;
    background: green;
    padding: 10px;
    "
>
  <div
    style="
        width: 100%;
        height: 100%;
        background: pink;
        padding: 10px;
        box-sizing: border-box;
        "
  ></div>
</div>

知识扩展：box-sizing 的两种取值

默认取值：content-box，元素占用宽度/高度 = width/height + padding + border + margin

border-box，元素占用宽度/高度 = width/height + margin，padding 与 border 包含在 width/height 中

使用iview菜单栏后，我们会发现菜单栏在刷新后会回到初始选中与打开状态，而在浏览器前进与后退后依然保持前进或后退前的选中与打开状态。如何让菜单栏跟随浏览器保持正确的选中与打开状态呢？

css实现四角边框

如何实现上图这种四角的边框？

<div class="main">
    <span>
    <span>
    <span>
    <span>
</div>

.main {
    position: relative;
}
.main span:nth-child(1) {
    /* 绝对定位 */
    position: absolute;
    /* 将span撑开 */
    padding: 6px 6.5px;
    /* 边框宽度，左上角只显示左边框和上边框 */
    border-width: 3px 0 0 3px;
    border-style: solid;
    border-color: #4ab2f8;
    /* 定位到左上角，并使边框离main有一定间距 */
    left: -5px;
    top: -5px;
}
.main span:nth-child(2) {
    /* 绝对定位 */
    position: absolute;
    /* 将span撑开 */
    padding: 6px 6.5px;
    /* 边框宽度，右上角只显示右边框和上边框 */
    border-width: 3px 3px 0 0;
    border-style: solid;
    border-color: #4ab2f8;
    /* 定位到右上角，并使边框离main有一定间距 */
    right: -5px;
    top: -5px;
}
.main span:nth-child(3) {
    /* 绝对定位 */
    position: absolute;
    /* 将span撑开 */
    padding: 6px 6.5px;
    /* 边框宽度，左下角只显示左边框和下边框 */
    border-width: 0 0 3px 3px;
    border-style: solid;
    border-color: #4ab2f8;
    /* 定位到左下角，并使边框离main有一定间距 */
    left: -5px;
    bottom: -5px;
}
.main span:nth-child(4) {
    /* 绝对定位 */
    position: absolute;
    /* 将span撑开 */
    padding: 6px 6.5px;
    /* 边框宽度，右下角只显示右边框和下边框 */
    border-width: 0 3px 3px 0;
    border-style: solid;
    border-color: #4ab2f8;
    /* 定位到右下角，并使边框离main有一定间距 */
    right: -5px;
    bottom: -5px;
}

参考链接
https://www.jb51.net/css/581071.html

文本超出宽度后不换行，隐藏后显示省略号

这是众所周知的三行代码

td {
    /* 文本不换行 */
    white-space: nowrap;
    /* 超出大小隐藏 */
    overflow: hidden;
    /* 文本超出显示省略号 */
    text-overflow: ellipsis;
}

表格百分比宽度时无效

但是当表格td宽度设为百分比时，这三行代码并没有生效，表格还是被撑开了。当表格宽度使用像素px时，这三行代码又可以生效，如何解决这个问题呢？

在表格table上加一个样式，table-layout: fixed就可以解决了。

table {
    table-layout: fixed;
}

table-layout设定为fixed将自动表格布局算法变为了固定表格布局算法，此时布局渲染更快，表格布局只与设定的宽度与间距有关，与内容无关。自动表格布局刚好相反。

参考链接
https://blog.csdn.net/Altaba/article/details/55805586

注意：应该尽量使用 css 优先级规则，慎用!important，这会扰乱 css 的优先级规则，造成无法定位 bug 的情况。尽量使用优先级规则来解决问题，不要在全站 css 上使用!important，不要在插件中使用!important，只在特定页面使用。

可以使用的情况：有全站 css 文件时，还使用了在 html 中写入的内联样式，这时可以使用!important 覆盖内联样式。

若要覆盖!important 规则，只要在其后再加一条!important 规则。

使用transform居中

绝对定位时尽量使用transform中的translate进行定位，而不是用margin为负值进行定位，因为margin为负值的定位是必须要知道自身的宽高的，而transform中的translate可以用-50%这样的百分比。

/* 父元素 */
.parent {
    position: relative;
}
/* 子元素 */
.child {
    position: absolute;
    /* 水平居中 */
    left: 50%;
    transform: translateX(-50%);
    /* 垂直居中 */
    top: 50%;
    transform: translateY(-50%);
    /* 可以合并写为 */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}