珠海 网站建设,气象网站建设,co域名 大网站,湖北网站推广服务#x1f4bb; 前端高频面试题-HTML和CSS篇#xff08;一#xff09; #x1f3e0;专栏#xff1a;前端面试题 #x1f440;个人主页#xff1a;繁星学编程#x1f341; #x1f9d1;个人简介#xff1a;一个不断提高自我的平凡人#x1f680; #x1f50a;分享方向… 前端高频面试题-HTML和CSS篇一 专栏前端面试题 个人主页繁星学编程 个人简介一个不断提高自我的平凡人 分享方向目前主攻前端其他知识也会阶段性分享 格言☀️没有走不通的路只有不敢走的人☀️ 让我们一起进步一起成为更好的自己 文章目录前端高频面试题-HTML和CSS篇一一. 如何清除浮动(1) 为什么要清除浮动(2) 清除浮动的⽅式二. 如果要做优化CSS提高性能的方法有哪些(1) 前言(2) 实现方式(3) 参考文献三. css中有哪些方式可以隐藏页面元素区别?(1) 前言(2) 实现方式1. display:none2. visibility:hidden3. opacity:04. 设置height、width属性为05. position:absolute6. clip-path(3)区别(4) 参考文献四. link 与 import 的区别五. 重绘与回流(重排)(1) 概念(2) 触发条件(3) 如何减少前端高频面试题-HTML和CSS篇一
本文主要讲述的前端高频面试题知识有 如何清除浮动如果要做优化CSS提高性能的方法有哪些css中有哪些方式可以隐藏页面元素区别?link 与 import 的区别重绘与回流(重排) 一. 如何清除浮动
(1) 为什么要清除浮动
清除浮动目的主要是为了解决父元素因为子级元素浮动引起的内部高度为0的问题——也就是高度塌陷的问题。
场景首先给div父盒子只设置一个边框内部放两个未设置浮动的div子盒子此时子盒子会默认撑开父盒子。而当给内部的子盒子设置float属性的时候就会出现父盒子变成了一条直线此时就出现了父盒子的高度塌陷现象。为了解决这一问题就需要用到清除浮动。
(2) 清除浮动的⽅式 定⾼法 就是给父元素设定一个高度 缺点但是一旦高度写死父元素的高度将不能自动适应子元素的高度。 在父元素的最后面添加⼀个空的div并给这个空的div盒子设置clear: both样式。 缺点会在页面中添加多余的结构。 div styleclear: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 relstylesheet hrefmystyles.css medianoexist onloadthis.mediaall通过rel属性将link元素标记为alternate可选样式表也能实现浏览器异步加载。同样别忘了加载完成之后将rel设回stylesheet link relalternate stylesheet hrefmystyles.css onloadthis.relstylesheet资源压缩 利用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:nonevisibility:hiddenopacity:0设置height、width模型属性为0position:absoluteclip-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
将元素的marginborderpaddingheight和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:nonevisibility:hideopacity: 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 表达式
结束语 希望对您有一点点帮助如有错误欢迎小伙伴指正。 点赞您的赞赏是我前进的动力 ⭐收藏您的支持我是创作的源泉 ✍评论您的建议是我改进的良药 一起加油
