前端面试每日 3+1 (2021.06.06) —— 第782 天

前端面试每日 3+1 —— 第782 天

前端面试中经常会遇到一些看似简单的问题，但回答起来却需要深入的理解和思考。今天我们就来一起学习三个这样的面试题。

1. HTML 画一个显示器的布局

题目：

<div class="monitor">
  <div class="screen"></div>
  <div class="stand"></div>
</div>

使用 CSS 来为这个 HTML 结构添加样式，使它看起来像一个显示器。

答案：

.monitor {
  width: 300px;
  height: 200px;
  border: 1px solid black;
  background-color: #000;
  position: relative;
}

.screen {
  width: 280px;
  height: 180px;
  background-color: #fff;
  position: absolute;
  top: 10px;
  left: 10px;
}

.stand {
  width: 30px;
  height: 20px;
  background-color: #000;
  position: absolute;
  bottom: 0;
  left: 135px;
}

2. CSS 的 auto 是什么意思？

题目：

CSS 中的 auto 是什么意思？它在哪些情况下可以使用？

答案：

auto 是 CSS 中的一个，它表示元素的宽度或高度将自动调整为其父元素的可用空间。

auto 可以用于以下情况：

• 元素的宽度或高度没有指定具体值，例如：

.element {
  width: auto;
  height: auto;
}

• 元素的宽度或高度被设置为 flex 或 grid：

.element {
  display: flex;
  width: auto;
}

.element {
  display: grid;
  height: auto;
}

• 元素的宽度或高度被设置为 fit-content：

.element {
  width: fit-content;
  height: fit-content;
}

3. 页面刷新时，JS 请求哪些地方有缓存处理？

题目：

页面刷新时，JS 请求哪些地方有缓存处理？

答案：

页面刷新时，JS 请求以下地方有缓存处理：

• 浏览器缓存：浏览器会将最近请求过的资源缓存在本地，以便下次请求时可以快速加载。
• CDN 缓存：CDN 是内容分发网络，它可以将资源缓存在全球各地的服务器上，以便用户可以从最近的服务器加载资源。
• 服务端缓存：服务器端也可以将资源缓存在内存或磁盘上，以便下次请求时可以快速返回。

除了这些地方之外，JS 请求还可以在以下情况下被缓存：

• 请求使用了缓存控制头：缓存控制头可以告诉浏览器或服务器是否应该缓存请求的资源。
• 请求使用了 ETag 或 Last-Modified 头：ETag 和 Last-Modified 头可以告诉浏览器或服务器请求的资源是否已经发生变化。