likes
comments
collection
share

css面试考点：flexbox、回流重绘、响应式设计及视差滚动的实现

作者站长头像
站长
· 阅读数 7

前言

大家好，前面我们已经讲了关于css的部分面试考点，其实在面试中对于css的考法并不算很多，我们只需要记住一些重要的考点就差不多可以了，其他的就需要我们在日常项目中去理解和深入了。下面我将为大家介绍本人所学到的css的最后几种考法。

题目九：说说flexbox布局的理解？

首先还是我们的是什么，也就讲解它的定义及概念。Flexbox（弹性盒子布局）是一种用于页面布局的 CSS3 新特性，它提供了更加灵活和高效的布局方式，特别适用于创建复杂的、响应式的布局结构。Flexbox 的主要思想是让容器的子元素能够根据需要自动伸缩，并且能够控制子元素在容器内的对齐、排列方式。它在我们日常项目中会频繁的使用到。

特点

  1. 容器和项目：

    • 容器（Flex Container） ：采用 Flex 布局的父元素称为容器，其所有子元素都称为项目。
    • 项目（Flex Item） ：容器内的每个子元素都是项目，它们根据 Flex 布局的规则进行排列。

  2. 主轴和交叉轴：

    • 主轴（Main Axis） ：Flex 容器的主要方向称为主轴，项目沿着主轴排列。
    • 交叉轴（Cross Axis） ：与主轴垂直的方向称为交叉轴，用于项目在主轴上的对齐。

  3. 弹性元素属性：

    • flex-direction：指定主轴的方向。
    • justify-content：定义项目在主轴上的对齐方式。
    • align-items：定义项目在交叉轴上的对齐方式。
    • flex-wrap：定义项目在一行上排不下时的换行方式。
    • align-self：单独设置某个项目在交叉轴上的对齐方式。
    • flex：设置项目的伸缩比例。

示例：


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
  .container {
    display: flex; /* 声明容器为 Flex 容器 */
    justify-content: space-around; /* 主轴对齐方式为均匀分布 */
    align-items: center; /* 交叉轴对齐方式为居中 */
    height: 200px; /* 设置容器高度 */
    border: 2px solid #ccc; /* 为了演示效果添加边框 */
  }

  .item {
    width: 100px; /* 设置项目宽度 */
    height: 100px; /* 设置项目高度 */
    background-color: lightblue; /* 设置背景颜色 */
  }
</style>
</head>
<body>

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

</body>
</html>

css面试考点：flexbox、回流重绘、响应式设计及视差滚动的实现 在这个示例中，.container 是 Flex 容器，.item 是容器内的项目。Flex 容器的主轴方向是水平的，默认是从左到右排列。通过设置 justify-content: space-around;，项目在主轴上均匀分布，左右两侧的间距相等。设置 align-items: center;，使得项目在交叉轴上居中对齐。

适用场景

  • 等高的多列布局：Flexbox 可以轻松创建等高的多列布局，使得每一列的高度相等，无论其内容的长度如何。
  • 水平和垂直居中：Flexbox 提供了强大的对齐和居中功能，可以在容器中轻松实现水平和垂直居中元素。
  • 自适应布局：Flexbox 具有弹性特性，可以根据可用空间自动调整项目的大小和位置，从而实现自适应的布局。
  • 等间距的分布：通过使用 Flexbox 的 justify-content 和 align-items 属性，可以轻松地在容器中创建等间距的分布，使项目之间具有相等的间距。
  • 响应式布局：Flexbox 是响应式设计的有力工具，可以通过简单的 CSS 更改来构建适应不同屏幕尺寸和设备类型的布局。

总结

Flexbox 是一种强大的 CSS 布局模块，适用于创建各种灵活和自适应的网页布局。它可以解决传统布局方式中的很多问题，并提供了更强大的对齐、居中和分布控制功能，使开发者能够更轻松地实现复杂的布局需求。

题目十： 说说回流和重绘？

是什么： 在HTML中，每个元素都可以理解成一个盒子，而在浏览器解析过程中，会涉及到回流与重绘。回流和重绘是与网页性能和渲染相关的两个概念，它们都是浏览器渲染页面时发生的过程，但是针对的对象和触发条件略有不同。

触发时机及如何优化

对于需要优化网页性能时，我们就要尽量减少回流和重绘的次数。而要减少回流和重绘的次数，我们就要先了解回流和重绘是如何触发的。

