前端开发：CSS布局技巧与JS深度克隆解析-优快云博客

43 html

题目：如何让元素固定底部 - 无滚动条时在页面底部，有滚动条时被内容撑开在底部
答案：

.content {
display: flex;
flex-direction: column;
}
.header {
flex-grow: 0;
}
.content {
flex-grow: 1;
}
.footer {
flex-grow: 0;
}

css

题目：span和span之间的空白间隙产生原因，如何解决
答案：
=原因：行内元素排版时，浏览器会把行内元素之间的空白符（比如空格换行）解析成一个空白字符，这个空白字符受font-size大小的影响；而一般编码习惯是一对span标签占据一行，第二个就会换行，由于换行导致的间隙。
=解决：
1、不要换行（不科学）
2、套上一层父元素的font-size设置为0，子元素的font-size再设置实际大小
3、使用flex布局
4、使用float布局

js

题目：jquery原理
答案：
一个js库，封装了许多js方法；常用的一般是dom元素操作和ajax。

44 html

题目：video标签的预加载功能的属性
答案：preload；如果有autoplay属性，则该属性会被忽略

css

题目：手写一个满屏品字布局方案
答案：

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="UTF-8">
  <style>
    html,
    body {
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
    }

    .box {
      width: 100%;
      height: 100%;
      background-color: lightblue;
    }

    .top {
      width: 50%;
      height: 50%;
      margin: auto;
      background-color: lightgoldenrodyellow;
    }

    .bottom {
      display: flex;
      width: 100%;
      height: 50%;
    }

    .left {
      width: 50%;
      height: 100%;
      background-color: lightpink;
    }

    .right {
      width: 50%;
      height: 100%;
      background-color: lightsalmon;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="top"></div>
    <div class="bottom">
      <div class="left"></div>
      <div class="right"></div>
    </div>
  </div>
</body>

</html>

js

题目：实现深度克隆
答案：
1、对一维数组
target = […source] 或 target = Array.from(source)
2、对只包含数据的对象
target = JSON.parse(JSON.stringify(source))
3、对复杂类型数据
递归

// 实现深度克隆
function deepClone(source) {
  let target = typeof source === 'object' ? {} : [];
  for (const key in source) {
    if (source.hasOwnProperty(key)) {
      if (typeof source[key] === 'object') {
        target[key] = deepClone(source[key]);
      } else {
        target[key] = source[key];
      }
    }
    return target;
  }
}

其它

题目：对http、https、http2的理解
答案：
1、http；超文本传输协议；无状态，即请求一次连接一次，请求结束后连接立即断开，再次请求要重新连接
2、https；安全版的http；https = http + 加密 + 认证 + 完整性保护
3、http2；升级版的http；连接一次可请求多次，支持多路复用、服务器推送等。