前端每日知识3+1_第16天

• 第16天 (2022-10-06)
  • [html] 元素的alt和title有什么区别？
  • [css] 请描述margin边界叠加是什么及解决方案
  • [js] 返回到顶部的方法有哪些？把其中一个方法出来
  • [软技能] 你在的公司有没有做代码审查（CodeReview）？如果有是怎么做的？如果没有你觉得应该怎么做才更好？做才更好？](https://github.com/haizlin/fe-interview/issues/53)

HTML:

title鼠标悬浮名字
alt图片加载失败显示的内容

CSS:

margin 的边界叠加发生在竖直方向上（左右方向上不会叠加）。兄弟 DOM 节点、父元素中的第一个子节点、以及最后一个尾节点都会产生 margin 边界叠加的现象。由于 CSS 早期主要用在文字、图片排版上，因此上下 margin 的叠加是符合预期效果的。

margin 边界叠加从结果上来看就是以最大的值为准。

<style>
  .b1 {
    width: 100px;
    height: 100px;
    margin-bottom: 30px;
  }
  // 最终两个 div 的 margin 为 40px，以最大的值为准。
  .b2 {
    width: 100px;
    height: 100px;
    margin-bottom: 40px;
  }
</style>

<div class="b1"></div>
<div class="b2"></div>
margin 边界叠加只会出现在普通文档流中，所以可以触发 BFC 来解决。
除此之外，也可以使用 padding 来代替 margin 或者增加 border 的值。

参考文章: 余白が消える margin の相殺って何?回避策を徹底解説

b2 应该是margin-top 吧

JS:

利用 a 标签的锚点。在顶部放一个 a 标签 <a name="top">顶部</a>，在需要回到顶部的位置放置一个 a 标签，地址为 top。 <a href="#top">回到顶部</a>。要做成隐藏的锚点，可以把内部的内容去掉，name 是必须的。

利用 #，在 url 后增加 # 不会让页面刷新，并且可以回到顶部。可以对 location.href 进行设置 location.href += '#'。当这个方法执行多次即有多个 # 时，页面不会有响应。

利用 javascript 设置 scrollTop = 0，一般设置在最外层，即 document.documentElement.scrollTop = 0 就可以返回顶部。