那些被问到词穷的--前端面试题汇总(CSS)

gongzemin
121 阅读10分钟

近期参加了几场面试，做一下面试题汇总，面试题主要分为下面几大类。

分类提问点/技术
1. CSS响应式设计、CSS3、怎么实现9宫格
2. JavaScriptES6+, Promises, DOM操作、数组方法、怎么根据id去重对象数组、怎么处理大文件上传
3. TypeScript泛型、interface和type的区别、装饰器、合并类型的方法、枚举类型
4. VueVue2、Vue3、diff算法、路由勾子、响应式原理、性能优化、自定义指令、组件通信
5. 打包工具Vite, Webpack, 热模块更新、 是否写过插件
6. 网络知识HTTP/HTTPS, TCP/IP, CORS, WebSockets
7. 性能优化Code Minification, Lazy Loading, Image Optimization, Caching, Tree Shaking
8. NodeJSNode.js优缺点 、 Middleware, REST API, File System
9. 项目相关项目文件夹结构、是否搭过架子、CI/CD、
10. GIS相关坐标系系统、Cesium画圈的几种方式、使用了mapboxgl的哪些功能、openlayer

image.png

这是面试笔记的第一篇--CSS

面试题
  1. 用CSS实现9宫格布局，每个格子的边框都是1px 格子重叠的地方也是1px 然后加上悬浮动画
  2. 说几种你知道的响应式布局方法
  3. CSS3有哪些属性
  4. 2列布局，第一列给200px, 右侧自适应，怎么实现
用CSS实现9宫格布局，每个格子的边框都是1px 格子重叠的地方也是1px 然后加上悬浮动画

做了2个9宫格: 1个9宫格，格子边框重叠的地方是2px, 另1个9宫格--格子边框重叠的地方仍然是1px, 看下代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Grid with 2px and 1px Borders</title>
    <style>
      /* Common styles for both grids */
      .container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 1fr);
        width: 300px; /* Adjust the size as needed */
        height: 300px; /* Adjust the size as needed */
        margin-bottom: 20px; /* Space between the two grids */
      }

      /* First grid with 2px borders due to overlap */
      .grid-2px .grid-item {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 24px;
        border: 1px solid black;
        box-sizing: border-box;
        transition: background-color 0.3s, color 0.3s;
      }

      /* Second grid with 1px borders (no overlap) */
      .grid-1px .grid-item {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 24px;
        box-sizing: border-box;
        transition: background-color 0.3s, color 0.3s;
        /* Border only on the inside edges */
        border-top: 1px solid black;
        border-left: 1px solid black;
      }

      /* Adding borders on the right and bottom edges of the last row and column */
      .grid-1px .grid-item:nth-child(3n) {
        border-right: 1px solid black;
      }

      .grid-1px .grid-item:nth-last-child(-n + 3) {
        border-bottom: 1px solid black;
      }

      /* Hover effect for both grids */
      .grid-item:hover {
        background-color: lightblue;
        color: white;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <!-- First grid with 2px borders due to overlap -->
    <div class="container grid-2px">
      <div class="grid-item">1</div>
      <div class="grid-item">2</div>
      <div class="grid-item">3</div>
      <div class="grid-item">4</div>
      <div class="grid-item">5</div>
      <div class="grid-item">6</div>
      <div class="grid-item">7</div>
      <div class="grid-item">8</div>
      <div class="grid-item">9</div>
    </div>

    <!-- Second grid with 1px borders (no overlap) -->
    <div class="container grid-1px">
      <div class="grid-item">1</div>
      <div class="grid-item">2</div>
      <div class="grid-item">3</div>
      <div class="grid-item">4</div>
      <div class="grid-item">5</div>
      <div class="grid-item">6</div>
      <div class="grid-item">7</div>
      <div class="grid-item">8</div>
      <div class="grid-item">9</div>
    </div>
  </body>
</html>

在线体验链接

image.png

说下实现思路：想要重叠的格子边框依然是1px,

  1. 给每个格子一个border-top, border-left,对应图1效果
  2. 格子如果是3的倍数，grid-item:nth-child(3n)，设置右边框为1px,对应图2效果，还剩最底层一条边了
  3. 给倒数3个格子设置底部边框为1px,通过.grid-item:nth-last-child(-n + 3)设置倒数3个格子

image.png

nth-last-child(-n + 3) 这里解释下为什么会取到倒数3个格子，看下:nth-last-child()文档，

image.png

<An+B> 表示在兄弟元素序列中，其数字位置与模式 An+B 相匹配的元素，适用于每个正整数或 n 的零值，其中：

  • A 是一个整数步长，
  • B 是一个整数偏移，
  • n 是从 0 开始的所有非负整数

我们这里的-n+3, A是-1(step)，n从0开始，B是3(offset)，

  • 当n=0, nth-last-child(-0 + 3)取倒数第三个格子
  • 当n=1, nth-last-child(-1 + 3)取倒数第二个格子
  • 当n=2, nth-last-child(-2 + 3)取倒数第一个格子
  • 当n=3, nth-last-child(-3 + 3)不会匹配到任何格子
说几种你知道的响应式布局方法
  • 媒体查询
  • Flexbox
  • CSS grid
  • 百分比
  • 视图单位vw、vh
  • rem、em
  1. Media queries(媒体查询)
    媒体查询允许我们根据媒体的类型，或者屏幕的尺寸、分辨率、朝向，设置不同的样式
@media (max-width: 600px) {
  .container {
    flex-direction: column;
  }
}
  1. Flexbox (弹性盒子)
    弹性盒子是一种用于按行或按列布局元素的一维布局方法。元素可以膨胀以填充额外的空间，收缩以适应更小的空间。
.container {
  display: flex;
  flex-wrap: wrap;
}

说一下flex: 2, flex是flex-grow, flex-shrink, flex-basis的简写，表示flex-grow: 2, flex-shrink: 1, flex-basis: 0; 可以看下MDN文档

还有一点，flexbox可以在不影响原来的顺序情况下改变布局排序，这在传统布局方法是做不到的

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Flexbox ordering example</title>
    <style>
      html {
        font-family: sans-serif;
      }

      body {
        width: 70%;
        max-width: 960px;
        margin: 20px auto;
      }

      button {
        font-size: 18px;
        line-height: 1.5;
        width: 15%;
      }

      div {
        height: 100px;
        border: 1px solid black;
      }

      /* Add your flexbox CSS below here */

      div {
        display: flex;
        align-items: center;
        justify-content: space-around;
      }

      button:first-child {
        order: 1;
      }

      button:last-child {
        order: -1;
      }
    </style>
  </head>
  <body>
    <div>
      <button>Smile</button>
      <button>Laugh</button>
      <button>Wink</button>
      <button>Shrug</button>
      <button>Blush</button>
    </div>
  </body>
</html>

在线体验链接

image.png

  1. CSS 网格布局(grid layout)
    基于行和列的二维布局，（flexbox是一维布局）。
.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-rows: minmax(100px, auto);
  gap: 20px;
}

