当前位置:   article > 正文

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

面试 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-countcolumn-gap 等属性实现多列文本布局。
  • 媒体查询:使得样式能够根据设备的不同特性而进行调整,实现响应式设计。
  • 自定义字体(@font-face):允许开发者使用自定义字体,而不依赖于用户的计算机上已安装的字体。

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

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

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

  • 宽度和高度:如果在 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!

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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/prog456/article/detail/61036
推荐阅读
相关标签
  

闽ICP备14008679号