关于知识点

作者: 小白不白Zcq | 来源:发表于2018-09-10 23:26 被阅读0次

一、盒子模型

CSS盒子模型由外到内由：margin（外边距）、border（边框）、padding（内边距）、content（元素内容）组成。

而盒子模型分为两种：1.标准盒模型 2.IE盒模型

它们的区别在于对contentarea（内容区域）的解析不同，说白了，就是对width、height解析不一样（盒子都是一样的，包括margin、border、padding、content）

1.标准盒模型（当设置box-sizing:content-box时）

width、height只包括content（元素内容）

2.IE盒模型（当设置box-sizing:border-box时）

width、height则包括了border（边框）、padding（内边距）、content（元素内容）
width = content + padding×2 + border×2
height = content+ padding×2 + border×2

二、AJAX

之前的简书已总结，请参照ajax--总结

三、居中（垂直水平对齐）

5种方法：<1>flex <2>定位的三种方法 <3>table-cell

<1>flex弹性布局

  display:flex;/*弹性布局*/
  flex-direction:row;/*横向排列*/
  justify-content:space-around;/*均匀分布*/
  flex-wrap:wrap;/*父类宽度不够自动换行*/

justify-content//横轴方向上的对齐方式。
align-items //纵轴方向上的对齐方式。

缺点：有兼容性问题

<2>定位：3种方式（都有兼容性问题）

1.left.top为50%、margin-left和margin-top为自身宽高的-50%

        .main{
            position:relative;
            width: 200px;
            height: 200px;
            border: 1px orange solid;
        }
        .one {
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -50px;
            margin-top: -50px;
            width: 100px;
            height: 100px;
            background: red;
        }

2.left、right、top、bottom全设为0，margin：auto。

        .main {
            position: relative;
            width: 200px;
            height: 200px;
            border: 1px orange solid;
        }

        .one {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            width: 100px;
            height: 100px;
            background: red;
        }

3.left.top为50%、transform方法

        .main {
            position: relative;
            width: 200px;
            height: 200px;
            border: 1px orange solid;
        }

        .one {
            position:absolute;
            left:50%;
            top:50%;
            transform:translate(-50%, -50%);
            width: 100px;
            height: 100px;
            background: red;
        }

<3>table-cell 不用宽高，无兼容性问题（但是因为太老了，用的很少，知道就可以）

        .box {
            position: relative;
            width: 300px;
            height: 300px;
            border: 1px solid red;
            display: table-cell;    
            text-align: center; 
            vertical-align: middle;
        }
        span {

        }

四、浮动

1.浮动的初衷:文字环绕图片（+所以没考虑有关布局的问题，所以会产生很多问题）

特性：1.破坏性 2.半脱离文档流 3.紧密排列 4.转化为块元素

破坏性问题→父级塌陷→父级高度变为0→两种解决方法：<1>清除浮动 <2>BFC

<1>清除浮动(after伪元素)

:after和::after写法是等效的，都可以用来表示伪类对象，前者CSS2，后者CSS3，前者兼容性比后者强，但是开发H5建议使用后者。

.father::after{
     content:'.'
     display:block
     clear:both
}

即在父级元素的最后，添加了一个:after伪元素，通过清除伪元素的浮动，达到撑起父元素高度的目的

进一步理解（深层次原理）：给浮动元素的上面或者下面添加足够的空间

<2>BFC 块状格式化上下文(它是一个独立的渲染区域，***里面的子元素不会影响到外面的元素)

overfloat:hidden

问：特性：计算父容器高度的时候，需要把浮动元素也计算进去

拓展:说道BFC，也可以用来解决父子元素间的拖拽问题

两种解决方法：

1.BFC解决

2.设置padding-top或者border-top（就相当于给父类来了一个可以抓着不动的杠子，设置为1px就好，这样父类就可以不受到子类元素的拖拽），但是！！！相当关键，padding-top直接设置1px就可以了，而border-top必须设置1px solid #000 大概是这个样式，也是就说我们的border-top不能只单单设置1px而不设置其他样式，否则会无效！！！