回流

  • 回流是指浏览器计算元素的位置和几何结构的过程。当页面上的部分或全部内容发生变化，需要重新计算元素的几何属性（如尺寸、位置、布局等）时，就会触发回流。
  • 回流的触发条件包括但不限于：DOM 结构变化、窗口尺寸改变、元素尺寸、位置、内容等发生变化、获取某些元素的几何属性（如 offsetWidth、offsetHeight）等。
  • 回流是一种比重绘更为昂贵的操作，因为它会影响到整个文档的布局和结构，可能需要重新计算并更新多个元素的位置和样式。

重绘

  • 重绘是指浏览器根据元素的样式和内容重新绘制元素的过程。当元素的样式发生变化，但是不影响其几何属性（如颜色、背景等），就会触发重绘。
  • 触发重绘的条件包括但不限于：元素的样式（如颜色、背景、阴影等）发生变化、元素的可见性发生变化（如隐藏、显示）、使用 CSS3 过渡或动画效果等。
  • 重绘不涉及元素的位置和布局的改变，它只是重新绘制元素的外观，因此比回流消耗的性能较少。

优化

我们了解了如何触发回流和重绘的场景，下面给出如何减少它们的方式：

  • 如果想设定元素的样式，通过改变元素的 class 类名 (尽可能在 DOM 树的最里层)
  • 避免设置多项内联样式
  • 应用元素的动画，使用 position 属性的 fixed 值或 absolute 值(如前文示例所提)
  • 避免使用 table 布局，table 中每个元素的大小以及内容的改动，都会导致整个 table 的重新计算
  • 对于那些复杂的动画，对其设置 position: fixed/absolute，尽可能地使元素脱离文档流，从而减少对其他元素的影响
  • 使用css3硬件加速，可以让transform、opacity、filters这些动画不会引起回流重绘
  • 避免使用 CSS 的 JavaScript 表达式

题目十一：什么是响应式？

是什么： 响应式设计是一种网页设计方法，旨在使网站能够根据访问设备（如桌面电脑、平板电脑、手机等）的不同特性和尺寸，以及浏览器窗口大小的变化，自动调整其布局和样式，以便提供最佳的用户体验。

响应式网站常见特点：

  • 同时适配PC + 平板 + 手机等
  • 标签导航在接近手持终端设备时改变为经典的抽屉式导航
  • 网站的布局会根据视口来调整模块的大小和位置

实现方法

在css中，我们可以通过以下方式实现响应式设计：

  • flex 适合做某一个容器的响应式
  • % 适用于页面上的外层大容器
  • rem + 媒体查询 可用于任何地方 ———— 虽然也要写媒体查询，但是每个媒体查询代码量会少很多
  • 媒体查询 适用于页面上的任何地方 ———— 但是代码量会多一些
  • vm/vh 适用于外层大容器 ————相对window的宽高

