前端面试宝典总结之CSS（1）

本文章 对各大学习技术论坛知识点，进行总结、归纳自用学习，共勉🙏

上一篇👉: 前端面试宝典总结1- html

1.分析比较 opacity: 0、visibility: hidden、display: none 区别和适用场景

属性	结构	继承性	性能
display: none	元素完全从渲染树消失，不占据空间，不可见	非继承属性，子孙元素随之消失	修改造成文档回流，性能消耗较大；读屏器不读取其内容
visibility: hidden	元素保留在渲染树中，占据空间，内容不可见，不可点击	是继承属性，子孙元素可独立控制显示状态	仅本元素重绘，性能消耗较少；读屏器会读取其内容
opacity: 0	元素保留在渲染树中并占据原有空间，内容透明可见（但完全透明），可点击	非继承属性，子孙元素独立控制透明度	造成重绘，性能消耗相对较少；不影响读屏器读取，因内容仍在逻辑流中

• 结构： display:none: 会让元素完全从渲染树中消失，渲染的时候不占据任何空间, 不能点击， visibility: hidden:不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，不能点击 opacity: 0: 不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，可以点击
• 继承： display: none和opacity: 0：是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示。 visibility: hidden：是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式。
• 性能： displaynone : 修改元素会造成文档回流,读屏器不会读取display: none元素内容，性能消耗较大 visibility:hidden: 修改元素只会造成本元素的重绘,性能消耗较少读屏器读取visibility: hidden元素内容 opacity: 0 ： 修改元素会造成重绘，性能消耗较少

2.如何用 css 或 js 实现多行文本溢出省略效果

<style type="text/css">
  	<!-- 单行-->
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
	<!-- 多行-->
	-webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3; //行数
	overflow: hidden;
</style>

3.两种盒模型以及区别？

盒模型也称为框模型，就是从盒子顶部俯视所得的一张平面图，用于描述元素所占用的空间。它有两种盒模型，W3C盒模型和IE盒模型（IE6以下，不包括IE6以及怪异模式下的IE5.5+）
理论上两者的主要区别是二者的盒子宽高是否包括元素的边框和内边距。当用CSS给给某个元素定义高或宽时，IE盒模型中内容的宽或高将会包含内边距和边框，而W3C盒模型并不会。

4.对requestAnimationframe的理解

以下是 requestAnimationFrame 与其他常见动画更新方法的对比

方法	描述	优点	缺点
requestAnimationFrame	浏览器优化的动画帧更新，与显示器刷新率同步执行动画代码。	自动适应显示器刷新率，提供更流畅的动画体验；由浏览器自动调度，优化资源利用，避免不必要的渲染；可暂停，在页面不可见时自动停止，节省资源。	需要手动管理动画循环；功能较为基础，复杂动画可能需要结合其他技术实现。
setTimeout / setInterval	在指定延迟时间后执行函数。setTimeout 仅执行一次，setInterval周期执行。	简单易用，适用于不严格要求动画流畅度或定时任务。	不考虑显示器刷新率，可能导致动画卡顿或过度渲染；资源管理不灵活，可能在不需要时仍执行。
CSS Transitions	通过CSS属性变化实现过渡动画效果。	语法简洁，易于实现简单动画；浏览器优化，自动处理动画过程。	动画类型和控制相对有限；难以实现复杂的动态效果或与JavaScript紧密互动的动画。
CSS Animations	提供更强大的关键帧动画功能，可通过@keyframes定义动画序列。	支持复杂动画序列，灵活控制动画每一阶段；同样享受浏览器优化。	代码相对于CSS Transitions更为复杂；与JavaScript交互不如requestAnimationFrame直接。

requestAnimationFrame 是浏览器提供的一个用于执行动画的原生API

MDN对该方法的描述：window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。

