yangsirgo / good-good-study Goto Github PK

View Code? Open in Web Editor NEW

0.0 2.0 0.0 8 KB

水平垂直居中，这是一道面试必考题，^_^

HTML 100.00%

good-good-study's Introduction

css 水平居中

居中元素不定宽高： - absolute + transform - lineheight - writing-mode - css-table - flex

good-good-study's People

Watchers

good-good-study's Issues

关于document.write

1.代码的执行是严格按照html中script标签的位置执行的。
不废话，先看代码执行情况：

    <script src="./js/1.js"></script>
    <script src="./js/2.js"></script>
    <script>
        document.write('<!--');
    </script>
    <script src="./js/3.js"></script>
    <script src="./js/4.js"></script>

当页面出现多个script 时；浏览器会同时加载，但是执行这些js 是根据自上而下执行的，上面这个例子中虽然 4 个 js 文件都同时加载，但是由于中间被 script 插入了一行 html 注释，后面的 3、4 即便加载了也没有被执行。

那么如果插入的不是注释而是别的 js 文件呢？再看另一段代码

<script src="1.js"></script>
<script src="2.js"></script>
<script src="3.js"></script>
<script>
document.write('<script src="4.js"><\/script>');
</script>
<script src="5.js"></script>
<script src="6.js"></script>

js 文件 4 是最后加载的，因为代码执行是严格遵循顺序的，需要按顺序加载，加载完1，2,3之后加载4，虽然5,6文件已经加载完成，但是需要等到4加载执行完毕后才能执行5,6，所以4文件阻断的后续js的加载。

2.一波谷歌浏览器的优化。
从 55 版本以后，google浏览器对document.write 进行了优化，引用跨域脚本浏览器会提示警告。

在 2G 网络环境下，document.write 的这种使用姿势会被 Chrome 智能「优化」掉。
所以需要找替代方案。

3.替代方案
目前document.write 的使用是带条件的文件加载，比如：

<script>
if (!window.Promise) {
  document.write('<script src="polyfill/promise.js"><\/script>');
}
if (!window.fetch) {
  document.write('<script src="polyfill/fetch.js"><\/script>');
}
</script>

还有一些平台考虑按需引入js，比如：

<script>
if(/MicroMessenger/i.test(navigator.userAgent)) {
  document.write('<script src="jweixin-1.2.0.js"><\/script>');
}
if(/AlipayClient/i.test(navigator.userAgent)) {
  document.write('<script src="alipayjsapi.min.js"><\/script>');
}
</script>

对于以上场景，替代方案是:
1.服务器端按客户端的版本，动态生成script标签。通过userAgent 判断。
2.用多入口解决多平台问题。前端根据UA判断使用哪个版本。

新电脑上使用git：Permission denied (publickey). fatal: Could not read from remote repository.

新电脑上使用git 报错：

Permission denied (publickey).
fatal: Could not read from remote repository.

主要是因为未添加电脑公钥（publickey）到github上；
在本地输入用户名和邮箱:

git config --global user.name "yourname"
git config --global user.email "youremail"

生成SSH密钥

查看是否已经有了ssh密钥：cd ~/.ssh;
生成新的密钥：

ssh-keygen -t rsa -C “youremail”

进入ssh文件夹:

cd ~/.ssh
vim id_rsa.pub

将文件内的信息复制到github中即可

text-align:justify的使用

text-align:justify 针对文本在容器的两边对齐，
具体应用是在：form 表单的label 对齐。
text-align:justify 都无法让中文两端对齐

html { font-family: 'Microsoft YaHei'; }
这样设置，页面在所有的操作系统下显示微软雅黑，如果苹果本更漂亮的默认字体就用不了了。
有个新的需求是：在非window系统不要使用微软雅黑，而是使用其系统字体。
一种使用非标准属性-apple-system，使用如下：
html { font-family: -apple-system, BlinkMacSystemFont, 'Microsoft YaHei'; } // 苹果使用系统默认字体，非苹果是微软雅黑。
这个是非标准属性，后面可能会被取消。
使用font的关键字，这个是标准属性。
html { font: menu; } body { font-size: 16px; }
这个关键字是让网页的字体跟着系统走。ui 可能会不太开心。

