💻 前端高频面试题-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样式文件有两种引入方式：
- link元素
- @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表达式
结束语：
希望对您有一点点帮助，如有错误欢迎小伙伴指正。
👍点赞：您的赞赏是我前进的动力！
⭐收藏：您的支持我是创作的源泉！
✍评论：您的建议是我改进的良药！
一起加油！！！💪💪💪
1892
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
