前端高频面试题-HTML和CSS篇（一）

💻 前端高频面试题-HTML和CSS篇（一） 🏠专栏：前端面试题
👀个人主页：繁星学编程🍁
🧑个人简介：一个不断提高自我的平凡人🚀
🔊分享方向：目前主攻前端，其他知识也会阶段性分享🍀
👊格言：☀️没有走不通的路，只有不敢走的人！☀️
👉让我们一起进步，一起成为更好的自己！！！🎁

前端高频面试题-HTML和CSS篇（一）

本文主要讲述的前端高频面试题知识有：

1. 如何清除浮动
2. 如果要做优化，CSS提高性能的方法有哪些？
3. css中，有哪些方式可以隐藏页面元素？区别?
4. link 与 @import 的区别
5. 重绘与回流(重排)

一. 如何清除浮动

(1) 为什么要清除浮动？

清除浮动目的：主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题——也就是高度塌陷的问题。

场景：首先给div父盒子只设置一个边框，内部放两个未设置浮动的div子盒子，此时子盒子会默认撑开父盒子。而当给内部的子盒子设置float属性的时候，就会出现父盒子变成了一条直线，此时就出现了父盒子的高度塌陷现象。为了解决这一问题就需要用到清除浮动。

(2) 清除浮动的⽅式？

1. 定⾼法

   就是给父元素设定一个高度

   缺点：但是一旦高度写死，父元素的高度将不能自动适应子元素的高度。

2. 在父元素的最后面添加⼀个空的div，并给这个空的div盒子设置clear: both样式。

   缺点：会在页面中添加多余的结构。

   <div style="clear:both"></div>
   

3. 给⽗元素添加 overflow: hidden样式

   缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。

4. 在父元素中添加伪元素:after，并在伪元素中设置清除浮动的样式

   这样做和添加一个空白div的原理一样，可以达到一个相同的效果，而且不会在页面中添加多余的div，也是最推荐使用的方式。

   .clearfix:after {content: ""; /*设置内容为空*/height: 0; /*⾼度为0*/line-height: 0; /*⾏⾼为0*/display: block; /*将⽂本转为块级元素*/visibility: hidden; /*将元素隐藏*/clear: both; /*清除浮动*/
   }
   .clearfix {zoom: 1; /*为了兼容IE*/
   }
   

说明：当前 flex 已成为主流布局⽅式，适应性强, 且稳定, 所以浮动使⽤率⽬前已逐步降低。

二. 如果要做优化，CSS提高性能的方法有哪些？

(1) 前言

每一个网页都离不开css，但是很多人又认为，css主要是用来完成页面布局的，像一些细节或者优化，就不需要怎么考虑，实际上这种想法是不正确的。作为页面渲染和内容展现的重要环节，css影响着用户对整个网站的第一体验。因此，在整个产品研发过程中，css性能优化同样需要贯穿全程。

(2) 实现方式

实现方式有很多种，主要有如下：

1. 内联首屏关键CSS

   在打开一个页面，页面首要内容出现在屏幕的时间影响着用户的体验，而通过内联css关键代码能够使浏览器在下载完html后就能立刻渲染

   外部引用css代码，在解析html结构过程中遇到外部css文件，才会开始下载css代码，再渲染

   注意：但是较大的css代码并不合适内联（初始拥塞窗口、没有缓存)，而其余代码则采取外部引用方式