这个意思是多列自适应，列的最小宽度是200px, 最大宽度根据列的剩余空间进行分配，也可能会多个列

在线体验链接

一个截图展示grid-column的用法，来自于这个链接

image.png

 header {
    grid-column: span 2; // 占据2列的宽度
 }
CSS3有哪些属性

自从CSS2.1之后，CSS变成模块化了，看下维基百科有哪些模块，

ModuleSpecification TitleStatusDate
css3-backgroundCSS Backgrounds and Borders Module Level 3Candidate Rec.Feb 2023
css-box-3CSS Box Model Module Level 3RecommendationApr 2023
css-cascade-3CSS Cascading and Inheritance Level 3RecommendationFeb 2021
css-color-3CSS Color Module Level 3RecommendationJan 2022
css3-contentCSS Generated Content Module Level 3Working DraftAug 2019
css-fonts-3CSS Fonts Module Level 3RecommendationSep 2018
css3-gcpmCSS Generated Content for Paged Media ModuleWorking DraftMay 2014
css3-layoutCSS Template Layout ModuleNoteMar 2015
css3-mediaqueriesMedia QueriesRecommendationJun 2012
mediaqueries-4Media Queries Level 4Candidate Rec.Dec 2021
css3-multicolMulti-column Layout Module Level 1Candidate Rec.Oct 2021
css3-pageCSS Paged Media Module Level 3Working DraftOct 2018
css3-breakCSS Fragmentation Module Level 3Candidate Rec.Dec 2018
selectors-3Selectors Level 3RecommendationNov 2018
selectors-4Selectors Level 4Working DraftNov 2022
css3-uiCSS Basic User Interface Module Level 3 (CSS3 UI)RecommendationJun 2018

  • css3-background （主要定义背景颜色、背景图片、背景大小、背景位置、 边框颜色、大小、样式，圆角、图片， 阴影效果）

  • css-box-3 (主要定义盒子模型， box-sizing，外边距margin, 内边距padding）

  • css-cascade-3 (主要定义CSS级联和继承，比如import引入css文件、!important、inherit）

  • css-color-3 (主要定义颜色)

    • 引入了RGBA、HSL、HSLA
    • 把transparent变成关键字，可以作用到所有的需要颜色属性上，比如outline-color，box-shadow, text-decoration-color, color先前css1背景色可设置透明，css2边框色可设置透明

  • css3-content (主要定义CSS元素内容， 主要利用CSS伪类::before, ::after生成装饰性图标或icon)

  • css-fonts-3 (主要定义CSS字体， @font-face可以使用自定义的字体，字体样式、粗细、font-stretch)

  • css3-gcpm (主要定义印刷媒体或分页内容（如电子书）设计样式。它提供用于生成页眉和页脚、页码和其他特定于分页媒体的内容的工具，)

  • css3-layout (这是一个实验性的模块，旨在定义基于网格的布局功能。虽然没有被完全采用，但它的想法影响了后来 CSS 网格布局模块的开发，该模块成为创建复杂网页布局的核心功能。)

  • css3-mediaqueries (媒体查询允许开发人员根据设备或浏览器的特性（如屏幕宽度、分辨率等）应用样式。这是响应式设计的基石，使网站能够根据不同的屏幕尺寸和设备调整其布局和样式。)

  • mediaqueries-4 (这是对原有媒体查询规范的扩展，增加了交互媒体特性（悬停、指针）等新功能，并改进了表达复杂媒体条件的语法。)

  • css3-multicol (此模块引入了将内容分列到多列的功能，类似于您在报纸或杂志中看到的内容。它提供了用于控制列数、间隙和列间规则（线）的属性。)

image.png

  • css3-page (这个模块涉及为分页媒体（如打印文档）设置样式。它包括页面尺寸、边距以及分页处理的属性。该模块的部分内容已经迁移到碎片化模块（css3-break）中。)

  • css3-break (这个模块处理内容如何在多行、页面、列或区域之间进行分割)

    • 在分页媒体（例如纸张、幻灯片、相册页面，以及在计算机屏幕上显示为打印输出模拟的页面）中，与连续媒体相对，文档的内容被分割为一个或多个独立的显示面。为了避免尴尬的断裂（例如在文本行的中间断开），布局引擎必须能够调整那些跨越分页线的内容。这个过程称为分页。

    • 在 CSS 中，除了分页媒体外，某些布局功能，如区域 [CSS3-REGIONS] 和多列布局 [CSS3COL] 也会创建类似的碎片化环境。用于跨容器分割内容的通用术语是“碎片化”。该模块解释了内容如何在碎片化容器（如页面和列）之间分割，以及如何由作者控制这些分割。

  • selectors-3 (选择器用于定位 DOM 中的元素。此模块引入了新的选择器，例如属性选择器、伪类（:nth-child、:not）和更复杂的组合器，从而扩展了开发人员将样式应用于特定元素的方式。)

  • selectors-4 (该模块扩展了选择器级别 3 规范，新增了一些，例如具有复杂选择器的 :is()、:where() 和 :not() 伪类，从而提高了 CSS 选择器的灵活性和功能。)

  • css3-ui (这个模块定义了与用户界面相关的属性，如光标样式、盒子模型调整（box-sizing content-box | border-box）、大小调整（resizing）和轮廓（outlines）。它还包括诸如文本溢出（text-overflow）之类的功能，从而更好地控制文本裁剪和溢出处理。)

2列布局，第一列给200px, 右侧自适应，怎么实现
  • 网格布局的方式
 .container {
 display: grid;
 grid-template-columns: 200px 1fr;
}
  • flex布局的方式
.container {
    display: flex;
}

.column1 {
    width: 200px;
    flex-shrink: 0; /* Ensures the first column doesn't shrink */
}

.column2 {
    flex-grow: 1; /* Makes the second column responsive */
}
  • calc布局的方式
.container {
    display: flex;
}

.column1 {
    width: 200px;
}

.column2 {
    width: calc(100% - 200px); /* Calculate remaining space */
}
avatar
文章
阅读
粉丝