css实现多行文本超出省略号处理

第一种方式是使用 -webkit-line-clamp 实现
代码：

div {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

demo地址
-webkit-line-clamp 只有webkit内核浏览器支持。

第二种方式是 float 特性实现多行文本截断（真牛逼）
demo地址
 具体解释详见

CSS-三列布局兼容IE8+

段代码并非那么“正统”，而且圣杯布局因兼容性考虑需要给body设置最小宽度min-width

三列布局
 圣杯布局的解释
如果加 left，right，middle 加上间距的话，需要调整margin：left 的值，父容器调整margin：20px的值。

vue版三列布局(中间有20的间隔)：

<template>
  <div class="three-column" ref="page">
    <div id="center" class="column">
      <div class="box">
        <div class="top">
          中间top
        </div>
        <div class="bottom">
          中间bottom
        </div>
      </div>
    </div>
    <div id="left" class="column" ref="left">
      <div class="box">
        我是left
      </div>
    </div>
    <div id="right" class="column" ref="right">
      <div class="box">
        我是right
      </div>
    </div>
  </div>
</template>
<style lang="scss">
  $leftWidth:287px;
  $rightWidth:305px;
  .three-column{
    min-width: 1024px;
    margin: 20px;
    padding-left: $leftWidth;
    padding-right: $rightWidth;
    .column{
      float: left;
      height: 100%;
      padding: 0 10px;
      .box{
        height: 100%;
        box-sizing: border-box;
        border-radius: 4px;
        text-align: center;
        border: 1px solid blue;
        .top{
          padding: 10px;
          border-bottom: 1px solid blue;
        }
        .bottom{
          padding: 10px;
        }
      }
    }
    #left{
      width: $leftWidth;
      margin-left: -100%;
      position: relative;
      right: $leftWidth;
      padding-left: 0;
    }
    #center{
      width: 100%;
    }
    #right{
      margin-right:-$rightWidth;
      width: $rightWidth;
      padding-right: 0;
    }
  }
</style>

设置relative的元素可以使用位移属性（top right bottom left以前也知道但是没怎么用不熟练）；margin和位移属性可以同时/叠加使用；通过容器设置float以及子元素设置absolute使得容器高度为0（未设置固定高度，默认为auto），可以让容器后面的元素“上移”到子元素同行而不会被“往下推”。
以下布局不建议在项目里使用，如果内容超出左侧列，右侧列的高度，出现滚动条，样式就会乱掉。
三列布局

margin与一栏定宽的两栏自适应布局实例

右侧定宽左侧自适应布局
缺点是 html 中的 dom 结构与在页面中呈现正好相反，会有些疑惑。
右侧顶框左侧自适应（dom结构一致布局）

css实现scrollTo功能（点击切换图片功能）

demo地址

页面加载时，出现滚动条，造成页面晃动解决方法

比较简单的做法是设置如下 CSS：

html { overflow-y: scroll; }

如果是 404 页面的话也会有滚动条，用户的体验并不好，所以有了下面的方案：

html { overflow-y: scroll; /* for IE8 */ } :root { overflow-y: auto; overflow-x: hidden; } :root body { position: absolute; } body { width: 100vw; overflow: hidden; }
基本上药到病除，而且后遗症非常少，大家不妨试试！

text-indent与内联元素缩进

text-indent 仅对第一行内联盒子内容有效。
隐藏SEO 关键字

vertical-align 与 table-cell

vertical-align起作用是display计算值为inline，inline-block，inline-table或者table-cell的元素上，td 单元格都是支持的，但是其他块级元素不支持此属性。

对于table-cell 元素而言，vertical-align起作用的是 table-cell 元素自身，请看 demo地址
就效果而言，table-cell元素设置 vertical-align 垂直对齐的是子元素，但是其作用的并不是子元素，而是自身.

配置webstorm的缩进

webstorm 的缩进有两块，js 和 html
ctrl + alt +s 调出设置模块，找到codeStyle 下的 javascript 和 html 部分设置成 2 或者 4.

webstorm 设置console 和 debugger快捷键

file--seting--Editor--live Templates,找到右边的JavaScript，点击右边的绿色“+”号，即可自己设置相关的快捷单词：

1.插入方式：看到里面的$PARAN$了吗？那个是光标所在位置！

