面试 CSS 框架八股文十问十答第二期

面试 CSS 框架八股文十问十答第二期

作者：程序员小白条，个人博客

相信看了本文后，对你的面试是有一定帮助的！关注专栏后就能收到持续更新！

⭐点赞⭐收藏⭐不迷路！⭐

1）对盒模型的理解

盒模型是指在网页布局中，每个元素被看作一个矩形的盒子，这个盒子包含了元素的内容（content）、内边距（padding）、边框（border）、和外边距（margin）。盒模型分为标准盒模型和IE盒模型，主要的区别在于它们计算宽度和高度的方式不同。

• 标准盒模型：元素的宽度和高度仅包括内容框，不包括内边距、边框和外边距。
• IE盒模型：元素的宽度和高度包括了内容框、内边距和边框，但不包括外边距。

2）为什么有时候⽤translate来改变位置⽽不是定位？

使用 translate 来改变位置相比使用定位（position 属性）有一些优势：

• 性能优势：translate 是在 GPU 层面执行的，因此在动画等高性能需求场景下，使用 translate 通常比使用定位更加流畅。
• 不影响文档流：translate 不会改变元素在文档流中的位置，因此对其他元素的布局不会产生影响，而定位可能会导致文档流的重新排列。
• 更容易进行硬件加速：由于 translate 是在 GPU 上执行的，可以更容易地利用硬件加速，提高动画性能。

3）li 与 li 之间有看不见的空白间隔是什么原因引起的？如何解决？

这是因为 HTML 中的换行和空格等空白字符导致的。这些空白字符会被解释成文本节点，造成 li 元素之间产生额外的空白。

解决方法有多种：

• 删除 HTML 代码中的空白字符：将 li 标签写在一行，避免空格和换行。

  <ul>
    <li>Item 1</li><li>Item 2</li><li>Item 3</li>
  </ul>
  1
  2
  3

• 使用 CSS 设置负 margin 或者 font-size：通过设置负 margin 或者将父元素的 font-size 设置为 0 来消除空白。

  ul {
    font-size: 0;
  }
  li {
    font-size: 16px; /* 恢复字体大小 */
  }
  1
  2
  3
  4
  5
  6

4）CSS3中有哪些新特性

CSS3 引入了许多新特性，其中一些主要包括：

• Flexbox 布局：提供了一种更加灵活的布局方式，适用于不同屏幕尺寸和设备。
• Grid 布局：允许开发者以网格形式布局页面，更直观和灵活。
• 过渡（Transitions）和动画（Animations）：用于实现更丰富的交互和动画效果。
• 多列布局：通过 column-count 和 column-gap 等属性实现多列文本布局。
• 媒体查询：使得样式能够根据设备的不同特性而进行调整，实现响应式设计。
• 自定义字体（@font-face）：允许开发者使用自定义字体，而不依赖于用户的计算机上已安装的字体。

5）替换元素的概念及计算规则

替换元素是指一些具有内容、但在渲染时会被替换为其他内容的元素，如 img、input、video 等。这些元素的内容通常由外部资源定义，而不是由文档本身提供。

替换元素的计算规则包括：

• 宽度和高度：如果在 CSS 中指定了宽度和高度，则按照指定的值进行渲染，否则根据实际内容大小渲染。
• 外边距和内边距：外边距和内边距同样按照 CSS 中的规则进行计算。
• 替换元素的默认尺寸：每个替换元素都有一个默认的尺寸，比如 img 的默认宽度和高度是实际图片的尺寸。

替换元素在布局时会遵循普通流，但由于其内容可能来自外部资源，其尺寸的计算会根据具体情况而有所不同。

6）常见的图片格式及使用场景

常见的图片格式包括：

