前端面试题 —— CSS （二）

news2024/11/25 2:23:55

目录

一、transition 和 animation 的区别

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

三、margin 和 padding 的使用场景

四、CSS 优化和提高性能的方法有哪些？

五、display:inline-block 什么时候会显示间隙？

六、对 CSS 工程化的理解

七、如何判断元素是否到达可视区域

八、如何根据设计稿进行移动端适配？

九、响应式设计的概念及基本原理

十、使用 clear 属性清除浮动的原理？

十一、absolute 与 fixed 共同点与不同点

十二、实现一个宽高自适应的正方形

 

一、transition 和 animation 的区别

  • transition 是过度属性，强调过度，它的实现需要触发一个事件（比如鼠标移动上去，焦点，点击等）才执行动画。它类似于 flash 的补间动画，设置一个开始关键帧，一个结束关键帧。
  • animation 是动画属性，它的实现不需要触发事件，设定好时间之后可以自己执行，且可以循环一个动画。它也类似于 flash 的补间动画，但是它可以设置多个关键帧（用@keyframe 定义）完成动画。

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

以 iPhone XS 为例，当写 CSS 代码时，针对于单位 px，其宽度为 414px & 896px，也就是说当赋予一个 DIV 元素宽度为 414px，这个 DIV 就会填满手机的宽度。

而如果有一把尺子来实际测量这部手机的物理像素，实际为 1242\*2688 物理像素；经过计算可知，1242/414=3，也就是说，在单边上，一个逻辑像素=3 个物理像素，就说这个屏幕的像素密度为 3，也就是常说的 3 倍屏。

对于图片来说，为了保证其不失真，1 个图片像素至少要对应一个物理像素，假如原始图片是 500300 像素，那么在 3 倍屏上就要放一个 1500900 像素的图片才能保证 1 个物理像素至少对应一个图片像素，才能不失真。

当然，也可以针对所有屏幕，都只提供最高清图片。虽然低密度屏幕用不到那么多图片像素，而且会因为下载多余的像素造成带宽浪费和下载延迟，但从结果上说能保证图片在所有屏幕上都不会失真。

还可以使用 CSS 媒体查询来判断不同的像素密度，从而选择不同的图片: 

my-image { 
  background: (low.png); 
}
@media only screen and (min-device-pixel-ratio: 1.5) {
  #my-image { background: (high.png); }
}

三、margin 和 padding 的使用场景

  • 需要在 border 外侧添加空白，且空白处不需要背景（色）时，使用 margin
  • 需要在 border 内测添加空白，且空白处需要背景（色）时，使用 padding

四、CSS 优化和提高性能的方法有哪些？

加载性能：

  1. css 压缩：将写好的 css 进行打包压缩，可以减小文件体积。
  2. css 单一样式：当需要下边距和左边距的时候，很多时候会选择使用 margin:top 0 bottom 0；但 margin-bottom:bottom;margin-left:left;执行效率会更高。
  3. 减少使用@import，建议使用 link，因为后者在页面加载时一起加载，前者是等待页面加载完成之后再进行加载。

选择器性能：

  1. 关键选择器（key selector）。选择器的最后面的部分为关键选择器（即用来匹配目标元素的部分）。CSS 选择符是从右到左进行匹配的。当使用后代选择器的时候，浏览器会遍历所有子元素来确定是否是指定的元素等等。
  2. 如果规则拥有 ID 选择器作为其关键选择器，则不要为规则增加标签。过滤掉无关的规则（这样样式系统就不会浪费时间去匹配它们了）。
  3. 避免使用通配规则，如\*{}计算次数惊人，只对需要用到的元素进行选择。
  4. 尽量少的去对标签进行选择，而是用 class。
  5. 尽量少的去使用后代选择器，降低选择器的权重值。后代选择器的开销是最高的，尽量将选择器的深度降到最低，最高不要超过三层，更多的使用类来关联每一个标签元素。
  6. 了解哪些属性是可以通过继承而来的，然后避免对这些属性重复指定规则。