visibility:hidden与display：none在显示隐藏中的区别

visibility:hidden 有继承性，父元素设置隐藏，子元素也可以显示的，display：none没有这个特性的。

基于visibility:hidden 可以与过度元素 transition 配合使用，预防hover是闪烁。

dom树转化成tree并过滤掉特殊节点

html结构：

<span  axplugins='combiele'> 
    <span class='ctrl-value'>
        组合元素的文本
        <span  axplugins='text'>
            <span class='ctrl-value'>内部的ctrl-value 节点不做提取</span> 
        </span> 
        <span class='_textnode_'>自由文本节点</span>
    </span> 
</span>

最终需求结果是 axplugins 元素和自由文本的树形结构。
js代码：


/**
 * 遍历dom 节点 汇总成树形结构
 * @param el  el Dom节点元素
 */
function walkDom(el){
    var c = el.firstChild;
    var retObj = {};
    var array = [];
    while(c !== null){//这里只是返回了元素节点，没有节点就是个空数组
        if(c.nodeType == 1){
            var walkObj = walkDom(c);
            array.push(walkObj);
        }
        c = c.nextSibling;
    }
    if (el.getAttribute("attrs")) {
        var attrsObj = JSON.parse(el.getAttribute("attrs"));
        var options = attrsObj.options || JSON.stringify([]);
        retObj.options = JSON.parse(options);
    }
    retObj.text = el.getAttribute("title");
    retObj.eleType = el.getAttribute('axplugins');//元素类型
    if (el.className === '_textnode_') {
        retObj.eleType = 'textnode';
        retObj.text = $(el).text();
    }
    retObj.name = retObj.text + "(" +  getEleTypeText(retObj.eleType) +  ")";
    retObj.id = el.id;
    retObj.pId = null;
    retObj.children = array;
    return retObj;
}

/**
 * 获取元素的名称
 * @param eleType
 * @returns {string}
 */
function  getEleTypeText(eleType) {
    var text = '';
    switch (eleType) {
        case 'combiele':
            text = '组合元素';
            break;
        case 'macro':
            text = '宏元素';
            break;
        case 'text':
            text = '文本元素';
            break;
        case 'select':
            text = '单选下拉元素';
            break;
        case 'selectmult':
            text = '多选下拉元素';
            break;
        case 'numberelement':
            text = '数字元素';
            break;
        case 'radio':
            text = '单选元素';
            break;
        case 'checkbox':
            text = '多选元素';
            break;
        case 'tagelement':
            text = '标签元素';
            break;
        case 'datedomain':
            text = '日期元素';
            break;
        case 'textnode' :
            text = '自由文本';
            break;
        default :
            text = '文本元素';
            break;
    }
    return text;
}

/**
 *  对dom 树节点处理 获得axlugins 元素的树形节点
 * @param ele  Dom节点元素
 * @returns {array}  返回节点数组
 */
