2025高频前端面试题（含答案）

一、简单页面

1、CSS选择器样式优先级
2、CSS实现三列布局（左右固定宽度，中间自适应）
在 CSS 中，实现一个三列布局，其中左右两列宽度固定，中间列自适应，通常使用 flexbox 或者 grid 布局可以轻松完成。这里分别给出两种方法：

方法一：Flexbox布局

.container {
   
  display: flex;
}

.column-left {
   
  width: 200px; /* 左侧固定宽度 */
  background: #f1f1f1;
}

.column-right {
   
  width: 200px; /* 右侧固定宽度 */
  background: #f1f1f1;
}

.column-middle {
   
  flex: 1; /* 中间自适应，占用剩余空间 */
  background: #ffffff;
}

HTML 示例：

<div class="container">
  <div class="column-left">左侧栏</div>
  <div class="column-middle">中间栏</div>
  <div class="column-right">右侧栏</div>
</div>

方法二：Grid布局

.container {
   
  display: grid;
  grid-template-columns: 200px auto 200px; /* 左右固定，中间自适应 */
}

.column-left {
   
  background: #f1f1f1;
}

.column-right {
   
  background: #f1f1f1;
}

.column-middle {
   
  background: #ffffff;
}

HTML 示例：

<div class="container">
  <div class="column-left">左侧栏</div>
  <div class="column-middle">中间栏</div>
  <div class="column-right"