前端经典面试题合集, 怎么用 CSS 实现一个宽高自适应的正方形?

QA

Step 1

Q:: 怎么用 CSS 实现一个宽高自适应的正方形？

A:: 可以通过设置元素的宽度（width）为一个百分比值，然后使用 CSS 的 padding-bottom 属性来实现正方形。因为 padding-bottom 是相对于元素的宽度计算的，所以可以确保宽高相等。例如：

 
.square {
  width: 50%;
  padding-bottom: 50%;
  background-color: #ccc;
}

这段代码中，元素的宽度是父容器宽度的 50%，padding-bottom 也设置为 50%，这样就形成了一个宽高自适应的正方形。

Step 2

Q:: 为什么要使用 padding-bottom 来实现正方形？

A:: 因为 padding-bottom 是根据元素的宽度计算的，不会受父元素高度的影响，因此可以保证宽高始终相等。这种方法的优点是可以实现响应式设计，无论窗口大小如何变化，正方形始终保持形状不变。

Step 3

Q:: 使用 CSS Grid 或 Flexbox 可以实现自适应正方形吗？

A:: 可以。使用 CSS Grid 可以通过定义网格项的比例来实现。例如：

 
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}
.grid-item {
  width: 100%;
  padding-bottom: 100%;
}

使用 Flexbox 也可以通过 flex-grow 和设置宽高比来实现：

 
.flex-container {
  display: flex;
  flex-wrap: wrap;
}
.flex-item {
  flex: 1 1 50%;
  padding-bottom: 50%;
}

用途

这个面试题考察候选人对 CSS 布局的理解，尤其是响应式设计的能力。在实际生产环境中，开发者常常需要创建自适应的 UI 元素，例如图标、按钮或其他界面组件，以确保在不同设备和屏幕尺寸下都能良好显示。这类技术能够提高页面的适应性和用户体验。\n

相关问题

🦆

解释一下 CSS 中的 box-sizing 属性及其用途▷

box-sizing 属性用于定义元素的宽度和高度如何计算。默认值是 content-box，宽高仅包括内容区域；设置为 border-box 后，宽高包括内容、内边距和边框。使用 border-box 可以更容易控制元素的大小，尤其在涉及到内边距和边框时。

🦆

什么是 CSS 媒体查询?如何使用?▷

CSS 媒体查询用于根据不同的设备特性（如屏幕宽度、高度、分辨率）应用不同的样式。使用方法是通过 @media 规则，例如：

 
@media (max-width: 600px) {
  .container {
    flex-direction: column;
  }
}

这样可以在屏幕宽度小于 600px 时，改变 .container 的布局方向。

🦆

介绍一下 CSS Flexbox 布局模型及其应用▷

Flexbox 是一种一维布局模型，适用于需要按行或列对齐项目的场景。主要属性包括 display: flex、flex-direction、justify-content、align-items 等。它可以简化复杂的布局，实现自适应和对齐，常用于导航栏、卡片布局等。

🦆

解释 CSS Grid 布局及其优缺点▷

CSS Grid 是一种二维布局模型，可以在行和列上对齐项目。主要属性有 grid-template-columns、grid-template-rows、grid-area 等。优点是可以创建复杂的布局，灵活性高；缺点是语法较复杂，不支持 IE11 以下的浏览器。

SPA（单页应用）首屏加载速度慢怎么解决？说说你对 TypeScript 的理解与 JavaScript 的区别