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

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

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

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

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

一. 如何清除浮动

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

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

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

(2) 清除浮动的⽅式？

定⾼法

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

缺点：但是一旦高度写死，父元素的高度将不能自动适应子元素的高度。
在父元素的最后面添加⼀个空的div，并给这个空的div盒子设置clear: both样式。

缺点：会在页面中添加多余的结构。
```
<div style="clear:both"></div>
```
给⽗元素添加 overflow: hidden样式

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

在父元素中添加伪元素: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) 实现方式

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

内联首屏关键CSS

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

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

注意：但是较大的css代码并不合适内联（初始拥塞窗口、没有缓存)，而其余代码则采取外部引用方式
异步加载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'">
```
资源压缩

利用webpack、gulp/grunt、rollup等模块化工具，将css代码进行压缩，使文件变小，大大降低了浏览器的加载时间
合理使用选择器
css匹配的规则是从右往左开始匹配，例如#markdown .content h3匹配规则如下：
- 先找到h3标签元素
- 然后去除祖先不是.content的元素
- 最后去除祖先不是#markdown的元素
注：如果嵌套的层级更多，页面中的元素更多，那么匹配所要花费的时间代价自然更高

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

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

减少使用昂贵的属性

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

不要使用@import

css样式文件有两种引入方式：
1. link元素
2. @import

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

其他
- 减少重排操作，以及减少不必要的重绘
- 了解哪些属性可以继承而来，避免对这些属性重复编写
- 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 的区别

从本质上看，link属于XHTML标签，而@import完全是CSS提供的一种方式。
从用法上看，link标签除了可以加载CSS外，还可以做很多其它的事情，例如定义RSS，还可以定义rel连接属性等，但是@import就只能加载CSS了。
两者的加载的顺序不同。link引用的CSS会在页面载入时就同时加载，但是@import 需要页面网页完全载入之后再加载。
从兼容性上看，由于link是XHTML标签，不存在容问性题。但是@import 是CSS2.1 提出的，所以低版本的浏览器不支持
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 表达式

结束语：

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