佛系前端面试题记录--第四周

1.display:none和visibility:hidden的区别？
2.什么是 web 语义化,有什么好处
3.display,float,position 的关系
4.如何创建块级格式化上下文(block formatting context),BFC 有什么用
5.javascript 有哪几种方法定义函数
6.相等运算符( == )和等同运算符判断流程( === )
7.解释css sprites ，如何使用？
8.常见的HTTP状态码
9.从浏览器地址栏输入url到显示页面的步骤
10.stacking context,布局规则
11.null和undefined的区别

1.display:none和visibility:hidden的区别？

visibility:hidden，使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值。
display:none，使用该属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”。

1.visibility具有继承性，其子元素也会继承此属性，若设置visibility:visible，则子元素会显示
2.visibility不会影响计数器的计算，虽然隐藏掉了，但是计数器依然继续运行着。
3.在css3的transition中支持visibility属性，但是不支持display，因为transition可以延迟执行，因此配合visibility使用纯css实现hover延时显示效果可以提高用户体验
4. display:none会引起回流(重排)和重绘 visibility:hidden会引起重绘

2.什么是 web 语义化,有什么好处

即html结构中用相对应的，有一定语义的英文字母（标签）表示。
语义化的优点：易阅读，方便解析，易于维护。
例如：<header> <main> <footer>等。
如何判断自己的html是否语义化：除去css样式，页面也能很好的展现出内容结构。

3.display,float,position 的关系

如果display的值为none，那么后两者就不会产生作用，也不会有任何的盒子产生；
除此之外，如果元素为absolute或者fixed定位，那么float的属性值相当于‘none’，display的属性如下面的表格所示。盒的位置根据“top”，“right”，“bottom”和“left”属性与盒的包含块决定。
如果float属性的值为不是none，那么元素将会浮动，元素的display属性将如下表所示；
如果元素是根元素，那么元素的属性如下表所示；否则元素的display属性则根据设定来取值。

4.如何创建块级格式化上下文(block formatting context),BFC 有什么用

BFC是一个独立的布局环境，BFC中的元素的布局是不受外界的影响（我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。）

触发BFC的条件：
浮动元素，float 除 none 以外的值
绝对定位元素，position（absolute，fixed）
display 为以下其中之一的值inline-block, table-cell, table-caption, flex,inline-flex
overflow 除了 visible 以外的值（hidden，auto，scroll）

应用一：解决浮动塌陷

父元素由于包含了浮动元素，但本身没有设置高度，所以踏缩为零。

解决方案：

应用二：自适应两栏布局

如果想要黑色部分跳出红色的包裹，实现跟随浏览器宽度自适应的两栏布局，可以运用BFC布局。

5.javascript 有哪几种方法定义函数

1、使用function关键字定义函数 – 具有优先级，优先将function关键字定义的函数优先执行

function functionName(arg0, arg1 ,…, argN){

statements

}

函数的调用：functionName()

2、使用函数表达式的形式定义函数（即将匿名函数复制给变量）

var variable = function(arg0, arg1 ,…, argN){

statements

}

console.log(typeof variable); //function

函数调用：variable();

3、使用new Function构造函数定义函数

var variable = new Function(‘name’,‘alert(“hello,”+name)’); //最末尾的是函数体，其前面的都是参数

console.log(typeof variable); //function

函数调用：variable(‘world’);

注意：

（1）使用fucntion关键字定义的函数，函数一旦声明，允许任意调用（在函数定义前、函数定义后、函数内部，可以在任意位置调用）

（2）使用函数表达式、new Function构造函数定义的函数，不能在函数定义前使用

6.相等运算符( == )和等同运算符判断流程( === )

下面的规则用于判定===运算符比较的两个值是否完全相等：

如果两个值的类型不同，它们就不相同。
如果两个值的类型是数字，而且值相同，那么除非其中一个或者两个都是NaN(这种情况它们不是等同的)，否则他们是等同的。值NaN永远不会与其他的任何值等同，包括它自身。
如果两个值都是字符串，而且在串中的同一位置上的字符完全相同，那么它们就完全等同。如果字符串的长度或内容不同，它们就不是等同的。
如果两个值都是布尔值true，或者两个值都是布尔值false,那么它们等同。
如果两个值引用的是同一个对象，数组或函数，那么它们完全等同。如果它们引用的是不同的对象(数组或函数),它们就不完全等同，即使这两个对象具有完全相同的属性或两个数组具有完全相同的元素。
如果两个值都是null或都是undefined，它们完全相同。

下面的规则用于判定==运算符比较的两个值是否相等：

如果两个值具有相同的类型，那么就检测它们的等同性。如果这两个值完全相同，它们就相等。如果它们不完全相同，则它们不相等。
如果两个值的类型不同，它们仍然可能相等。用下面的规则和类型转换来检测它们的相等性：