function getDomTreeData (ele){
    var obj = walkDom (ele);
    // console.log(obj);
    var clearedData = tranTreeData ([obj]);
    return clearedData;

    /**
     *  清除 axplugins 是null的情况
     * @param arr 节点数组
     * @returns {*}
     */
    function tranTreeData (arr) {
        var arr = $.extend(true,[],arr);
        var flatArr = [];
        var keyCounter = 0;

        $.each(arr,function (sonIndex,rootNode){
            flattenChildren(rootNode);
        });
        clearNullAxplNode ();

        /**
         *  将树形数组 扁平化处理
         * @param node
         * @param parent
         */
        function flattenChildren(node,parent){
            node.nodeKey = keyCounter++;
            flatArr[node.nodeKey] = { node: node, nodeKey: node.nodeKey };
            if (typeof parent != 'undefined') {
                flatArr[node.nodeKey].pKey = parent.nodeKey;
            }
            if (node['children'].length > 0) {
                flatArr[node.nodeKey]['children'] = [];
                $.each(node['children'],function (sonIndex,child){
                    flattenChildren(child, node);
                });
            }
        }

        /**
         *  清除axplugins 为 null 的节点
         */
        function clearNullAxplNode (){
            var cloneArr = $.extend(true,[],flatArr);
            $.each(cloneArr, function (index,item){
                var nullParentId = null;
                var nullNodeKey = null;
                if (item.node.eleType === null) {
                    nullParentId = item.pKey;
                    nullNodeKey = item.nodeKey;
                    //对 flatArr 过滤 node.eleType 为 null
                    flatArr = $.grep(flatArr,function (grepitem){
                        grepitem.eleType = grepitem.node.eleType;
                        grepitem.name = grepitem.node.name;
                        grepitem.id = grepitem.node.id;
                        grepitem.open = true;
                        return grepitem.nodeKey != nullNodeKey;
                    });

                    //flatArr 中pId 更换
                    $.each(flatArr,function (sonIndex,sonItem){
                        if (sonItem.pKey === nullNodeKey){
                            sonItem.pKey = nullParentId;
                        }
                    });

                    //对其中的pKey 转换为实际节点的Id
                    $.each(flatArr,function (sonIndex,sonItem){
                        var pKey = sonItem.pKey;
                        //获取nodeKey 是 pKey 的节点
                        var pKeyNodeArr = $.grep(flatArr,function (grepitem){
                            return grepitem.nodeKey == pKey;
                        });
                        // 对pId 赋值
                        if (pKeyNodeArr.length > 0) {
                            sonItem.pId = pKeyNodeArr[0].node.id;
                        }
                    });
                }
            });
        }

        return flatArr;
    }

}

word-break：break-all与word-wrap：break-word区别

word-break:break-all 所有的地都能换行，不管是不是一个word 单词。
word-wrap：break-word 如果一段文字中有换行的点儿，如空格或 CJK（中文/日文/韩文）之类的，英文字符不会折行。
demo

absolute的元素设置width50%，是按哪个元素50%呢？？？包含块的定义

1.根元素（很多场景下都是html元素），被称为初始包含块。其尺寸等同于浏览
器可视窗口的大小
2.对于其他元素，如果该元素的 position 是 relative 或者 static，则“包含块”
由其最近的块容器祖先盒的 content box 边界形成。
3.如果元素 position:fixed，则“包含块”是“初始包含块”。
4.如果元素 position:absolute，则“包含块”由最近的 position 不为 static
的祖先元素建立，如果没有符合条件的祖先元素，则“包含块”是“初始包含块”。

background-clip的使用

使用background-clip制作“三道杠”和“圆圈效果”
兼容IE9+
border-box：
从border区域向外裁剪背景。
padding-box：
从padding区域向外裁剪背景。
content-box：
从content区域向外裁剪背景。

win10 删除默认输入法并使用搜狗输入法设置方法

https://jingyan.baidu.com/article/6766299740c2dd54d41b844f.html

win10 的默认输入法太烦人，每次都得切换！！！这下好了

z-index只有在定位元素（不是static）时才能生效

在css3 世界中，z-index 不仅能在定位元素上生效， flex布局的子元素可以用z-index，也会生效。
z-index 确实可以影响层叠水平，但是只限于定位元素以及 flex 盒子的孩子元素；

outline不占任何空间

轮廓宽度设置得再宽广，也不会影响任何元素的任何布局，并且 outline轮廓是可穿透的。两个用处：
1.头像剪裁的矩形镂空效果。
2.自动填满屏幕剩余空间的应用技巧

关闭浏览器页签的beforeUnload 和 unload方法

使用网易云信的会议系统，产生的新需求：
防止用户误操作，需要在关闭页签时提示，确定要离开会议吗?取消，确定，点击取消按钮页面无变化，点击确定按钮，执行关闭聊天室的接口，然后关闭当前页面。

使用beforeUnload 和 unload方法，beforeUnload 会在unload 方法前执行。
规格讨论中提到了 beforeUnload 的两大用途：

防止使用者不慎遺失編輯中的資料
詐騙使用者。（会在离开页面后出现诈骗信息）
所以google 从 Chrome 51 版（2016 年 4 月）起取消 onbeforeunload 对对话框信息的自定义写法，理由是防止自定义信息被用於詐騙用途。
根据规范 beforeUnload 事件内的处理函数中调用下列弹窗相关的方法时,可以忽略不执行 alert，showModalDialog(), window.confirm() window.prompt()，debugger.也就是无法自定义样式弹窗，弹窗只能是默认的，文本也不能自定义处理。
如果需要在关闭页面时执行一些销毁代码，需要在unload里面写入。但是问题也有，就是刷新也会执行这段代码。