渲染性能：

  1. 慎重使用高性能属性：浮动、定位。
  2. 尽量减少页面重排、重绘。
  3. 去除空规则：｛｝。空规则的产生原因一般来说是为了预留样式。去除这些空规则无疑能减少 css 文档体积。
  4. 属性值为 0 时，不加单位。
  5. 属性值为浮动小数 0.\*\*，可以省略小数点之前的 0。
  6. 标准化各种浏览器前缀：带浏览器前缀的在前。标准属性在后。
  7. 不使用@import 前缀，它会影响 css 的加载速度。
  8. 选择器优化嵌套，尽量避免层级过深。
  9. css 雪碧图，同一页面相近部分的小图标，方便使用，减少页面的请求次数，但是同时图片本身会变大，使用时，优劣考虑清楚，再使用。
  10. 正确使用 display 的属性，由于 display 的作用，某些样式组合会无效，徒增样式体积的同时也影响解析性能。
  11. 不滥用 web 字体。对于中文网站来说 WebFonts 可能很陌生，国外却很流行。web fonts 通常体积庞大，而且一些浏览器在下载 web fonts 时会阻塞页面渲染损伤性能。

可维护性、健壮性：

  1. 将具有相同属性的样式抽离出来，整合并通过 class 在页面中进行使用，提高 css 的可维护性。
  2. 样式与内容分离：将 css 代码定义到外部 css 中。

五、display:inline-block 什么时候会显示间隙？

  • 有空格时会有间隙，可以删除空格解决；
  • margin 正值时，可以让 margin 使用负值解决；
  • 使用 font-size 时，可通过设置 font-size: 0;、letter-spacing、word-spacing 解决；

六、对 CSS 工程化的理解

CSS 工程化是为了解决以下问题：

  1. 宏观设计：CSS 代码如何组织、如何拆分、模块结构怎样设计？
  2. 编码优化：怎样写出更好的 CSS？
  3. 构建：如何处理我的 CSS，才能让它的打包结果最优？
  4. 可维护性：代码写完了，如何最小化它后续的变更成本？如何确保任何一个同事都能轻松接手？

以下三个方向都是时下比较流行的、普适性非常好的 CSS 工程化实践：

  • 预处理器：Less、 Sass 等
  • 重要的工程化插件： PostCss
  • Webpack loader 等 

基于这三个方向，可以衍生出一些具有典型意义的子问题，这里我们逐个来看：

（1）预处理器：为什么要用预处理器？它的出现是为了解决什么问题？

预处理器，其实就是 CSS 世界的“轮子”。预处理器支持我们写一种类似 CSS、但实际并不是 CSS 的语言，然后把它编译成 CSS 代码：

那为什么写 CSS 代码写得好好的，偏偏要转去写 "类 CSS" 呢？这就和本来用 JS 也可以实现所有功能，但最后却写 React 的 jsx 或者 Vue 的模板语法一样——为了爽！要想知道有了预处理器有多爽，首先要知道的是传统 CSS 有多不爽。

随着前端业务复杂度的提高，前端工程中对 CSS 提出了以下的诉求：

  1.  宏观设计上：我们希望能优化 CSS 文件的目录结构，对现有的 CSS 文件实现复用
  2. 编码优化上：我们希望能写出结构清晰、简明易懂的 CSS，需要它具有一目了然的嵌套层级关系，而不是无差别的一铺到底写法；我们希望它具有变量特征、计算能力、循环能力等等更强的可编程性，这样我们可以少写一些无用的代码
  3. 可维护性上：更强的可编程性意味着更优质的代码结构，实现复用意味着更简单的目录结构和更强的拓展能力，这两点如果能做到，自然会带来更强的可维护性

