- 第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 就可以返回顶部。