关于margin:auto以及相对于可视框的vh定位

绝对定位元素的居中实现：

.element {
    width: 600px; height: 400px;
    position: absolute; left: 50%; top: 50%;
    margin-top: -200px;    /* 高度的一半 */
    margin-left: -300px;    /* 宽度的一半 */
}

这个定位有不足，需要提前知道被定位元素的尺寸，否则margin的负值不会很精确。此时需要借助js获取。
css3 语法实现

.element {
    width: 600px; height: 400px;
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);    /* 50%为自身尺寸的一半 */
}

不能兼容IE10以下。

权衡浏览器的兼容性和尺寸自适应，推荐方案：

.element {
    width: 600px; height: 400px;
    position: absolute; left: 0; top: 0; right: 0; bottom: 0;
    margin: auto;    /* 有了这个就自动居中了 */
}

可以设置任意尺寸，也可以不设置尺寸（比如说图片自带尺寸）。
设置尺寸demo
图片自适应demo

element-ui的dialog 弹窗定位使用了横向margin：atuo；纵向上 margin-top上使用了15vh的单位，使弹窗看起来2：3的比例。

普通元素聚焦outline效果

在实际开发中，普通元素也有类似控件元素的outline效果，例如：基于原生的单复选框模拟单复选框，或者为了规避submit类型按钮UI很难完全保持一致的问题，我们会使用移花接木，通过for 属性与这些原生表单控件相关联。代码如下：

<input id="t" type="submit">
<label class="btn" for="t">提交</label>
[type="submit"] {
position: absolute;
clip: rect(0 0 0 0);
}
.btn {
display: inline-block;
padding: 2px 12px;
background-color: #cd0000;
color: #fff;
font-size: 14px;
cursor: pointer;
}
:focus + label.btn {
outline: 1px dotted Highlight;
outline: 5px auto -webkit-focus-ring-color;
}

demo地址

absolute具有相对定位的无依赖绝对定位的用途

一个绝对定位元素，没有任何 left/top/right/bottom 属性设置，并且其祖先元素全部都是非定位元素，其位置在哪里？
很多人都认为是在浏览器窗口左上方。实际上，还是当前位置，不是在浏览器左上方。正是这种错误认知导致凡是使用absolute 绝对定位的地方，一定父容器 position:relative，同时 left/top 等属性定位，甚至必同时使用 z-index 属性设置层级。这是非常错误的，absolute 是非常独立的 CSS 属性值，其样式和行为表现不依赖其他任何 CSS 属性就可以完成。
“无依赖绝对定位”本质上就是“相对定位”，仅仅是不占据 CSS 流的尺寸空间而已。
重点在
‘相对自身位置定位’ ！！！
‘不占空间’！！！
父元素设置 overflow：hidden 也不会隐藏此元素，因为不占空间！！！
三个用处：
1.form 表单的错误提示
2.form 表单前面的 * 必填项。
3.自动完成的下拉框，菜单的下拉框。
4.自然定位到左上角的top 火 hot 之类的图片。

absolute元素的流体特性

