2024年Web前端最新前端提高篇（四十）CSS3练习1：瀑布流效果，html5移动web开发实战

最后

四轮技术面+一轮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)]