2. 异步加载CSS

   在CSS文件请求、下载、解析完成之前，CSS会阻塞渲染，浏览器将不会渲染任何已处理的内容
   前面加载内联代码后，后面的外部引用css则没必要阻塞浏览器渲染。这时候就可以采取异步加载的方案，主要有如下：

   • 使用javascript将link标签插到head标签最后

     // 创建link标签 
     const myCSS = document.createElement( "link" ); 
     myCSS.rel = "stylesheet"; 
     myCSS.href = "mystyles.css"; 
     // 插入到header的最后位置 
     document.head.insertBefore( myCSS, document.head.childNodes[document.head.childNodes.length - 1 ].nextSibling );
     

   • 设置link标签media属性为noexis，浏览器会认为当前样式表不适用当前类型，会在不阻塞页面渲染的情况下再进行下载。加载完成后，将media的值设为screen或all，从而让浏览器开始解析CSS

     <link rel="stylesheet" href="mystyles.css" media="noexist" onload="this.media='all'">
     

   • 通过rel属性将link元素标记为alternate可选样式表，也能实现浏览器异步加载。同样别忘了加载完成之后，将rel设回stylesheet

     <link rel="alternate stylesheet" href="mystyles.css" onload="this.rel='stylesheet'">
     

3. 资源压缩

   利用webpack、gulp/grunt、rollup等模块化工具，将css代码进行压缩，使文件变小，大大降低了浏览器的加载时间

4. 合理使用选择器

   css匹配的规则是从右往左开始匹配，例如#markdown .content h3匹配规则如下：

   • 先找到h3标签元素
   • 然后去除祖先不是.content的元素
   • 最后去除祖先不是#markdown的元素

   注：如果嵌套的层级更多，页面中的元素更多，那么匹配所要花费的时间代价自然更高

所以我们在编写选择器的时候，可以遵循以下规则：

• 不要嵌套使用过多复杂选择器，最好不要三层以上
• 使用id选择器就没必要再进行嵌套
• 通配符和属性选择器效率最低，避免使用

5. 减少使用昂贵的属性

在页面发生重绘的时候，昂贵属性如box-shadow/border-radius/filter/透明度/:nth-child等，会降低浏览器的渲染性能

6. 不要使用@import

   css样式文件有两种引入方式：

   1. link元素
   2. @import

@import会影响浏览器的并行下载，使得页面在加载时增加额外的延迟，增添了额外的往返耗时，而且多个@import可能会导致下载顺序紊乱
如：一个css文件index.css包含了以下内容：@import url(“reset.css”)
那么浏览器就必须先把index.css下载、解析和执行后，才下载、解析和执行第二个文件reset.css

7. 其他
   • 减少重排操作，以及减少不必要的重绘
   • 了解哪些属性可以继承而来，避免对这些属性重复编写
   • cssSprite，合成所有icon图片，用宽高加上backgroud-position的背景图方式显现出我们要的icon图，减少了http请求
   • 把小的icon图片转成base64编码
   • CSS3动画或者过渡尽量使用transform和opacity来实现动画，不要使用left和top属性

(3) 参考文献

https://juejin.cn/post/6844903649605320711#heading-1

三. css中，有哪些方式可以隐藏页面元素？区别?

(1) 前言

在平常的样式排版中，我们经常遇到将某个模块隐藏的场景
通过css隐藏元素的方法有很多种，它们看起来实现的效果是一致的
但实际上每一种方法都有一丝轻微的不同，这些不同决定了在一些特定场合下使用哪一种方法

(2) 实现方式

通过css实现隐藏元素方法有如下：

• display:none
• visibility:hidden
• opacity:0
• 设置height、width模型属性为0
• position:absolute
• clip-path

1. display:none

设置元素的display为none是最常用的隐藏元素的方法

.hide { display:none; 
}

使用后的特点：元素不可见，无法响应点击事件，不占据空间，也就是说它会导致浏览器的重排和重绘。消失后，自身绑定的事件不会触发，也不会有过渡效果

2. visibility:hidden

设置元素的visibility为hidden也是一种常用的隐藏元素的方法从页面上仅仅是隐藏该元素，DOM结果均会存在，只是当时在一个不可见的状态，不会触发重排，但是会触发重绘

.hidden{visibility:hidden;
}

使用后的特点：元素不可见，占据页面空间，无法响应点击事件，自身的事件不会触发

3. opacity:0