.box { position: absolute; left: 0; right: 0; } `

因为 left 和 right 同时存在，自身宽度就不是 0，而是表现为“格式化宽度”，宽度大小自适应于.box 包含块的 padding box。
包含块的定义参照其他笔记

white-space的用法

white-space 属性声明了如何处理元素内部的空白空格，包括 space tabs enter键盘生成的空格，&nbsp字符不受限制。因此这个属性可以决“图文”（word-bread：keep-all指的是文本）内容是否可以在一行显示，是否显示打断连续空白。属性值分为三个维度：是否合并换行符，是否合并空白符，是否文字环绕（自动折行）。

flex布局宽度等分

flex-内容宽度等分

 .box {
            display: flex;
        }
        
        .box div {
            flex: 1;
            border: 1px solid red;
        }

    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>

属性 flex 是缩写，是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。flex: 1; 意思是flex-grow 的值是1，属性grow 是扩展的意思，扩展的是flex子项所占据的宽度，扩展所侵占的空间实际是出去元素占用的间隙。 flex-grow详细说明
 https://codepen.io/sdsdsdsd/pen/VNNgRe

text-decoration属性文字与下划线重叠的问题

text-decoration: underline;属性会给文本增加下划线，但是下划线与文本贴的比较紧，效果并不好。，可以用border 来处理，请看demo。对于内联元素，改变垂直方向上的border 属性和 padding属性，对原来的布局定位，没有任何影响（元素的默认over-flow属性是visible，如果padding足够大，over-flow的属性是scroll或者是auto，就会有滚动条出现，可以向下滚动，不占空间是假象，有条件的）。

@font face 规则

@font-face { font-family: 'Microsoft Yahei'; src: url(example.ttf); }
font-family 可以看成字体变量，名称可以随意，但是如果设置成系统的字体名称，比如微软雅黑字体更改为 example.ttf 对应字体了

src

src属性跟 img 的src 属性一致，引入本地或者外链字体，使用系统安装字体，使用local（）功能符号（兼容IE9+），外链字体使用url（）功能符。
业界使用自定义字体的格式：

eot，woff，ttf，svg是字体的格式，多个url 为了浏览器兼容做的处理。
自定义字体使用：

.iconfont {
  font-family: "ICON" !important;
}

[class*=" el-icon-"], [class^=el-icon-] {
    font-family: element-icons!important;
}

css属性选择器：
[attr^=value]
表示带有以 attr 命名的属性，且属性值是以"value"开头的元素。
[attr$=value]
表示带有以 attr 命名的属性，且属性值是以"value"结尾的元素。
[attr*=value]
表示带有以 attr 命名的属性，且属性值包含有"value"的元素。
再也不用写 iconfont iconshanchu 两个class 名称，写一个就好。

relative相对定位介绍

relative相对定位有两大特点：1.相对自身定位。2.无侵入（自身的位置不被周边侵入）。
与margin 定位的区别是，绝对定位元素相对自身偏移，对周边元素无影响，而margin 定位使得周边元素偏移。demo

设置相对定位元素的层叠顺序提高了，普通元素设置z-index 也是徒劳的，所以position：relative 设置的元素影响应该最小。

font-size 与 ex、 em 和 rem 的关系

ex 是字符 x的高度，与font-size 关系密切，font-size 越大 ex的值越大。
em 是字符M的宽度决定，相对当前元素。
rem，即 root em，顾名思义，就是根元素 em 大小。
em 相对于当前元素， rem 相对于根元素，本质差别在于当前元素是多变的，根元素是固定的，也就是说，如果使用 rem，我们的计算值不会受当前元素 font-size 大小的影响。
区别demo

安装node.js的多版本管理工具nvm-windows

在github上有个新项目nvm-windows，可以帮助我们在windows 系统下对node的版本进行管理。
nvm-windows的下载地址
根据官方说明：

It comes with an installer (and uninstaller), because getting it should be easy. Please note, you need to uninstall any existing versions of node.js before installing NVM for Windows. Also delete any existing nodejs installation directories (e.g., "C:\Program Files\nodejs") that might remain. NVM's generated symlink will not overwrite an existing (even empty) installation directory.

You should also delete the existing npm install location (e.g. "C:\Users<user>\AppData\Roaming\npm") so that the nvm install location will be correctly used instead. After install, reinstalling global utilities (e.g. gulp) will have to be done for each installed version of node:

再安装 nvm-windows 之前需要卸载node，并清空目录。
在Windows下完全卸载已安装的node.js
从卸载程序卸载程序和功能，也可以直接右键node.js的安装包并选择卸载。
重新启动（或者重新启动任务管理器杀死所有与节点相关的进程）。
从下列的目录中找到相关的内容并删除掉：
C:\Program Files (x86)\nodejs
C:\Program Files\nodejs
C:\Users{User}\AppData\Roaming\npm（或%appdata%\npm）
C:\Users{User}\AppData\Roaming\npm-cache（或%appdata%\npm-cache）
检查%PATH%环境变量以确保没有引用Nodejs或npm存在。
重新启动电脑。

安装nvm-windows并使用
到GitHub的项目下载地址，选择下载nvm-setup.zip，解压后双击使用安装程序即可。

查看已安装的nodejs版本

nvm list

如果是第一次安装，使用该命令结果如下：

C:\Users\Lewis>nvm list

No installations recognized.

查看可安装的nodejs版本

nvm list available
nvm install 8.11.2 64-bit// 安装 node 版本
nvm use 8.11.2// 切换版本 切换后才可以使用node 和 npm的命令。
nvm uninstall 8.11.2// 卸载node包

切换node 版本之后 npm 包可能需要重装。

前端面试题汇总

vue 相关：

1.v-if 与v-show的区别
答案：
v-show 给Dom元素增加display:none;
v-if 是动态删除添加Dom元素。

2.$nextTick的作用
答案: DOM 更新之后执行延迟回调。

ES6相关：

3.let 与var，const的区别
答案：
var允许在同一作用域中声明同名的变量，而let不可以
const 声明常量，不可更改。

flex布局上机题
flex 如何实现垂直居中：
代码：
<style> .wp { width: 500px; height: 500px; background-color: green; } .wp { display: flex; justify-content: center;/* 水平居中 */ align-items: center;/* 垂直居中 */ } .box { width：20px; word-wrap:break-word; } </style>

flexflexflexflexflexflexflexflexflexflexflexflexflex

flex --- 左右布局，一侧定宽，一侧自适应撑满
代码：
html,
body {
height: 100%;
margin: 0
}

    .main {
        display: flex;
        height: 100%;
    }
    
    .left,
    .right {
        height: 100%;
        border: 1px solid red;
        box-sizing: border-box;
    }
    
    .left {
        width: 300px;
    }

.right {
flex:1
}

固定宽度300px

自适应宽度

flex 实现内容等分:

.box {
display: flex;
}

    .box div {
        flex: 1;
        border: 1px solid red;
    }

计算机基础：
http 状态码 401，404， 302， 200， 500 什么意思？
401 需要认证
404 找不到资源
500 服务端错误
302 重定向

HTTP 默认端口号是 80
HTTPS 默认端口号是 443

C/S架构与B/S架构
答案：
B/S架构，中文名：浏览器/服务器
C/S架构，中文名：客户端/服务器

聊天题：
有遇到过解决不了的问题吗？讲下如何解决的。

如何做到代码好维护，如何处理的？
答案： 1. 使用设计模型：面向对象程序设计。
2. 做好前后端的接口格式管理设计。
3. 组件化，模块化开发。

拔高题：

1、1、2、3、5、8、13、21、……

斐波那契数列,使用程序表现出来：
function fibonacci(n){

    if(n < 0) throw new Error('输入的数字不能小于0');

    if(n==1 || n==2){

        return 1;

    }else{

        return fibonacci1(n-1) + fibonacci1(n-2);

    }

}

liver-server的bat文件

start ""  "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir 

live-server --port=8888

exsit

总结的面试题

常规算法：

写出以下规律：1、1、2、3、5、8、13、21、34、……

function fib(num) {
    var arr = [];
    if(num == 1){
        return arr = [1];
    }else if(num == 2){
        return arr = [1,1];
    }else{
        arr = [1,1];
        var a=1;
        var b=1;
        var c=2;
        var arrlen =arr.length;
        for(var i=2;i<num;i++){
            arr.push(c);
            a=b;
            b=c;
            c=a+b;
        }
        return arr;

    }

}

alert( fib(1));    //  1
alert( fib(2));    //  1,1
alert( fib(3));    //  1,1,2
alert( fib(4));    //  1,1,2,3
alert( fib(5));    //  1,1,2,3,5
alert( fib(8));    //  1,1,2,3,5,8,13,21

2.给定两个数组，要求求出两个数组的交集，注意，交集中的元素应该是唯一的。

```

 var firstArray = [2, 2, 4, 1];
 var secondArray = [1, 2, 0, 2];

 intersection(firstArray, secondArray); // [2, 1]

 function intersection(firstArray, secondArray) {

     var hashmap = {};
     var intersectionArray = [];

     firstArray.forEach(function(element) {
       hashmap[element] = 1;
     });

     secondArray.forEach(function(element) {
       if (hashmap[element] === 1) {
       intersectionArray.push(element);
       hashmap[element]++;
     }
 });

  return intersectionArray;
}

