字节跳动-商业化-校招 · 第 1 轮 · 一面

Tue, 02 Sep 2025 07:31:02 +0000

← 已是第一轮 · 返回本次面经 · 第 2 轮 →

本轮要点： 本次面试主要考察前端基础知识、React框架原理、算法能力等多个维度的内容。重点关注CSS布局、页面性能优化、React核心概念等方面。

本轮共 18 道题。答案默认折叠，便于先自行作答。

1. 如何实现一个宽高自适应的正方形元素？

题目要点

CSS布局技巧和响应式设计能力
百分比单位在CSS中的特殊性质理解
现代CSS新特性的应用能力

参考答案

1.1 原理说明

实现宽高自适应的正方形元素的核心在于确保元素的高度能够根据其宽度以1:1的比例进行等比缩放。这通常通过利用CSS中某些属性的特殊计算方式来实现，或者通过现代CSS特性直接声明。以下是几种常见方案的核心原理：

使用padding-top/padding-bottom百分比：在CSS盒模型中，padding属性的百分比值是相对于父元素的宽度来计算的，即使是padding-top和padding-bottom也是如此。因此，当我们将一个元素的height设为0，并将padding-top或padding-bottom设为100%时，它的高度实际上会等于其父元素的宽度，从而形成一个完美的正方形（假设其宽度也为100%）。这种方法利用了这一特性来"撑开"元素的高度。
使用aspect-ratio（现代浏览器支持）：aspect-ratio是CSS的一个新属性，它允许开发者直接指定一个元素的宽高比，浏览器会根据这个比率自动计算元素的尺寸。例如，aspect-ratio: 1/1会强制元素保持1:1的正方形比例。这是一个更语义化、更现代的解决方案，减少了传统方法的 hackiness。
使用vw单位：vw（viewport width）是一个相对单位，1vw等于视口宽度的1%。通过将元素的width和height都设置为相同的vw值，例如50vw，可以确保它们始终保持相等的尺寸，并随着视口宽度的变化而自适应缩放，从而形成正方形。

这些方案各有优缺点，如兼容性、代码语义性等，选择哪种方案取决于具体的项目需求和目标浏览器环境。

1.2 核心用法 + 示例代码

在实际开发中，这些方案可以根据兼容性需求和代码简洁性进行选择。

方案1：使用padding-top/padding-bottom百分比 这种方法兼容性好，几乎所有浏览器都支持。常用于需要兼容旧版浏览器或在图片、视频容器中保持比例的场景。

.square {
 width: 100%; /* 宽度可以设置为百分比、固定值或vw等 */
 height: 0;
 padding-top: 100%; /* padding百分比相对于父元素宽度计算，确保高度与宽度相等 */
 background: #eee;
 /* 内部内容可以通过绝对定位放置，以避免被padding挤压 */
 position: relative;
}

.square-content {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 display: flex;
 justify-content: center;
 align-items: center;
 color: #333;
}

HTML结构示例:

<div class="square">
 <div class="square-content">
 自适应正方形
 </div>
</div>

方案2：使用aspect-ratio（现代浏览器支持） 这是CSS3新增的属性，语义化最好，代码最简洁。适用于现代浏览器环境，是推荐的首选方案。

字节跳动-商业化-校招 · 第 2 轮 · 二面

Tue, 02 Sep 2025 07:31:02 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

本轮要点： 本次面试主要考察前端基础（CSS布局、JavaScript原型链）、React框架深入理解（虚拟DOM、性能优化）、设计模式应用以及算法能力。

本轮共 13 道题。答案默认折叠，便于先自行作答。

1. 实现一个三栏布局，左右两侧固定宽度，中间区域自适应

题目要点

面试官出这道题主要想确认哪些知识维度？
- 考生对CSS布局（如Flexbox, Grid, 浮动, 定位, 表格布局等）的掌握程度。
- 考生如何处理不同元素之间的空间分配和自适应能力。
该题所考知识点中有哪些高频实际应用点？
- 页面整体布局，如经典后台管理系统布局（侧边栏固定，内容区自适应）。
- 组件内部布局，如卡片、列表项中固定图标/按钮，内容区域自适应。

参考答案

1.1 原理说明 三栏布局是一种常见的网页布局方式，其核心在于实现左右两边固定宽度，中间内容区域根据可用空间自适应。这要求布局方案能够灵活处理流体宽度和固定宽度元素的共存，并且能够正确处理元素之间的堆叠和清除浮动等问题。不同的CSS布局技术提供了不同的实现原理和特性，选择合适的方案取决于兼容性要求、布局复杂度和维护成本。

1.2 核心用法 + 示例代码 以下是几种实现三栏布局的常见方法，并说明其原理和适用场景：

1.2.1 Flexbox 布局

原理： Flexbox (弹性盒子) 是一种一维布局模式，它在父容器中管理子项的分布和对齐。通过设置主轴和交叉轴，可以非常灵活地控制子元素的排列。
使用场景： 现代浏览器环境下的首选布局方式，适用于需要灵活对齐、空间分配的场景。

示例代码：

<div class="container-flex">
 <div class="left">Left</div>
 <div class="center">Center</div>
 <div class="right">Right</div>
</div>

.container-flex {
 display: flex; /* 开启Flex布局 */
}
.left, .right {
 width: 200px; /* 左右固定宽度 */
 flex-shrink: 0; /* 防止收缩 */
}
.center {
 flex-grow: 1; /* 中间区域自适应，占据剩余空间 */
}

优势： 代码简洁，语义化好，对齐和分配空间非常方便。

1.2.2 Grid 布局

字节跳动-商业化-校招 on Last Stand

字节跳动-商业化-校招 · 第 1 轮 · 一面

1. 如何实现一个宽高自适应的正方形元素？

题目要点

1.1 原理说明

1.2 核心用法 + 示例代码

字节跳动-商业化-校招 · 第 2 轮 · 二面

1. 实现一个三栏布局，左右两侧固定宽度，中间区域自适应

题目要点