示例

  1. 使用 Flex 实现响应式布局：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex 布局示例</title>
    <style>
        .container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .item {
            width: 30%; /* 初始宽度 */
            margin-bottom: 20px;
            background-color: lightblue;
        }

        @media screen and (max-width: 600px) {
            .item {
                width: 100%; /* 小屏幕下宽度变为 100% */
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
    </div>
</body>
</html>

css面试考点：flexbox、回流重绘、响应式设计及视差滚动的实现

css面试考点：flexbox、回流重绘、响应式设计及视差滚动的实现 通过设置容器的 flex-wrap: wrap; 和项目的宽度百分比，在小屏幕下项目会自动换行，并且宽度变为 100%。 2. 百分比布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百分比布局示例</title>
    <style>
        .container {
            width: 80%; /* 初始宽度 */
            margin: 0 auto;
            background-color: lightblue;
        }

        @media screen and (max-width: 600px) {
            .container {
                width: 100%; /* 小屏幕下宽度变为 100% */
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <p>示例</p>
    </div>
</body>
</html>

容器的宽度设置为百分比，使其相对于父容器或视口宽度进行调整。在小屏幕下，通过媒体查询将容器的宽度设置为 100%，使其充满整个屏幕宽度。

  1. rem + 媒体查询：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>rem + 媒体查询示例</title>
    <style>
        /* 基础字体大小 */
        html {
            font-size: 16px;
        }

        /* 在不同宽度下设置不同的字体大小 */
        @media screen and (max-width: 600px) {
            html {
                font-size: 14px;
            }
        }

        /* 使用 rem 单位布局 */
        .container {
            width: 20rem; /* 基于字体大小计算宽度 */
            margin: 0 auto;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="container">
        <p>示例</p>
    </div>
</body>
</html>

通过设置根元素的字体大小为基准，在不同宽度下设置不同的字体大小，从而间接影响到基于 rem 单位的布局大小。在小屏幕下，通过媒体查询可以调整根元素的字体大小，进而影响整个布局。

  1. 媒体查询：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>媒体查询示例</title>
    <style>
        .container {
            width: 80%; /* 初始宽度 */
            margin: 0 auto;
            background-color: lightblue;
        }

        @media screen and (max-width: 600px) {
            .container {
                width: 100%; /* 小屏幕下宽度变为 100% */
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <p>示例</p>
    </div>
</body>
</html>

直接根据屏幕宽度设置不同的样式，从而实现在不同屏幕尺寸下的布局变化。在小屏幕下，通过媒体查询调整容器的宽度为 100%，使其充满整个屏幕宽度。

  1. vm/vh 布局：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vm/vh 布局示例</title>
    <style>
        .container {
            width: 80vw; /* 初始宽度为视口宽度的 80% */
            height: 80vh; /* 初始高度为视口高度的 80% */
            margin: 0 auto;
            background-color: lightblue;
        }

        @media screen and (max-width: 600px) {
            .container {
                width: 90vw; /* 小屏幕下宽度变为视口宽度的 90% */
                height: 90vh; /* 小屏幕下高度变为视口高度的 90% */
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <p>示例</p>
    </div>
</body>
</html>

使用视口单位设置容器的宽度和高度，使其相对于视口大小进行调整。在小屏幕下，通过媒体查询可以调整容器的宽度和高度，使其适应不同尺寸的屏幕。

总结

优点：

  • 面对不同分辨率设备灵活性强
  • 能够快捷解决多设备显示适应问题

缺点：

  • 仅适用布局、信息、框架并不复杂的部门类型网站
  • 兼容各种设备工作量大，效率低下
  • 代码累赘，会出现隐藏无用的元素，加载时间加长
  • 其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果
  • 一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

题目十二：视差滚动效果如何实现？

是什么： 视差滚动（Parallax Scrolling）是指多层背景以不同的速度移动，形成立体的运动效果。要实现视差滚动效果，我们可以使用background-attachment: fixed; 属性结合 background-position 属性来实现。

示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{margin: 0;padding: 0;}
    div{
      height: 100vh;
      background: rgba(0, 0, 0, 0.7);
      color: #fff;
      font-size: 20vh;
      text-align: center;
      line-height: 100vh;
    }
    .box.img:nth-child(2){
      background-image: url('https://t7.baidu.com/it/u=1732966997,2981886582&fm=193&f=GIF');
      background-size: cover;
      background-position: center center;

      background-attachment: fixed;
    }
    .box.img:nth-child(4){
      background-image: url('https://t7.baidu.com/it/u=1785207335,3397162108&fm=193&f=GIF');
      background-attachment: fixed;
    }
    .box.img:nth-child(6){
      background-image: url('https://t7.baidu.com/it/u=4265852580,160349292&fm=193&f=GIF');
      background-attachment: fixed;
    }
    .box.img:nth-child(8){
      background-image: url('https://t7.baidu.com/it/u=3659156856,3928250034&fm=193&f=GIF');
      background-attachment: fixed;
    }
  </style>
</head>
<body>
  <div class="box">1</div>
  <div class="box img">2</div>

  <div class="box">3</div>
  <div class="box img">4</div>

  <div class="box">5</div>
  <div class="box img">6</div>

  <div class="box">7</div>
  <div class="box img">8</div>
</body>
</html>

css面试考点：flexbox、回流重绘、响应式设计及视差滚动的实现

完成滚动视觉差就需要将background-attachment属性设置为fixed，让背景相对于视口固定。及时一个元素有滚动机制，背景也不会随着元素的内容而滚动。

结语

通过本文介绍的内容，我们对于 CSS 的一些重要概念和技术有了更深入的理解。Flexbox 布局为我们提供了灵活而高效的布局方式，使得网页布局更加容易实现。了解回流和重绘的概念及优化方法，可以帮助我们更好地优化页面性能。而响应式设计则是适应不同设备和屏幕尺寸的重要手段，通过各种方法实现响应式布局，可以使网站在不同环境下都能呈现出良好的效果。最后，通过视差滚动效果的实现，我们可以为网页增添一些动态和立体感，提升用户的视觉体验。