• CPU节能：使用SetTinterval 实现的动画，当页面被隐藏或最小化时，SetTinterval 仍然在后台执行动画任务，由于此时页面处于不可见或不可用状态，刷新动画是没有意义的，完全是浪费CPU资源。而RequestAnimationFrame则完全不同，当页面处理未激活的状态下，该页面的屏幕刷新任务也会被系统暂停，因此跟着系统走的RequestAnimationFrame也会停止渲染，当页面被激活时，动画就从上次停留的地方继续执行，有效节省了CPU开销。
• 函数节流：在高频率事件( resize, scroll 等)中，为了防止在一个刷新间隔内发生多次函数执行，RequestAnimationFrame可保证每个刷新间隔内，函数只被执行一次，这样既能保证流畅性，也能更好的节省函数执行的开销，一个刷新间隔内函数执行多次时没有意义的，因为多数显示器每16.7ms刷新一次，多次绘制并不会在屏幕上体现出来。
• 减少DOM操作：requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧。
• 简化代码：由于它直接与浏览器的刷新机制同步，开发者无需手动计算时间间隔或担心不同设备的刷新率差异，从而简化了代码逻辑。
• 兼容性：尽管大多数现代浏览器都支持requestAnimationFrame，但在一些较旧的浏览器中可能需要提供回退方案，例如使用setTimeout或setInterval作为替代。
  总之，requestAnimationFrame是实现高性能、流畅动画的关键技术，尤其适合于需要频繁更新界面的应用场景，如游戏、复杂的UI交互等。

5.居中为什么要使用 transform（为什么不使用 marginLeft/Top）

transform 属于合成属性（composite property），对合成属性进行 transition/animation 动画将会创建一个合成层（composite layer），这使得被动画元素在一个独立的层中进行动画。通常情况下，浏览器会将一个层的内容先绘制进一个位图中，然后再作为纹理（texture）上传到 GPU，只要该层的内容不发生改变，就没必要进行重绘（repaint），浏览器会通过重新复合（recomposite）来形成一个新的帧。
top/left属于布局属性，该属性的变化会导致重排（reflow/relayout），所谓重排即指对这些节点以及受这些节点影响的其它节点，进行CSS计算->布局->重绘过程，浏览器需要为整个层进行重绘并重新上传到 GPU，造成了极大的性能开销。

6.粘性布局（sticky）

position 中的 sticky 值是 CSS3 新增的，设置了 sticky 值后，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。
sticky 属性值特点：

• 该元素并不脱离文档流，仍然保留元素原本在文档流中的位置。
• 当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。亦即如果你设置了top: 50px，那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定，不再向上移动。
• 元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于viewport来计算元素的偏移量

7.png8、png16、png32的区别，及png 的压缩原理

PNG图片主要有三个类型，分别为 PNG 8/ PNG 24 / PNG 32。

类型	位深度	颜色种类	透明度支持	适用场景
PNG 8	8 bits	256种颜色	有限透明度（索引透明）	颜色较少的图形、图标、简单图像
PNG 24	24 bits	16777216种颜色	无	需要丰富色彩表现的图像、照片
PNG 32	32 bits	16777216种颜色 + 透明度	完全透明度（Alpha通道）	需要透明背景和丰富色彩的复杂图像、图标、Web设计元素

• PNG 8：PNG 8中的8，其实指的是8bits，相当于用2^{8（2的8次方）大小来存储一张图片的颜色种类，2}8等于256，也就是说PNG 8能存储256种颜色，一张图片如果颜色种类很少，将它设置成PNG 8得图片类型是非常适合的。
• PNG 24：PNG 24中的24，相当于3乘以8 等于 24，就是用三个8bits分别去表示 R（红）、G（绿）、B（蓝）。R(0-255),G(0-255),B(0-255)，可以表达256乘以256乘以256=16777216种颜色的图片，这样PNG 24就能比PNG 8表示色彩更丰富的图片。但是所占用的空间相对就更大了。
• NG 32：PNG 32中的32，相当于PNG 24 加上 8bits的透明颜色通道，就相当于R（红）、G（绿）、B（蓝）、A（透明）。R(0255),G(0255),B(0255),A(0255)。比PNG 24多了一个A（透明），也就是说PNG 32能表示跟PNG 24一样多的色彩，并且还支持256种透明的颜色，能表示更加丰富的图片颜色类型。

PNG图片的压缩，分两个阶段：

• 预解析（Prediction）：这个阶段就是对png图片进行一个预处理，处理后让它更方便后续的压缩。
• 压缩（Compression）：执行Deflate压缩，该算法结合了 LZ77 算法和 Huffman 算法对图片进行编码。

8.space-between 和 space-around 的区别

flex 布局，其实就是一个边距的区别，按水平布局来说，space-between是两端对齐，在左右两侧没有边距，而space-around是每个 子项目左右方向的 margin 相等，所以两个item中间的间距会比较大。

9.CSS3 中 transition 和 animation 的属性分别有哪些？

CSS3 Transition 属性