拓展:兄弟间元素是重叠问题

对于这个问题，我们可以设置兄弟间的margin，两个margin一样是，之间就是这个margin值，否者谁大，之间的margin值就跟谁一样。

五、原型链

我们可以知道这与原型有关

三者关系：
1.每个构造函数都有一个原型对象(prototype).
//即每一个构造函数有一个prototype属性，prototype指向另一个对象(Object)，
//这个对象(Object)的所有属性和方法都会被构造函数的实例继承.
2.原型对象(prototype)都包含一个构造函数指针(constructor).
//prototype就是通过constructor指向Object的.
3.实例都包含一个指向原型对象的内部指针(_proto_).
//_proto_是查找函数或对象的原型链的方式.

提到原型链，我们要知道他和原型、构造函数以及实例有关

如果现在让一个构造函数的原型等于另一个类型实例，这就可以让两个类之间实现一种继承关系，然后把这种所有类型关系连接起来，层层递进，这就形成了一条长长的原型链。

六、闭包

产生闭包的原因：函数在定义的作用域外进行的访问时，会产生闭包

定义：通俗的来说：子函数可以用父函数的变量

更严谨的来说：函数对象可以通过作用域链相互关系起来，函数体内部的变量可以保存在函数作用域内

闭包的优点

<1>函数嵌套函数有利于封装且变量命名不冲突

<2>函数内部可以引用外部的变量和函数

闭包的缺点

参数和变量不会被垃圾回收机制回收

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

这样会导致内存泄露

我们可以通过手动清空引用具体操作我们可以手动让引用=null

七、this指针

有对象就指向调用对象
没调用对象就指向全局对象
用new构造就指向新对象
通过 apply 或 call 或 bind 来改变 this 的所指。

举个栗子：

全局this指向window
setTimeout指向window
IE事件监听指向window

改变this的方法：

apply（一个参数）伪数组，只有length
call（多个参数）
bind（不是立即调用，先给另一个变量，需要调用的时候再使用）

八、返回状态码

常见状态码：
200：一切正常（请求成功）
201：已创建
202：已接受
301：资源（网页等）被永久转移到其他URL
403：无权限
404：请求的资源（网页等）不存在
500：内部服务器错误
503：服务不可用
505：HTTP版本不受支持

1xx：指示信息-表示请求已接受，继续处理。
2xx：成功-表示请求已被成功接收、理解、接收。
3xx：重定向-要完成请求必须进行更近一步的操作。
4xx：客户端错误-请求有语法错误或请求无法实现。
5xx：服务器端错误-服务器未能实现合法的请求。

九、从输入一个URL到页面加载的过程（7步）

打开浏览器，输入一个网址后，到页面加载完成时，这中间究竟发生了些什么~

以下是我的理解：

1.首先在浏览器中输入url，按下回车

2.然后浏览器会先在缓存里查找当前url是否有对应的IP，并比较缓存是否过期

3.如果没有的话，就开始检查本地hosts文件里是否有网址映射关系，如果没有，就在DNS缓存里找，以递归的方式进行查找，还没有则在本地DNS服务器里，先根域服务器=>顶级域=>第二层域=>子域进行迭代查询，最后找到域名对应的IP地址

4.根据解析后的IP建立TCP连接（即三次握手）（是建立连接，还没开始传包）

image

5.建立连接后，客户端开始向服务器发送请求（包括起始行、请求头和请求主体）就相当于告诉他我准备好接受你发的东西了

6.服务器接受到请求后，开始处理请求，然后发送给客户端他请求的包

7.然后浏览器开始处理接收到的页面文档，首先将HTML解析成DOM树，然后将CSS解析成样式结构体，最后二者结合成render tree（具体的解析过程：简单来说就是CSS不会阻塞解析，但会阻塞渲染render tree，而JS则会阻塞浏览器解析HTML文档）（可能还会涉及回流和重绘问题）