• JPEG（Joint Photographic Experts Group）：适用于照片和复杂图像，支持高压缩比，但会导致图像失真。常用于摄影和图像展示。
• PNG（Portable Network Graphics）：支持透明背景，无损压缩，适用于图标、透明图像和图形。通常用于网页设计和UI元素。
• GIF（Graphics Interchange Format）：支持动画，但色彩表现较差，适用于简单动画和图标。
• SVG（Scalable Vector Graphics）：矢量图形格式，可缩放且不失真，适用于图标和矢量图形，尤其在响应式设计中常用。
• WebP：谷歌开发的图像格式，结合了JPEG和PNG的优点，支持高压缩比和透明度，但不被所有浏览器支持。

不同的格式适用于不同的场景，要根据具体需求选择合适的图片格式。

7）对 CSSSprites 的理解

CSS Sprites 是一种将多个小图标或图片合并到一个大图中，然后通过CSS来控制显示其中某一部分的技术。它的优点包括：

• 减少HTTP请求数量：将多个图片合并成一个，减少了浏览器向服务器发出的HTTP请求，提高页面加载速度。
• 减少图像加载延迟：通过一次请求加载所有图像，减少了延迟，提高了用户体验。
• 节省带宽：减少了图像的总体积，节省了带宽成本。
• 方便管理：通过CSS控制哪个部分的图像显示，方便管理和维护。

CSS Sprites常用于图标、按钮、小图等元素的制作和展示。

8）什么是物理像素，逻辑像素和像素密度，为什么在移动端开发时需要用到@3x, @2x这种图片？

• 物理像素（Physical Pixel）：是显示设备上的实际物理点，它们组成了屏幕上的图像。
• 逻辑像素（Logical Pixel）：是指开发者在设计页面时使用的抽象像素单位，通常与物理像素不一一对应。在高分辨率屏幕上，一个逻辑像素可能对应多个物理像素。
• 像素密度（Pixel Density）：是指每英寸（或每厘米）上的物理像素数量，通常以DPI（每英寸像素数）或PPI（每英寸点数）来表示。高像素密度屏幕有更多的物理像素，因此能够显示更多细节。

在移动端开发中，因为不同设备有不同的像素密度，为了保证图像在不同设备上的清晰度，需要提供多个版本的图像。通常使用 @3x、@2x、@1x 等后缀来表示不同分辨率的图像，以确保在高分辨率屏幕上显示清晰，同时节省带宽和加载时间。

9）margin 和 padding 的使用场景

• Margin（外边距）：用于控制元素与周围元素之间的间距。常用于在元素之间创建空白区域，控制元素的外部间距，以调整页面布局。
• Padding（内边距）：用于控制元素的内容与元素边框之间的间距。常用于控制元素的内部间距，以改变内容与边框的距离。

具体使用场景包括：

• Margin：用于在元素之间创建间隔、调整元素在页面中的位置、垂直居中元素等。
• Padding：用于调整元素内部内容与边框之间的距离，控制文本或元素内部的排列和间距。

10）对line-height 的理解及其赋值方式

Line-height 是用于控制行间距（行高）的CSS属性。它可以影响文本行的垂直间距，从而影响文本的整体布局和可读性。

• Line-height 的值可以是一个无单位的数字，表示行高与当前文本字体大小的倍数。例如，line-height: 1.5; 表示行高是字体大小的1.5倍。
• Line-height 也可以是一个具体的长度单位，如像素（px）、百分比（%）等，用于精确控制行高的具体大小。
• 如果将 line-height 设置为正常（line-height: normal;），它会采用默认的行高，通常由浏览器决定，以保持最佳的可读性。

适当调整 line-height 可以改善文本的排版，使其更易阅读。较大的行高可以提高文本的可读性，较小的行高可以节省空间。在响应式设计中，通常根据不同屏幕尺寸和字体大小来调整 line-height 的值。

开源项目地址：https://gitee.com/falle22222n-leaves/vue_-book-manage-system

已 300 + Star！

⭐点赞⭐收藏⭐不迷路！⭐