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

QA

Step 1

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

A:: 可以使用以下两种方法之一来实现： 1. 利用 padding``:

 
.square {
  width: 100%;
  padding-top: 100%; /* 或者 padding-bottom: 100%; */
  position: relative;
}
.square-inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

这种方法利用了 padding 的百分比是相对于父元素的宽度的特性。

2. 利用 aspect-ratio 属性:

 
.square {
  width: 100%;
  aspect-ratio: 1 / 1;
}

这种方法更为简洁，直接设置长宽比为 1:1。

Step 2

Q:: CSS 中的 position 属性有哪些值，它们分别代表什么含义？

A:: position 属性有五个值： 1. static``: 默认值，元素根据正常的文档流进行定位。 2. relative``: 相对定位，相对于其正常位置进行偏移。 3. absolute``: 绝对定位，相对于最近的已定位祖先元素进行定位，如果没有已定位祖先，则相对于初始包含块（即 html 元素）。 4. fixed``: 固定定位，相对于浏览器窗口进行定位。 5. sticky``: 粘性定位，元素在跨越特定阈值时从相对定位变为固定定位。

Step 3

Q:: 如何实现一个响应式的导航栏？

A:: 可以使用媒体查询来实现响应式导航栏。例如：

 
<nav class="navbar">
  <div class="nav-logo">Logo</div>
  <ul class="nav-links">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

 
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}
.nav-links {
  display: flex;
  list-style: none;
}
.nav-links li {
  margin-left: 1rem;
}
@media (max-width: 768px) {
  .nav-links {
    display: none;
  }
}

在较小的屏幕上隐藏导航链接，并使用 JavaScript 实现移动设备上的导航切换。

用途

这些问题主要是为了评估候选人对 CSS 基础和布局技巧的掌握情况。在实际生产环境中，实现自适应设计和响应式布局是前端开发的常见需求，能够确保应用在不同设备和屏幕尺寸上都能有良好的表现。了解 `position` 属性则是布局和元素定位的基本功，能够帮助开发者解决各种复杂的布局问题。\n

相关问题

🦆

如何使用 CSS Grid 实现复杂的网页布局?▷

可以使用 grid-template-columns 和 grid-template-rows 属性来定义网格布局。例如：

 
div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
}
div > div {
  border: 1px solid black;
}

🦆

如何使用 Flexbox 创建一个垂直居中的布局?▷

可以使用 align-items 和 justify-content 属性。例如：

 
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.child {
  width: 50%;
  height: 50%;
  background-color: lightblue;
}

🦆

CSS 预处理器如 SASS 或 LESS有哪些优势?▷

CSS 预处理器提供了变量、嵌套规则、混合、继承等高级功能，使得 CSS 更加模块化和可维护。例如：

 
$primary-color: #333;
body {
  color: $primary-color;
}

🦆

如何使用媒体查询来实现响应式设计?▷

媒体查询可以根据不同的屏幕尺寸应用不同的样式。例如：

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

DNS预解析是什么？怎么实现？有哪些常见的 CSS 布局