前端经典面试题合集, 有哪些常见的 CSS 布局?

Step 1

Q:: 什么是 Flexbox 布局？

A:: Flexbox 是一种一维布局模型，它使得在容器中排列项目变得简单和高效。使用 Flexbox，可以轻松地水平和垂直对齐项目，并分配剩余的空间。

Step 2

Q:: Flexbox 布局中的主轴和交叉轴是什么？

A:: 在 Flexbox 布局中，主轴是沿着 flex 容器主方向的轴，默认是水平的。交叉轴是垂直于主轴的轴。项目的排列方向取决于主轴方向。

Step 3

Q:: 如何使用 CSS Grid 布局？

A:: CSS Grid 是一种二维布局系统，它允许在行和列上排列项目。使用 grid-template-columns 和 grid-template-rows 可以定义网格，使用 grid-column 和 grid-row 可以定位项目。

Step 4

Q:: CSS Grid 和 Flexbox 的主要区别是什么？

A:: Flexbox 主要用于一维布局（行或列），而 Grid 则用于二维布局（行和列）。Flexbox 更适合对齐和分配空间，Grid 更适合创建复杂的布局结构。

Step 5

Q:: 如何实现响应式布局？

A:: 响应式布局可以通过使用媒体查询来实现，根据设备的宽度、分辨率等属性来调整样式。例如：使用 @media (max-width: 600px) { ... } 可以针对小屏幕设备应用特定样式。

Step 6

Q:: 如何实现一个固定宽高比的盒子？

A:: 可以使用 padding 技巧来实现固定宽高比的盒子。例如，设置一个元素的宽度为 100%，然后设置它的 padding-bottom 为 50%，可以创建一个 2:1 的宽高比盒子。