属性名	描述
transition-property	指定应用过渡效果的CSS属性。值可以是特定属性名或all，表示所有属性。
transition-duration	定义过渡效果完成所需的时间，单位通常是秒(s)或毫秒(ms)。
transition-timing-function	规定过渡效果的速度曲线。常见的值有ease（默认）、linear、ease-in、ease-out、ease-in-out等。
transition-delay	设置过渡效果开始前的延迟时间，单位同样是秒(s)或毫秒(ms)。

CSS3 Animation 属性

属性名	描述
animation-name	指定@keyframes动画的名称。
animation-duration	定义动画完成一个周期所需要的时间。
animation-timing-function	function 规定动画的速度曲线，与transition的同名属性相似，定义动画播放的速度模式。
animation-delay	设置动画开始之前的延迟时间。
animation-iteration-count	定义动画的播放次数。值可以是整数，表示播放次数；infinite表示无限循环。
animation-direction	规定动画是否反向播放以及如何反向播放。值包括normal、reverse、alternate、alternate-reverse等。
animation-fill-mode	$规定当动画不播放时（例如动画完成之后），要应用到元素的样式。值如none、forwards、backwards、both。
animation-play-state	定义动画是否正在运行或暂停。值为running或paused。

@keyframes规则本身不是属性，但它是定义动画关键帧序列的关键部分，它不直接附加到元素上，而是通过animation-name引用。
这些属性共同为CSS3提供了强大的动画功能，使得开发者能够在网页上创建复杂的动态效果，而无需依赖JavaScript。

10. 如何触发重排和重绘

任何改变用来构建渲染树的信息都会导致一次重排或重绘：

• 添加、删除、更新DOM节点
• 通过display: none隐藏一个DOM节点-触发重排和重绘
• 通过visibility: hidden隐藏一个DOM节点-只触发重绘，因为没有几何变化
• 移动或者给页面中的DOM节点添加动画
• 添加一个样式表，调整样式属性
• 用户行为，例如调整窗口大小，改变字号，或者滚动。

11.重绘与重排的区别？

• 重排: 部分渲染树（或者整个渲染树）需要重新分析并且节点尺寸需要重新计算，表现为重新生成布局，重新排列元素。
• 重绘: 由于节点的几何属性发生改变或者由于样式发生改变，例如改变元素背景色时，屏幕上的部分内容需要更新，表现为某些元素的外观被改变。

单单改变元素的外观，肯定不会引起网页重新生成布局，但当浏览器完成重排之后，将会重新绘制受到此次重排影响的部分
重排和重绘代价是高昂的，它们会破坏用户体验，并且让UI展示非常迟缓，而相比之下重排的性能影响更大，在两者无法避免的情况下，一般我们宁可选择代价更小的重绘。
重绘不一定会出现重排，重排必然会出现重绘。

12.如何优化图片

1. 对于很多装饰类图片，尽量不用图片，因为这类修饰图片完全可以用 CSS 去代替。
2. 对于移动端来说，屏幕宽度就那么点，完全没有必要去加载原图浪费带宽。一般图片都用 CDN 加载，可以计算出适配屏幕的宽度，然后去请求相应裁剪好的图片。
3. 小图使用 base64 格式
4. 将多个图标文件整合到一张图片中（雪碧图）
5. 选择正确的图片格式：
   ● 对于能够显示 WebP 格式的浏览器尽量使用 WebP 格式。因为 WebP 格式具有更好的图像数据压缩算法，能带来更小的 图片体积，而且拥有肉眼识别无差异的图像质量，缺点就是兼容性并不好
   ● 小图使用 PNG，其实对于大部分图标这类图片，完全可以使用 SVG 代替
   ● 照片使用 JPEG

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

translate 是 transform 属性的⼀个值。改变transform或opacity不会触发浏览器重新布局（reflow）或重绘（repaint），只会触发复合（compositions）。⽽改变绝对定位会触发重新布局，进⽽触发重绘和复合。transform使浏览器为元素创建⼀个 GPU 图层，但改变绝对定位会使⽤到 CPU。 因此translate()更⾼效，可以缩短平滑动画的绘制时间。 ⽽translate改变位置时，元素依然会占据其原始空间，绝对定位就不会发⽣这种情况。

14.transition和animation的区别？

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

15.描述渐进增强和优雅降级之间的不同？

渐进增强 （progressive enhancement）：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 （graceful degradation）：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

16.link和@import的区别？

