前端基础知识

前端基础知识体系（结构化的知识范围）

css基础知识   js基础语法  JS-Web-API  开发环境  运行环境  HTTP协议

HTML  CSS

1、如何理解HTML语义化？

        答：让人更容易读懂，增加代码可读性。

        让搜索引擎更容易读懂（SEO）

2、默认情况下，哪些HTML 标签是块级元素，哪些是内联元素？

        答：display：block/table 有 div h1 h2 table ul ol p 等

        display：inline/inline-block 有 span img input button 等

3、盒子模型的宽度如何计算

        要点：offsetWidth = （内容宽度 + 内边距 + 边框），无外边框

        设置 box-sizing:border-box 之后，width 为到边框盒子模型的宽度

4、margin纵向重叠的问题

        要点：相邻元素的 margin-top 和 margin-bottom 会发生重叠

        空白内容的标签也会重叠

5、margin负值的问题

        要点：margin-top 和 margin-left 负值，元素向上、向左移动

        margin-right 负值，右侧元素左移，自身不受影响

        margin-bottom 负值，下方元素上移，自身不受影响

6、BFC理解和应用

        要点：一个独立的渲染区域，内部元素的渲染不会影响边界以外的元素

        形成BFC的条件

                1、float 不是 none

                2、position 是 absolute 或 fixed

                3、overflow 不是 visible

                4、display 是 flex inline-block

        BFC常见应用

                清除浮动

7、如何实现圣杯布局和双飞翼布局

        要点：三栏布局，中间一栏最先加载和渲染（内容最重要）

        两侧内容固定，中间内容随着宽度自适应

        一般用于 pc 网页

        技术总结：使用float 布局；两侧使用margin 负值，以便和中间内容横向重叠；防止中间内容被两侧覆盖，一个用padding 一个用 margin

// 圣杯布局
.container {
   float: left;
   padding-left: 200px;
   padding-right: 150px;
}
.content {
   width: 100%;
}
.left {
   position: relative;
   width: 200px;
   margin-left: -100%;
   right: 200px;
}
.right {
   width: 150px;
   margin-right: -150px;
}

//双飞翼布局
.container {
    float: left;
    margin: 0 150px 0 200px;
}
.left {
    width: 200px;
    margin-left: -100%;
}
.right {
    width: 150px;
    margin-left: -150px;
}

8、手写 clearfix

.clearfix:after {
    content: '';
    display: table;
    clear: both;
}

9、flex画骰子

        要点：flex-direction  justify-content  align-items  flex-wrap  align-self

.box {
   display: flex;
   justify-content: space-between;
}
.item {
   /* 背景色 大小 边框 */
}
.item:nth-child(2) {
   align-self: center;
}
.item:nth-child(3) {
   align-self: flex-end;
}

10、absolute和relative 分别依据什么定位？

        答：relative 依据自身定位；absolute 依据最近一层的定位元素定位

11、居中对齐有哪些实现方式？

        答：水平居中：inline 元素：text-align： center， block 元素：margin：auto，absolute 元素： left： 50% + margin-left 负值

        垂直居中：inline 元素：line-height 的值等于 height 值， absolute 元素：top： 50% + margin-top 负值， absolute 元素：transform（-50%，-50%），absolute 元素：top、left、bottom、right 为0 margin：auto

12、line-height的继承问题

        要点：写具体数值，如30px，则继承该值；写比例，如2或1.5，则继承该比例；写百分比，如200%，则继承计算出来的值

12、rem是什么？

        要点：px 是绝对长度单位；em 是相对长度单位，相对于父元素；rem 是相对长度单位，相对于根元素，常用于响应式布局

13、如何实现响应式？

        要点：media-query，根据不同的屏幕宽度设置根元素 font-size；rem 基于根元素的相对元素单位

js基础知识

值类型和引用类型

知识点：

• 值类型 vs 引用类型，堆栈模型，深拷贝
• typeof 运算符
• 类型转换，truly 和 falsely 变量

1、typeof 能判断哪些类型

        要点：识别所有值类型，识别函数，判断是否是引用类型（不可再细分）

2、何时使用 === 何时使用 ==

        答：使用 == 会进行默认的类型转化，除了 == null 之外，其他一律用 ===

3、值类型和引用类型的区别

        答：值类型是栈存储，赋值之后直接改变原有值；引用类型是堆存储，指向内存地址，赋值之后内存地址不发生变化

4、手写深拷贝

function deepClone(target) {
    if(typeof target !== 'Object' || target == null) {
        return target
    }
    let result
    if(target insatnceof Array) {
        result = []
    } else {
        result = {}
    }
    for(let i in target) {
        if(target.hasOwnProperty(i)) {
            result[i] = deepClone(target[i])
        }
    }
    return result
}

原型和原型链

知识点：

• class 和继承，结合手写jQuery 的示例来理解
• instanceof
• 原型和原型链：图示 & 执行规则

5、如何准确判断一个变量是不是数组？

        答：使用 instanceof 来进行判断

6、手写一个简易的jQuery，考虑插件和扩展性

class jQuery {
    connstructor(selector) {
        const result = document.querySelectorAll(selector)
        const length = result.length
        for(let i = 0; i < length; i++) {
            this[i] = result[i]
        }
        this.length = length
    }
    get(index) {
        return this[inde