2024年前端最全前端入门篇（三十三）商品列表布局(1)，字节前端面试必问

文末

篇幅有限没有列举更多的前端面试题，小编把整理的前端大厂面试题PDF分享出来，一共有269页

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

css文件：

.seckill-goods ul{

margin-right: -13px;

}

.seckill-goods li {

width: 400px;

height: 190px;

margin-right: 13px;

margin-bottom: 13px;

float: left;

background-color: #ff6700;

}

效果：

此处的商品列表（大框）宽为1226px，

小框宽度是400px，右margin是13px

当小框有border时，为了使一行依然能放下三个小框，可以调整小框宽度为398px（border会包裹小框，相当于左右各占了1px）

css文件：

.seckill-goods ul{

margin-right: -13px;

/增加大框的宽度/

}

.seckill-goods li {

width: 398px;

height: 190px;

margin-right: 13px;

margin-bottom: 13px;

float: left;

border: 1px solid black;

background-color: #ff6700;

}

效果：

margin-right: -13px;用于实现大框宽度的增加，

可以理解为，隐式地减去了第三个框的右margin，

整行的效果像是第三个小框没有右margin一样

与上面的元素对齐：

F12调试图：

1239 = 1226 + 13

简单地将大框的宽度加到1239px，也是同样的效果

如果大小框都有border，可以再调整小框之间的margin值

css文件：

.seckill-goods ul{

border: 1px solid black;

margin-right: -12px;

}

.seckill-goods li {

width: 398px;

height: 190px;

margin-right: 12px;

margin-bottom: 12px;

float: left;

border: 1px solid black;

background-color: #ff6700;

}

效果：此处可以明显地看出来，大框宽度是增加的

总结

我在成长过程中也是一路摸爬滚打，没有任何人的指点，所以走的很艰难。例如在大三的时候，如果有个学长可以阶段性的指点一二，如果有已经工作的师兄可以告诉我工作上需要什么，我应该前面的三年可以缩短一半；后来去面试bat，失败了有5、6次，每次也不知道具体是什么原因，都是靠面试回忆去猜测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道面试记录是多么重要，面试官可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。

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

力。

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

[外链图片转存中…(img-XyscuZGQ-1714994409623)]
[外链图片转存中…(img-j6V9miDY-1714994409624)]