2024年前端最全前端提高篇（四十）CSS3练习1：瀑布流效果(2)，2024必看-前端高级面试题总结

前端框架

前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。

以 Vue 为例，我整理了如下的面试题。

如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

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，确保左右图片的间隔

7.对于上一张图片的margin-bottom和下一张图片的margin-top有塌陷的情况（margin的左右没有塌陷的情况），但我们在ul设置了border，就解决了这个问题，如果此处上下margin设置10px，间隔就会是20px，如果没有设置border，还是想要间隔20px，就在li的上下margin设置20px即可

最后

正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

ps://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

[外链图片转存中…(img-3g9gQVV4-1715527147524)]