```

vue的应用

computed 和 watched 的区别：
答：computed 是计算属性，依赖其他属性计算值，并且 computed 的值有缓存，只有当计算值变化才会返回内容。watch 监听到值的变化就会执行回调，在回调中可以进行一些逻辑操作。所以一般来说需要依赖别的属性来动态获得值的时候可以使用 computed，对于监听到值的变化需要做一些复杂业务逻辑的情况可以使用 watch。
vue 的双向绑定的原理是什么？
答：vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty()来劫持各个属性的 setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

web基础

1.请实现元素的垂直居中 (兼容IE9)。

    <style>
        .father {
            width: 100%; height:100%;
            position: relative;
            background-color: green;
        }
        .son {
            position: absolute;
            top: 0; right: 0; bottom: 0; left: 0;
            width: 200px; height: 100px;
            background-color: red;
            margin: auto;
        }
    </style>
	<div class="wp">
        <div class="box">垂直居中 </div>
    </div>

        .wp {
            width: 500px;
            height: 500px;
            background-color: green;
        }
        .wp {
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }
        .box {
            display: inline-block;
        }
        <div class="wp">
          <div class="box">123123</div>
        </div>

2.给以下结构中的P标签元素加上click 事件，弹出每个P标签内的内容请写出代码原生js 实现；

    <p>产品一</p>
    <p>产品二</p>
    <p>产品三</p>
    <p>产品四</p>
    <p>产品五</p>

答案：

var pNode = document.getElementsByTagName("p");
for(var i = 0;i<pNode.length;i++){
    (function (i) {
        pNode[i].onclick = function () { 
            alert(pNode[i].innerText);         
        }
    })(i);                            
}

在线编辑样式

页面上就会出现.l { float: left; }的文本信息；如果再设置 contenteditable=
"true"，在有些浏览器下（如 Chrome），甚至可以直接实时编辑预览页面的样式。
`

