前端基础（之四）

Q3：一个页面从url输入到显示页面的整个过程

1.URL解析

2.DNS解析

3.建立TCP连接

4.发起HTTP请求

5.服务器处理请求

6.返回HTTP响应

7.下载页面资源

8.解析和渲染页面

9.JavaScript执行

10.页面呈现

Q4：说下TCP和UDP的区别

连接性：TCP面向连接；UDP无连接

数据传输方式：TCP流式传输；UDP面向数据报传输

可靠性：TCP提供数据可靠传输机制； UDP不保证数据可靠性

报头：TCP复杂包含控制信息；UDP简单基本信息少

Q5：知道什么是BFC吗

BFC：块级格式化上下文，是W3C CSS2.1规范中的一个概念。

BFC是指浏览器中创建了一个独立的渲染区域，并且拥有一套渲染规则，他决定了其子元素如何定位，以及与其他元素相互关系和作用

Q6：说下清除浮动有哪些方法

1.使用clear:both清除浮动

2.利用伪元素clearfix来清除浮动（给父级元素添加了一个:after伪元素，通过清除伪元素的浮动，达到撑起父元素高度的目的）

.clearfix:after{

        content: "";

        display: block;

        visibility: hidden;

        clear: both;

}

3.父元素设置overflow样式，不管是overflow:hidden或overflow:auto都可以清除浮动

.box{border: 1px solid #ccc;background: #eff2f4;overflow: auto;}

4.通过给父元素设置双伪元素来达到清除浮动的效果

.clearfix:before,.clearfix:after{

        content: "";

        display: block;

        clear: both;

}

Q7：CSS的选择器以及他们的权重

通用选择器（权重：0）：选择所有元素

eg: *{}

子元素选择器（权重： 0）

eg:   ul>li

相邻兄弟选择器（权重：0）

eg:  h2 + p {}

元素选择器（权重：1）：使用HTML元素的标签名作为选择器，选取匹配的元素

eg: p{}

类选择器（权重：10）：使用类名选择元素，以.开头

eg: .highlight{}

伪类选择器（权重： 10）

eg：：hover{}

属性选择器（权重： 10）

eg:  [type="text"]{}

ID选择器（权重：100）：使用元素的唯一标识符ID选择元素，以#开头

eg: #myElement{}

Q8：对CSS3的属性有了解吗？说下怎么定义动画的

文本阴影属性（text-shadow）：用于添加文本阴影效果，可以设置水平距离、垂直距离、模糊半径和阴影颜色等参数

边框圆角属性（border-radius）：用于设置元素边框的圆角效果，可以制定每个角的半径大小，实现圆角效果

过渡属性（transition）：用于控制元素状态变化的过渡效果，可以设置属性的变化时长、延迟时间、变化速度函数等

动画属性（animation）：允许在元素上定义动画效果，包括动画名称、持续时间、重复次数、播放状态等

盒阴影属性（box-shadow）：用于为元素添加阴影效果，可以设置水平偏移、垂直偏移、模糊半径、阴影颜色等参数

Q9：z-index的用法

1.同级关系：z-index值较大的元素将叠加在z-index值较小的元素之上（值可以为负数）

                     z-index值相同时，按照文档流顺序排列

2.父子关系：如果设置了父元素的z-index，那么子元素无论是否设置z-index都和父元素一致，会在父元素上方

3.同级元素下的子元素关系：同级元素的z-index生效，那么其七元素覆盖关系由父元素决定（父元素z-index值大的覆盖父元素z-index值小的，子元素在各自父元素的上方）

Q10：相邻块元素的外边距塌陷问题

外边距塌陷是指在垂直方向上相邻的两个元素的外边距合并为一个较大的外边距的现象。这种现象通常出现在块级元素的上下相遇时，上面的元素有下边距（margin-bottom）,下面的元素有上边距（margin-top）的情况。在外边距塌陷中，两个相邻元素之间的垂直距离会取两者中较大者作为最终的外边距值。这种行为被称为边距合并或者边距折叠。

为避免外边距塌陷问题，可以采取一些解决方法。其中，一种解决方法是为上面的元素添加padding，border或者inline-block等属性，这样可以防止外边距合并。另一种方法是为下面的元素添加overflow:hidden, float: left/right等属性，也可以有效地解决外边距塌陷的问题。

Q11：元素隐藏的几种方法

1.display: none;

2.visibility:hidden;

3.opacity: 0;

4.height: 0; width: 0;

5.max-width: 0; max-height: 0;

6.z-index: -1;

7.overflow: hidden;

Q12：说下jsonp跨域

jsonp是为了解决同源策导致javascript无法直接发起跨域请求。

jsonp的原理：是利用<script>标签的跨域特性，通过动态创建<script>标签，指向一个跨域的URL，并且在URL的参数中带上一个回调函数的名称。服务器接收到请求后，会将数据包裹在这个回调函数中返回，这样页面就可以通过回调函数获取到数据。

JSONP的优点是简单易用，但也存在一些安全性和可靠性方面的问题，比如无法处理错误，不支持POST请求等。

实现JSONP跨域请求的步骤如下：

1.在客户端定义一个回调函数

2.创建一个<script>标签，并将回调函数作为查询参数附加到URL上

3.服务器端接收请求，读取回调函数名，并返回格式化为该回调函数参数的JSON数据

Q13：声明数组的几种方式

一.静态声明数组

1.使用方括号声明数组

int array[5]

2.指定数组元素的初始值

int array[] = [1,2,3,4,5]

二.动态声明数组

1.使用new关键字动态创建数组

int[]  array = new int[5]

2.使用malloc函数动态分配数组内存

int  *array = (int*)malloc(5 * sizeof(int))

三.多维数组声明

1.使用方括号声明多维数组

int array[3][4]

2.指定多维数组元素的初始值

int array[][3] = {{1,2,3}, {4,5,6}, {7,8,9}}

Q14：javascript声明函数的几种方式

1.函数声明

function myFun(arg1, arg2){
    // 函数体
    return result
}

2.函数表达式

var myFun = function(arg1, arg2) {
    // 函数体
    return result;
}

3.箭头函数

var myFunction = (arg1, arg2) => {
    // 函数体
    return result;
}

4.函数构造器

var myFunction = new Function(arg1, arg2, 'return result')

Q15：普通函数和构造函数的区别

1.写法区别：

  构造函数要求没有返回值类型，而一般函数要求有返回值类型

  构造函数的方法名必须和类名一致，而一般函数的函数名只需要满足其命名规则即可

2.功能区别：

构造函数的功能是创建一个指定类型的新对象，而普通函数的功能是完成特定功能的操作

3.命名区别：

构造函数的命名通常以大写字母开头，而普通函数则可以以大小写字母开头

4.返回值区别：

构造函数没有显式的返回值，而普通函数则可以返回值，用于控制函数的执行流程

5.调用方式区别：

构造函数使用new关键字来调用，而普通函数可以使用函数名或者变量名来调用

6.参数区别：

构造函数的参数的个数可以是任意的，取决于使用者自己的需求，

普通函数的参数要和函数声明的统一

7.抛出异常区别：

构造函数可以抛出一个异常来进行错误处理，普通函数则要明确返回一个唯一的值作为标志

8.内存分配区别：

构造函数可以负责分配内存，也可以负责释放内存，

普通函数只负责运算，不负责内存的处理

Q16：javascript如何添加一个元素

let myArray = [1,2,3]
myArray.push(4)
console.log(myArray)

Q17：原型链

查找对象实例的方法和属性时，先在自身找，找不到则沿着_proto_向上查找，我们把_proto_形成的关系称为原型链