最后
四轮技术面+一轮hr面结束,学习到了不少,面试也是一个学习检测自己的过程,面试前大概复习了 一周的时间,把以前的代码看了一下,字节跳动比较注重算法,面试前刷了下leetcode和剑指offer, 也刷了些在牛客网上的面经。大概就说这些了,写代码去了~
祝大家都能收获大厂offer~
篇幅有限,仅展示部分内容
body,ul,li {
margin: 0;
padding: 0;
list-style: none;
}
ul {
column-width: 300px;
margin: 30px 20px;
column-gap: 10px;
}
li {
display: inline-block;
width: 300px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 10px;
margin: 10px 5px;
}
img {
width: 100%;
}
1.首先要将不需要的默认margin和padding设为0,把li的点去掉
2.先在ul和li设置border,方便看效果,li用IE6混杂盒模型,并将border加上圆角样式
把li设置成行级块元素,指定宽度,
这时的效果是这样的:图片一行行显示,但底部平齐,由于图片大小不一致,所以li上方可能空白
3.如果设置float脱离文档流,需要用position来为每一张图片定位,来实现每列上一张与下一张间隔固定的效果,但浏览器缩小宽度时,图片的位置是会改变的,因此,无法使用这个方案
4.使用columns布局,让图片自动跟着上一张走
5.在ul设置column-width,如果图片之间相互重叠,检查一下column-width是不是小于li的width
6.ul设置column-gap,但这个案例中图片是定宽,不像之前的案例那样,是可以随意修改每列的宽度的(之前的案例是文字,若指定了column-width,大于这个值即可;若设置column-count,宽度可调节的空间就很大了),
若只设置gap,当浏览器缩小宽度到一定程度时,有时捕捉不是那么灵敏,列数不会减少
此处gap设置50px,但图中箭头所指的地方,很明显没有50px
为了解决这个问题,我们可以在li上设置左右margin,确保左右图片的间隔
结尾
正式学习前端大概 3 年多了,很早就想整理这个书单了,因为常常会有朋友问,前端该如何学习,学习前端该看哪些书,我就讲讲我学习的道路中看的一些书,虽然整理的书不多,但是每一本都是那种看一本就秒不绝口的感觉。
以下大部分是我看过的,或者说身边的人推荐的书籍,每一本我都有些相关的推荐语,如果你有看到更好的书欢迎推荐呀。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**
[外链图片转存中…(img-BaUMMtSa-1714961576957)]