两者都是外部引用CSS的方式

• link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS
• link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
• link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
• link支持使用Javascript控制DOM去改变样式；而@import不支持。

17.伪元素和伪类的区别和作用？

• 伪元素：在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成。它们只在外部显示可见，但不会在文档的源代码中找到它们，因此，称为“伪”元素

<style>
	p::before {content:"PHP";}
	p::after {content:"JAVA";}
	p::first-line {background:red;}
	p::first-letter {font-size:20px;}
</style>

• 伪类：将特殊的效果添加到特定选择器上。它是已有元素上添加类别的，不会产生新的元素。

<style>
	a:hover {color: #4169E1}
	p:first-child {color: red}
</style>

18. 盒模型的理解

CSS3中的盒模型有以下两种：标准盒子模型、IE盒子模型

盒模型都是由四个部分组成的，分别是margin、border、padding和content。
标准盒模型和IE盒模型的区别在于设置width和height时，所对应的范围不同：

• 标准盒模型的width和height属性的范围只包含了content，
• IE盒模型的width和height属性的范围包含了border、padding和content。

可以通过修改元素的box-sizing属性来改变元素的盒模型：

• box-sizing: content-box表示标准盒模型（默认值）
• box-sizing: border-box表示IE盒模型（怪异盒模型）

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

浏览器会把inline内联元素间的空白字符（空格、换行、Tab等）渲染成一个空格。为了美观，通常是一个<li>放在一行，这导致<li>换行后产生换行字符，它变成一个空格，占用了一个字符的宽度。
解决办法：

1. 为<li>设置float:left。不足：有些容器是不能设置浮动，如左右切换的焦点图等。
2. 将所有<li>写在同一行。不足：代码不美观。
3. 将<ul>内的字符尺寸直接设为0，即font-size:0。不足：<ul>中的其他字符尺寸也被设为0，需要额外重新设定其他字符尺寸，且在Safari浏览器依然会出现空白间隔。
4. 消除<ul>的字符间隔letter-spacing:-8px，不足：这也设置了<li>内的字符间隔，因此需要将<li>内的字符间隔设为默认letter-spacing:normal。

20.替换元素的概念及计算规则

通过修改某个属性值呈现的内容就可以被替换的元素就称为“替换元素”。
替换元素除了内容可替换这一特性以外，还有以下特性：

• 内容的外观不受页面上的CSS的影响：用专业的话讲就是在样式表现在CSS作用域之外。如何更改替换元素本身的外观需要类似appearance属性，或者浏览器自身暴露的一些样式接口。
• 有自己的尺寸：在Web中，很多替换元素在没有明确尺寸设定的情况下，其默认的尺寸（不包括边框）是300像素×150像素。
• 在很多CSS属性上有自己的一套表现规则：比较具有代表性的就是vertical-align属性，对于替换元素和非替换元素，vertical-align属性值的解释是不一样的。比方说vertical-align的默认值的baseline，很简单的属性值，基线之意，被定义为字符x的下边缘，而替换元素的基线却被硬生生定义成了元素的下边缘。
• 所有的替换元素都是内联水平元素：也就是替换元素和替换元素、替换元素和文字都是可以在一行显示的。但是，替换元素默认的display值却是不一样的，有的是inline，有的是inline-block。

替换元素的尺寸从内而外分为三类：

• 固有尺寸： 指的是替换内容原本的尺寸。例如，图片、视频作为一个独立文件存在的时候，都是有着自己的宽度和高度的。
• HTML尺寸： 只能通过HTML原生属性改变，这些HTML原生属性包括的width和height属性、的size属性。
• CSS尺寸： 特指可以通过CSS的width和height或者max-width/min-width和max-height/min-height设置的尺寸，对应盒尺寸中的content-box。

这三类的计算规则具体如下：

• 如果没有CSS尺寸和HTML尺寸，则使用固有尺寸作为最终的宽高。
• 如果没有CSS尺寸，则使用HTML尺寸作为最终的宽高。
• 如果有CSS尺寸，则最终尺寸由CSS属性决定。
• 如果“固有尺寸”含有固有的宽高比例，同时仅设置了宽度或仅设置了高度，则元素依然按照固有的宽高比例显示。
• 如果上面的条件都不符合，则最终宽度表现为300像素，高度为150像素。
• 内联替换元素和块级替换元素使用上面同一套尺寸计算规则。

下一篇👉: 前端面试宝典总结2-CSS（2）