html5与css常规面试技术题库

html5与css常规面试技术题库

1. CSS 里面有哪些相对单位？都是相对什么的？

答：REM,EM,VW,VH 等

REM：相对于根节点 html 的 font-size

EM：父节点的 font-size

VW：视口的宽度为 100VW，相对于把视口分为 100 份。

VH：视口高度为 100VH，同理

以上单位都可以在移动端做页面适配，但通常使用 REM 和 VW

2. fixed 是相对于谁定位的？如果加上 transform 会出现问题吗？

答：fixed 定位相对于浏览器视口来定位的

添加上 transform 以后，fixed 定位会失效（现在这个 bug 已经不存在啦！

）。如果 fixed 元素的祖先有 transform 属性,则 fixed 元素会相对与这个祖先计算,而不是视口（问题

还在）。

3.为什么不推荐用 style 内联元素？内联元素有什么缺点？（css 文件可以缓存）

答：首先是 style 是节点的属性，不能被缓存；代码的可读性和可维护性相对弱一些，特别是多人

协作开发的时候。但是如果一个页面的 style 样式足够少的时候，可以使用 style 元素，因为一次请

求最多携带 14K 的数据，如果足够小，还可以节约一次请求。

4.简单描述 http 或 https 协议，以及为什么要三次握手？什么是长链接

答：http（https）是超文本传输协议，基于 TCP 请求与相应的模式，无状态的，是目前主流的

web 传输协议。一般包含请求头，请求体，响应头等

目前 http 协议已经发展到 2.0 阶段，支持长链接 Connection: keep-alive，断点续传，

cache 缓存策略，多路复用，服务器推送等。

https 相对于 http 更安全，增加了证书 SSL 加密，端口是 433。

三次握手其实就是三次网络连接，客户端携带 SYN=1,Seq = x 信息给服务端，服务端接受到后，

服务端就知道了，有一个客户端要链接我，然后服务器就会开启一个 TCP socket 的端口，然后返回

数据给前端也是 SYN=1,SEQ=Y,ACK = x+1，客户端接受到后，在发一个 seq，和 ACK+1.主要是为了

防止开启无用的链接，或者网络延迟丢包，服务器无法确定到底客户端有没有收到消息

在使用长连接的情况下，当一个网页打开完成后，客户端和服务器之间用于传输 HTTP 数据的

TCP 连接不会关闭，客户端再次访问这个服务器时，会继续使用这一条已经建立的连接。

Keep-Alive 不会永久保持连接，它有一个保持时间，可以在不同的服务器软件（如 Apache）中

设定这个时间。实现长连接需要客户端和服务端都支持长连接。

为何需要长链接?长连接可以省去较多的 TCP 建立和关闭的操作，减少浪费，节约时间。

5. http 常见状态码有哪些？301 和 302 的区别是什么？304 是指什么？

答： 404：找不到资源；

500：服务器内部错误；

200：请求成功，并返回数据；

301：永久重定向；

302： 临时移动，可使用原有 URI；

304：资源未修改，可使用缓存；

400：请求语法错误（一般为参数错误）；

403：没有权限访问。。。等