1.如果一个值是null,另一个值是undefined,它们相等。
2.如果一个值是数字，另一个值是字符串，把字符串转换为数字，再用转换后的值进行比较。
3.如果一个值是true，将它转换成1，再进行比较。如果一个值为false，把它转换成0，再进行比较。
4.如果一个值是对象，另一个值是数字或者字符串，将对象转换成原始类型的值，再进行比较。
5.其他的数值组合是不相等的

7.解释css sprites ，如何使用？

即雪碧图。是一种网页图片应用处理方式，就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位。

其优点在于：

减少网页的http请求，提高性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
减少图片的字节：多张图片合并成1张图片的字节小于多张图片的字节总和；
减少了命名困扰：只需对一张集合的图片命名，不需要对每一个小元素进行命名提高制作效率；
更换风格方便：只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变，维护起来更加方便。

诚然CSS Sprites是如此的强大，但是也存在一些不可忽视的缺点：

图片合成比较麻烦；
背景设置时，需要得到每一个背景单元的精确位置；
维护合成图片时，最好只是往下加图片，而不要更改已有图片。

8.常见的HTTP状态码

1XX：信息状态码
- 100 Continue 继续，一般在发送post请求时，已发送了http
  header之后服务端将返回此信息，表示确认，之后发送具体参数信息
2XX：成功状态码
- 200 OK 正常返回信息
- 201 Created 请求成功并且服务器创建了新的资源
- 202 Accepted 服务器已接受请求，但尚未处理
3XX：重定向
- 301 Moved Permanently 请求的网页已永久移动到新位置。
- 302 Found 临时性重定向。
- 303 See Other 临时性重定向，且总是使用 GET 请求新的 URI。
- 304 Not Modified 自从上次请求后，请求的网页未修改过。
4XX：客户端错误
- 400 Bad Request 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。
- 401 Unauthorized 请求未授权。
- 403 Forbidden 禁止访问。
- 404 Not Found 找不到如何与 URI 相匹配的资源。
5XX: 服务器错误
- 500 Internal Server Error 最常见的服务器端错误。
- 503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）。

9.从浏览器地址栏输入url到显示页面的步骤

浏览器根据请求的URL交给DNS域名解析，找到真实IP，向服务器发起请求；
服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、JS、CSS、图象等）；
浏览器对加载到的资源（HTML、JS、CSS等）进行语法解析，建立相应的内部数据结构（如HTML的DOM）；
载入解析到的资源文件，渲染页面，完成。

10.stacking context,布局规则

层叠上下文【stacking context】
对于stacking context，在MDN中的描述是

层叠上下文是HTML元素的三维概念，这些HTML元素在一条假想的相对于面向（电脑屏幕的）视窗或者网页的用户的 z 轴上延伸，HTML 元素依据其自身属性按照优先级顺序占用层叠上下文的空间。
z轴即用户与屏幕间看不见的垂直线。

简单来说，层叠上下文就是元素对于用户在z轴上的远近。

层叠水平【stacking level】
层叠水平顺序决定了同一个层叠上下文中元素在z轴上的显示顺序

层叠顺序【stacking order】

W3C给出的顺序：

1.形成层叠上下文环境的元素的背景与边框
2.拥有负 z-index 的子堆叠上下文元素（负的越高越堆叠层级越低）
3.正常流式布局，非 inline-block，无 position 定位（static除外）的子元素
4.无 position 定位（static除外）的 float 浮动元素
5.正常流式布局， inline-block元素，无 position 定位（static除外）的子元素（包括 display:table 和 display:inline ）
6.拥有 z-index:0 的子堆叠上下文元素
7.拥有正 z-index: 的子堆叠上下文元素（正的越低越堆叠层级越低）

层叠准则：

层叠上下文的水平比普通元素高。
当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素。
层叠上下文内部嵌套的子元素均受父元素影响。
层叠上下文不会影响兄弟元素，只会影响后代元素。
在同一层叠水平上时，有明显的z-index值，则值越大，谁在上。
使用了css3属性的时候，层叠顺序是跟z-index:auto/z-index:0是一样的，当他们发生层叠的时候，遵循的是“后来居上”准则。

demo例子

<div class="one">one —— z-index为负值</div>
<div class="two">two —— block块状水平盒子</div>
<div class="three">three —— 浮动盒子</div>
<div class="four">four —— inline/inline-block水平盒子</div>
<div class="five">five —— z-index:auto/z-index:0</div>
<div class="six">six —— z-index为正值</div>