这三点是传统 CSS 所做不到的，也正是预处理器所解决掉的问题。预处理器普遍会具备这样的特性：

  • 嵌套代码的能力，通过嵌套来反映不同 css 属性之间的层级关系 
  • 支持定义 css 变量
  • 提供计算函数
  • 允许对代码片段进行 extend 和 mixin
  • 支持循环语句的使用
  • 支持将 CSS 文件模块化，实现复用

（2）PostCss：PostCss 是如何工作的？我们在什么场景下会使用 PostCss？

PostCss 仍然是一个对 CSS 进行解析和处理的工具，它会对 CSS 做这样的事情：

它和预处理器的不同就在于，预处理器处理的是 类 CSS，而 PostCss 处理的就是 CSS 本身。Babel 可以将高版本的 JS 代码转换为低版本的 JS 代码。PostCss 做的是类似的事情：它可以编译尚未被浏览器广泛支持的先进的 CSS 语法，还可以自动为一些需要额外兼容的语法增加前缀。更强的是，由于 PostCss 有着强大的插件机制，支持各种各样的扩展，极大地强化了 CSS 的能力。

PostCss 在业务中的使用场景非常多：

  • 提高 CSS 代码的可读性：PostCss 其实可以做类似预处理器能做的工作；
  • 当我们的 CSS 代码需要适配低版本浏览器时，PostCss 的 [Autoprefixer](https://github.com/postcss/autoprefixer) 插件可以帮助我们自动增加浏览器前缀；
  • 允许我们编写面向未来的 CSS：PostCss 能够帮助我们编译 CSS next 代码；

（3）Webpack 能处理 CSS 吗？如何实现？

Webpack 能处理 CSS 吗?

  • Webpack 在裸奔的状态下，是不能处理 CSS 的，Webpack 本身是一个面向 JavaScript 且只能处理 JavaScript 代码的模块化打包工具
  • Webpack 在 loader 的辅助下，是可以处理 CSS 的

如何用 Webpack 实现对 CSS 的处理：

  • Webpack 中操作 CSS 需要使用的两个关键的 loader：css-loader 和 style-loader

每个 loader 都做了什么事情：

  • css-loader：导入 CSS 模块，对 CSS 代码进行编译处理
  • style-loader：创建 style 标签，把 CSS 内容写入标签

在实际使用中，css-loader 的执行顺序一定要安排在 style-loader 的前面。因为只有完成了编译过程，才可以对 css 代码进行插入；若提前插入了未编译的代码，那么 webpack 是无法理解该代码，它会无情报错。

七、如何判断元素是否到达可视区域

以图片显示为例：

  • window.innerHeight 是浏览器可视区的高度；
  • document.body.scrollTop || document.documentElement.scrollTop 是浏览器滚动的过的距离；
  • imgs.offsetTop 是元素顶部距离文档顶部的高度（包括滚动条的距离）；
  • 内容达到显示区域的：img.offsetTop < window.innerHeight + document.body.scrollTop;

八、如何根据设计稿进行移动端适配？

移动端适配主要有两个维度：

  • 适配不同像素密度，针对不同的像素密度，使用 CSS 媒体查询，选择不同精度的图片，以保证图片不会失真；
  • 适配不同屏幕大小，由于不同的屏幕有着不同的逻辑像素大小，所以如果直接使用 px 作为开发单位，会使得开发的页面在某一款手机上可以准确显示，但是在另一款手机上就会失真。为了适配不同屏幕的大小，应按照比例来还原设计稿的内容。

为了能让页面的尺寸自适应，可以使用 rem，em，vw，vh 等相对单位。

九、响应式设计的概念及基本原理

响应式网站设计（Responsive Web design）是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。

关于原理： 基本原理是通过媒体查询（@media）查询检测不同的设备屏幕尺寸做处理。

关于兼容： 页面头部必须有 meta 声明的 viewport。

＜meta name="viewport" content=width="device-width, initial-scale=1, maximum-scale=1, user-scalable=no"＞

十、使用 clear 属性清除浮动的原理？

使用 clear 属性清除浮动，其语法如下：

clear: none|left|right|both;

如果单看字面意思，clear:left 是清除左浮动，clear:right 是清除右浮动，实际上，这种解释是有问题的，因为浮动一直还在，并没有清除。

官方对 clear 属性解释：元素盒子的边不能和前面的浮动元素相邻，对元素设置 clear 属性是为了避免浮动元素对该元素的影响，而不是清除掉浮动。

还需要注意 clear 属性指的是元素盒子的边不能和前面的浮动元素相邻，注意这里前面的3 个字，也就是 clear 属性对后面的浮动元素是不闻不问的。考虑到 float 属性要么是 left，要么是 right，不可能同时存在，同时由于 clear 属性对后面的浮动元素不闻不问，因此，当 clear:left 有效的时候，clear:right 必定无效，也就是此时 clear:left 等同于设置 clear:both；同样地，clear:right 如果有效也是等同于设置 clear:both。由此可见，clear:left 和 clear:right 这两个声明就没有任何使用的价值，至少在 CSS 世界中是如此，直接使用 clear:both 吧。

一般使用伪元素的方式清除浮动：

.clear::after {
  content:'';
  display: block;
  clear:both;
}

clear 属性只有块级元素才有效的，而::after 等伪元素默认都是内联水平，这就是借助伪元素清除浮动影响时需要设置 display 属性值的原因。

十一、absolute 与 fixed 共同点与不同点

共同点：

  • 改变行内元素的呈现方式，将 display 置为 inline-block
  • 使元素脱离普通文档流，不再占据文档物理空间
  • 覆盖非定位文档元素

不同点：

  • absolute 与 fixed 的根元素不同，absolute 的根元素可以设置，fixed 根元素是浏览器。
  • 在有滚动条的页面中，absolute 会跟着父元素进行移动，fixed 固定在页面的具体位置。

十二、实现一个宽高自适应的正方形

  • 利用 vw 来实现：
.square {
  width: 10%;
  height: 10vw;
  background: tomato;
}
  • 利用元素的 margin/padding 百分比是相对父元素 width 的性质来实现：
.square {
  width: 20%;
  height: 0;
  padding-top: 20%;
  background: orange;
}
  • 利用子元素的 margin-top 的值来实现：
.square {
  width: 30%;
  overflow: hidden;
  background: yellow;
}
.square::after {
  content: '';
  display: block;
  margin-top: 100%;
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/472197.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

大数据编程实验3 熟悉常用的HBase操作

大数据编程实验3 熟悉常用的HBase操作

实验:熟悉常用的HBase操作 1实验目的 理解HBase在Hadoop体系结构中的角色&#xff1b;熟练使用HBase操作常用的Shell命令&#xff1b; 2 实验平台 操作系统&#xff1a;Linux Hadoop版本&#xff1a;3.1.3 HBase版本&#xff1a;2.2.2 JDK版本&#xff1a;1.8 3 实验内容和…
阅读更多...
KDJB-702继保综合检测试验仪

KDJB-702继保综合检测试验仪

一、产品参数 交流电流输出 输出精度&#xff1a;≤0.5A 2mA &#xff1e;0.5A 0.2% 相电流输出&#xff08;有效值&#xff09;&#xff1a;0&#xff5e;30A 三并电流输出&#xff08;有效值&#xff09;&#xff1a;0&#xff5e;900A 相电流长时间允许工作值&#xff…
阅读更多...
java开发的chatGPT机器人系统

java开发的chatGPT机器人系统

ChatGPT机器人发展趋势&#xff1a; 更加个性化&#xff1a;随着数据和技术的不断进步&#xff0c;ChatGPT机器人将能够更加准确地理解用户的需求和偏好&#xff0c;并提供更加个性化的回复和服务。 多语言支持&#xff1a;随着ChatGPT在各个国家和地区的普及&#xff…
阅读更多...
uniapp（vue2）封装子组件

uniapp（vue2）封装子组件

创建子组件 在项目根目录下新建 components 目录&#xff0c;右键选择“新建组件”&#xff0c;创建子组件&#xff08;这里以 search.vue 举例&#xff09;并且为同名目录&#xff0c;即 components --> search --> search.vue&#xff0c;这样父组件可以直接使用&…
阅读更多...
C语言-学习之路-01

C语言-学习之路-01

C语言学习之路-01 目录关键字数据类型常量变量声明和定义进制sizeof关键字整型&#xff1a;intshort、int、long、long long字符型&#xff1a;charASCII对照表转义字符数值溢出实型&#xff08;浮点型&#xff09;&#xff1a;float、double类型限定符字符串格式化输出和输入 …
阅读更多...
深度学习笔记之稀疏自编码器

深度学习笔记之稀疏自编码器

深度学习笔记之稀疏自编码器 引言引子&#xff1a;题目描述正确答案&#xff1a; A B C D \mathcal A \mathcal B \mathcal C \mathcal D ABCD题目解析 介绍&#xff1a;自编码器欠完备自编码器正则自编码器从先验角度解释稀疏自编码器稀疏自编码器的构建 引言 本节以一道算法…
阅读更多...
14.基于双层优化的电动汽车优化调度研究(文章复现)

14.基于双层优化的电动汽车优化调度研究(文章复现)

说明书 MATLAB代码&#xff1a;基于双层优化的电动汽车优化调度研究 关键词&#xff1a;双层优化 选址定容 输配协同 时空优化 参考文档&#xff1a;《考虑大规模电动汽车接入电网的双层优化调度策略_胡文平》中文版 《A bi-layer optimization based temporal and sp…
阅读更多...
【OfflineExplorer篇】网站固定神器OfflineExplorer基础教程（简）

【OfflineExplorer篇】网站固定神器OfflineExplorer基础教程（简）

【OfflineExplorer篇】网站固定神器OfflineExplorer基础教程&#xff08;简&#xff09; 简单记录下&#xff0c;可固定特定网页数据脱机使用—【蘇小沐】 文章目录 【OfflineExplorer篇】网站固定神器OfflineExplorer基础教程&#xff08;简&#xff09;OfflineExplorer简介 …
阅读更多...
C++基础 虚函数

C++基础 虚函数

参考 顺便记录下写的比较好的博客 C Primer Plus (第6版) C虚函数表 C内存模型 关于vtordisp知多少&#xff1f; 【VC】虚函数 内存结构 - 第四篇&#xff08;多重继承&#xff0c;无虚函数覆盖&#xff09; C 虚函数表剖析 虚函数 静态联编: 在编译过程中函数实现与函数关…
阅读更多...
react相关概念

react相关概念

真实DOM和虚拟DOM区别 react关于虚拟DOM和真实DOM 虚拟DOM比较“轻”&#xff0c;真实DOM比较“重”&#xff0c;因为虚拟DOM是React在用&#xff0c;无需真实DOM上那么多属性 虚拟DOM最终一定会转为真实DOM放入页面 JSX JSX: 全称JavsScript XML 是react定义的一种类似于XM…
阅读更多...
西门子S7-1200内部存储区和掉电数据保持设置

西门子S7-1200内部存储区和掉电数据保持设置

S7-1200内部存储区分类 S7-1200的内部存储区分为工作存储区、装载存储区和保持性存储区三种。 装载存储区 是非易失性存储区。用于存储用户项目文件&#xff08;用户程序、数据和组态&#xff09;。 如果不使用存储卡&#xff0c;用户使用TIA PORTAL软件下载项目即下载到CPU内…
阅读更多...
jpg图片怎么压缩大小，3个有效工具分享

jpg图片怎么压缩大小，3个有效工具分享

jpg图片怎么压缩大小&#xff1f;很多小伙伴都会用电脑来保存平时拍摄在的照片吧&#xff0c;拍摄的照片大多是jpg格式的&#xff0c;如果图片的体积太大&#xff0c;那么可能会占用很多的电脑存储空间&#xff0c;最后的结果是电脑变得非常慢&#xff0c;甚至卡死。平时我们在…
阅读更多...
Python词云图的制作与案例分享

Python词云图的制作与案例分享

一、基本知识 Python 有很多可用于制作词云图的库&#xff0c;其中比较常用的有 wordcloud 和 jieba。 wordcloud 是一个用于生成词云图的 Python 库&#xff0c;其使用了 Python 的 PIL 库和 numpy 库。您可以使用 pip 命令来安装 wordcloud 库&#xff1a; pip install wo…
阅读更多...
《计算机网络——自顶向下方法》精炼——2.6.2-2.7.1

《计算机网络——自顶向下方法》精炼——2.6.2-2.7.1

“An investment in knowledge pays the best interest.” - Benjamin 文章目录 分布式散列表&#xff08;键-值&#xff09;对散列函数逻辑上的实现环形DHT对等方扰动对等方离开对等方加入 UDP套接字编程客户端代码服务器端代码 分布式散列表 分布式散列表是一种数据库。集中…
阅读更多...
NIO基础 - 网络编程

NIO基础 - 网络编程

non-blocking io 非阻塞 IO 1. 三大组件 1.1 Channel & Buffer channel 有一点类似于 stream&#xff0c;它就是读写数据的双向通道&#xff0c;可以从 channel 将数据读入 buffer&#xff0c;也可以将 buffer 的数据写入 channel&#xff0c;而之前的 stream 要么是输入…
阅读更多...
STM32配置ADC2（DMA）进行采集 DAC 输出-1

STM32配置ADC2（DMA）进行采集 DAC 输出-1

1.实验目标 在正点原子的ADC&#xff08;DMA&#xff09;例程上&#xff0c;将ADC1改成ADC2来采集电压&#xff0c;并且进行测试 开发板&#xff1a;正点原子探索者STM32F407ZG 2.查看adc.h和开发指南需要修改哪些配置 ADC相关 通过查看开发指南我们发现&#xff0c;ADC1 和…
阅读更多...
垃圾分类算法

垃圾分类算法

垃圾分类算法 垃圾分类算法系统整体结构Python环境TensorFlow环境微信小程序及后台服务器环境数据预处理 垃圾分类算法 基于TensorFlow和VGG-16卷积神经网络训练垃圾分类模型&#xff0c;通过服务器实现分类模型移植到移动端&#xff0c;并在微信小程序中进行应用。 系统整体…
阅读更多...
【ROS仿真实战】机器人模型描述文件介绍（二）

【ROS仿真实战】机器人模型描述文件介绍（二）

文章目录 前言一、URDF与XACRO简介1.1 URDF1.2 XACRO 二、三维模型的选择DAE还是STL&#xff1f;三、 总结 前言 URDF和XACRO是ROS机器人领域中用于描述机器人模型的两种XML格式文件&#xff0c;都是使用XML语法来定义机器人模型的结构、物理特性以及运动学参数等。URDF (Unif…
阅读更多...
还在用MySQL存日志?

还在用MySQL存日志?

1. 引言 随着智能硬件成本降低和互联网网络的发展&#xff0c;在生活中场景的设备都已接入了网络中&#xff0c;其中传感器成为了设备获取外界信息的眼睛&#xff0c;网络成为设备交流的桥梁。在设备的交互中&#xff0c;往往存在着触发源&#xff0c;即标识控制指令的来源&am…
阅读更多...
大型水利投资集团，打造数智财资管理新范式

大型水利投资集团，打造数智财资管理新范式

随着我国城市化进程的不断推进&#xff0c;城市基础设施在国民经济中的作用愈加重要&#xff0c;其建设水平直接影响一个城市的竞争力。国有城投、水投等企业作为城市基础设施建设的主要参与者&#xff0c;其重要性不言而喻。随着国家、地方对基础设施重要性认识的加深以及政府…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023