十、为什么有跨域和简述集中跨域方式，见总结：有关jsonp和跨域

十一、未解决：判断数据类型几种方式？及bug和解决方法

js的数据类型 7种

引用数据类型:（也叫复杂数据类型）
1.object（function） alert(Function instanceof Object)//fn属于obj
                     alert(Object instanceof Function)//obj属于fn
基本数据类型：
2.String
3.number
4.undefined
5.null
6.boolean
7.symbol（Es6）

十二、有哪些选择器

1. id选择器 #name
1. 类选择器 .name
1. 标签选择器 div
1. 子选择器 div > ul
1. 包含选择器 div ul
1. 通用选择器 * （清除默认样式）
1. 伪类选择器 (允许给不存在的html标签设置样式) :hover :active :before :after
1. 分组选择器 div, ul
1. css3 选择器 (神器, 写布局的时候讲)
10.！ important

<style>
        .swiper-pagination-bullets{
            bottom: -9px !important;
        }
</style>

十三、优先级问题

理解优先级规则:

1. 选择器的权值：标签的权值为1，类选择器的权值为10，ID选择器的权值为100。
2. 对于同一元素的有多个相同权值样式存在时，根据这些样式的前后顺序决定。

<1> 选择器的优先级（面试题）（引出important）

顺序: !important > 行内样式 > ID选择器(#id) >类选择器( .class)=伪类=属性 > 标签(span)

<2>样式表的优先级（面试题）

    1. 行内样式    
    2. 内联样式
    3. 外联样式

样式表优先级: 行内样式（标签内部）> 嵌入样式表（当前文件中）> 外部样式表

(简述下css代码的优先级)

十四、CSS可以继承哪些属性

参考：https://www.cnblogs.com/thislbq/p/5882105.html
继承: 所有和字体相关的样式都能继承
text-align
line-height 文字居中
color
font-size
font-weight
font-style
font-family 字体
text-decoration 下划线
text-indent 缩进

a不能继承颜色
i, em 不能继承斜体
b, strong, h1-h6 不能继承加粗

十五、说说垃圾回收机制，还有内存泄漏什时候会出现以及解决方法

JS的垃圾回收机制有两种:<1>标记清除<2>引用计数

<1>标记清除（也是目前主流的垃圾收集算法）：它的思想是给当前不适用的值加上标记，然后再回收他们的内存。

<2>引用计数（JS引擎目前都不再使用这种算法）：这种方法的思想就是根据跟踪记录所有值被引用的次数，引用为0时，即收回内存

内存泄露在什么时候出现：内存泄漏是在IE浏览器下，使用闭包操作DOM元素的时候产生的，具体来说，如果闭包的作用域中保存着一个HTML元素，它会创建一个循环引用，导致该元素的引用数至少也是1，永远无法被销毁。

内存泄露可以通过手动消除引用的方式来解决，手动将引用设置为null

十六、用定时器写时钟解决误差的问题

解决误差的方法：可以用当前时间 - 开始时间，来取得中间的时间差，然后根据时间差来动态计算指针划过的刻度，这样就可以减少因为执行过程所带来的误差值。

for(var i = 0; i < 10000000000000; i++){i++} setTimeout(function(){alert(1)}, 30);

十七、获取屏幕及div宽高

获取视窗宽度

let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
console.log(htmlWidth);

获取div宽高 div的Id为“aaa”

<script type="text/javascript">
        let a = document.getElementById('aaa');
        console.log(`aaa的宽度是：${a.clientWidth}px`);

        a.addEventListener('click',function(){
            a.style.width = "300px"
            console.log(`现在的宽度是：${a.clientWidth}px`);
        })
</script>

十八：after伪元素画横线

            .selectSolo {
                padding: 20rpx 46rpx;
                position: relative;
            }

            .selectSolo::after {
                content: "";
                width: 100%;
                height: 2rpx;
                background: rgb(233, 178, 178);
                bottom: 0;
                left: 0;
                position: absolute;
            }