.one,.two,.three,.four,.five,.six{width: 200px;height: 200px;
}
.one{position: absolute;z-index: -1;background: #8874c1;
}
.two{background: #4f6fc1;margin-left: 100px;
}
.three{float: left;background: #51cd8d;margin-top: -100px;
}
.four{display: inline-block;background: #9cd262;margin-left: -100px;
}
.five{position: absolute;background: #d9ac4c;margin-top: -130px;margin-left: 50px;
}
.six{position: absolute;z-index: 1;background: #d93953;margin-top: -50px;margin-left: 150px;
}

当使用了css3属性之后的7阶层叠顺序：

<!DOCTYPE html>
<html>
<head><title></title>
</head>
<body>
<div class="one">one —— z-index为负值</div>
<div class="two">two —— block块状水平盒子</div>
<div class="three">three —— 浮动盒子</div>
<div class="four">four —— inline/inline-block水平盒子</div>
<div class="five">five —— z-index:auto/z-index:0</div>
<div class="five-2">opacity</div>
<div class="five-3">transform</div>
<div class="five-4">mix-blend-mode</div>
<div class="five-5">filter</div>
<div class="five-6">isolation:isolate</div>
<div class="five-7">will-change</div>
<div class="five-1"><div class="five-1-sub">flex子元素</div>
</div>
<div class="six">six —— z-index为正值</div>
</body>
<style type="text/css">.one, .two, .three,
.four, .five,.six {width: 200px;height: 100px;
}
.one {position: absolute;z-index: -1;background: #8874c1;
}
.two {background: #4f6fc1;margin-left: 100px;
}
.three {float: left;background: #51cd8d;margin-top: -50px;
}
.four {display: inline-block;background: #9cd262;margin-left: -100px;margin-top: -30px;
}
.five {position: absolute;background: #d9ac4c;margin-top: -60px;margin-left: 50px;
}
.six {position: absolute;z-index: 1;background: #d93953;margin-top: -100px;margin-left: 100px;
}
.five-1,.five-2, .five-3,
.five-4,.five-5,.five-6,
.five-7 {width: 200px;height: 100px;
}
.five-1 {display: flex;margin-top: -20px;background: pink;
}
.five-1-sub {background: blueviolet;z-index: 1;
}
.five-2{opacity: 0.9;background: red;margin-top: -15px;
}
.five-3 {transform: rotate(15deg);background: #8484f1;margin-top: -30px;
}
.five-4 {mix-blend-mode: darken;background: #ec57f9;margin-top: -50px;
}
.five-5 {filter: blur(1px);background: #3a64d4;margin-top: -40px;
}
.five-6 {isolation: isolate;background: #b18017;margin-top: -40px;
}
.five-7 {background: #73c1bc;will-change: transform;margin-top: -40px;
}
</style>
</html>

效果图：可以明显看出，css3属性造成的层叠上下文跟z-index:auto同一个层级，并且遵循“后来居上”原则

3.当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素。

<div class="one">one<div class="one-sub">one-sub</div>
</div>
<div class="two">two
</div>

.one,.two,.one-sub{width: 200px;height: 200px;
}
.one{position: absolute;z-index: 5;background: red;
}
.one-sub{position: absolute;z-index: 100; // 设多高都没用background: purple;
}
.two{position: absolute;left: 100px;z-index: 5;background: orange;
}

效果图：可以看到同层级的 two 是覆盖了 one 的，而one中的子元素one-sub无论z-index层级设置多高，都是无法覆盖 two 的

4.处于层叠上下文内部嵌套的子元素均受父元素影响。

<div class="one"><div class="two">two</div><div class="three">three</div>
</div>

.one{position: absolute;background: red;width: 400px;height: 200px;/* z-index: 100; */  // 不加效果为图一，加了效果为图二
}
.two{position: absolute;z-index: 2;width: 200px;height: 200px;background: orange;
}
.three{position: absolute;z-index: -1;width: 200px;height: 400px;left: 100px;background: plum;}

效果图：图一：one仅仅设置了position:absolute/relative; 没有设置z-index值的时候，z-index:默认为auto;此时不会创建层叠上下文。所以此时one是普通元素，比它的子元素three的层级要高
图二：当one设置了层级之后，此时one已经创建了层叠上下文，此时one里面的子元素受制one，意思就是，one的子元素层级永远比one要高。

作者：YanniLi
链接：https://www.jianshu.com/p/8645b29f96b6
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

11.null和undefined的区别

null表示没有对象，即该处不应该有值

1）作为函数的参数，表示该函数的参数不是对象

2）作为对象原型链的终点

undefined表示缺少值，即此处应该有值，但没有定义

1）定义了形参，没有传实参，显示undefined

2）对象属性名不存在时，显示undefined

3）函数没有写返回值，即没有写return，拿到的是undefined

4）写了return，但没有赋值，拿到的是undefined

null和undefined转换成number数据类型时

null默认转成 0

undefined默认转成 NaN