opacity属性表示元素的透明度，将元素的透明度设置为0后，在我们用户眼中，元素也是隐藏的不会引发重排，一般情况下也会引发重绘。

如果利用 animation 动画，对 opacity 做变化（animation会默认触发GPU加速），则只会触发 GPU 层面的 composite，不会触发重绘

.transparent{opacity:0;
}

特点：改变元素透明度，元素不可见，占据页面空间，可以响应点击事件

4. 设置height、width属性为0

将元素的margin，border，padding，height和width等影响元素盒模型的属性设置成0，如果元素内有子元素或内容，还应该设置其overflow:hidden来隐藏其子元素

.hiddenBox{margin:0;border:0;padding:0;height:0;width:0;overflow:hidden;
}

特点：元素不可见，不占据页面空间，无法响应点击事件

5. position:absolute

将元素移出可视区域

.hide{position:absolute;top:-9999px;left:-9999px;
}

特点：元素不可见，不影响页面布局

6. clip-path

通过裁剪的形式

.hide{clip-path:polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}

特点：元素不可见，占据页面空间，无法响应点击事件

总结

最常用的还是display:none和visibility:hidden，其他的方式只能认为是奇招，它们的真正用途并不是用于隐藏元素，所以并不推荐使用它们

(3)区别

关于display: none、visibility: hidden、opacity: 0的区别，如下表所示：

	display:none	visibility:hide	opacity: 0
页面中	不存在	存在	存在
回流	会	不会	不会
重绘	会	会	不一定
自身绑定事件	不触发	不触发	可触发
transition	不支持	支持	支持
子元素可复原	不能	能	不能
被遮挡的元素可触发事件	能	能	不能

(4) 参考文献

https://www.cnblogs.com/a-cat/p/9039962.html

四. link 与 @import 的区别

1. 从本质上看，link属于XHTML标签，而@import完全是CSS提供的一种方式。
2. 从用法上看，link标签除了可以加载CSS外，还可以做很多其它的事情，例如定义RSS，还可以定义rel连接属性等，但是@import就只能加载CSS了。
3. 两者的加载的顺序不同。link引用的CSS会在页面载入时就同时加载，但是@import 需要页面网页完全载入之后再加载。
4. 从兼容性上看，由于link是XHTML标签，不存在容问性题。但是@import 是CSS2.1 提出的，所以低版本的浏览器不支持
5. link 支持使用 Javascript 控制 DOM 去改变样式；而@import不支持。

注：RSS(Really Simple Syndication)是一种描述和同步网站内容的格式，是使用最广泛的XML应用。
REL属性用于定义链接的文件和HTML文档之间的关系。

五. 重绘与回流(重排)

(1) 概念

重排：当DOM的变化影响了元素的几何信息(元素的的位置和尺寸大小)，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。
重绘：当一个元素的外观发生改变，但没有改变布局，重新把元素外观绘制出来的过程，所以重绘跳过了创建布局树和分层的阶段。

(2) 触发条件

1. 触发重排的情况如下：

• 添加或删除可见的DOM元素
• 元素的位置发生变化
• 元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）
• 内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代
• 页面一开始渲染的时候（这避免不了）
• 浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）

2. 触发重绘的情况如下：

可以把页面理解为一个黑板，黑板上有一朵画好的小花。现在我们要把这朵从左边移到了右边，那我们要先确定好右边的具体位置，画好形状（回流），再画上它原有的颜色（重绘）

除此之外还有一些其他引起重绘行为：

• 颜色的修改
• 文本方向的修改
• 阴影的修改

注：触发回流一定会触发重绘

(3) 如何减少

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

结束语：

希望对您有一点点帮助，如有错误欢迎小伙伴指正。
👍点赞：您的赞赏是我前进的动力！
⭐收藏：您的支持我是创作的源泉！
✍评论：您的建议是我改进的良药！
一起加油！！！💪💪💪