visible

整数或者小数加小数的工具函数

    function addNum (num1, num2) {
        var sq1, sq2, m;
        try {
            sq1 = num1.toString().split('.')[1].length;
        }
        catch (e) {
            sq1 = 0;
        }
        try {
            sq2 = num2.toString().split('.')[1].length;
        }
        catch (e) {
            sq2 = 0;
        }
        m = Math.pow(10, Math.max(sq1, sq2));
        console.log(sq1,sq2,m);
        return (Math.round(num1 * m) + Math.round(num2 * m)) / m;
    }

为什么浮点数的加法不准确，比如0.2 + 0.4 = 0.6000000000000001,思考一下

iview里面组件工具

$emit 用于父子事件传递时使用，在组件嵌套组件的情况下并不适用。
iview里面的代码：

        dispatch(componentName, eventName, params) {
            let parent = this.$parent || this.$root;
            let name = parent.$options.name;
           //parent 组件有值 name 为空 或者name 的值 不等于 组件的名称，循环继续。
            while (parent && (!name || name !== componentName)) {
                parent = parent.$parent;

                if (parent) {
                    name = parent.$options.name;
                }
            }
            if (parent) {
                parent.$emit.apply(parent, [eventName].concat(params));
            }
        }

这段代码试用于非父子组件数据传递。从子孙组件往上发送事件。

function broadcast(componentName, eventName, params) {
    this.$children.forEach(child => {
        const name = child.$options.name;

        if (name === componentName) {
            child.$emit.apply(child, [eventName].concat(params));
        } else {
            // todo 如果 params 是空数组，接收到的会是 undefined
            broadcast.apply(child, [componentName, eventName].concat([params]));
        }
    });
}

这段代码试用于非父子组件数据传递。从父亲爷爷辈的组件往下发送事件。

margin：auto 实现垂直居中

demo 地址

原理：
margin-top:auto和margin-bottom:auto的计算值是0，所以margin:auto只是水平居中了。
只要把top/bottom/left/right都设置成0,然后再设置margin:auto就可以实现了。
注意必须要有width 和高度的值！！！
必须要有width 和高度的值！！！
必须要有width 和高度的值！！！

yangsirgo / good-good-study Goto Github PK

good-good-study's Introduction

css 水平居中

absolute + transform

lineheight

flex

css-table