![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端CSS/HTML面试题
前端CSS/HTML面试题
临在❀
这个作者很懒,什么都没留下…
展开
-
浏览器面试题
然而,值得注意的是,diff 算法并不是完全无代价的,因此在某些情况下,手动优化和使用 key 来管理列表的性能也是重要的。的,浏览器会暂停DOM的构建,直到脚本执行完毕。是一个用于设置 HTTP Cookie 的属性,它的作用是限制客户端(通常是浏览器)对 Cookie 的访问,只允许通过 HTTP 或 HTTPS 协议进行访问,而禁止通过脚本(如 JavaScript)进行访问。当 React 进行列表的 diff 比较时,它会遍历旧的虚拟 DOM 树和新的虚拟 DOM 树中的子节点,并尝试匹配它们。原创 2023-09-11 15:41:07 · 492 阅读 · 1 评论 -
在JS中tramsform与translate区别
总结来说,transform属性是一个通用的属性,可以应用多种变换效果,而translate属性是transform属性的一种特定形式,只能实现平移效果。原创 2023-09-05 08:02:55 · 1754 阅读 · 0 评论 -
渲染10w条数据怎么优化,虚拟列表技术上怎么实现,闪烁怎么解决
可以通过计算可见区域的高度和滚动位置,动态确定需要渲染的数据项,并在滚动时更新渲染内容。使用硬件加速:通过使用 CSS 的 transform 属性或使用 CSS3 的 3D 动画效果(如 translate3D)来触发硬件加速,可以提高页面的渲染性能,减少闪烁。这种技术将滚动容器的高度固定,通过动态改变容器内部元素的位置来模拟滚动效果,从而减少实际渲染的元素数量,提高性能。使用双缓冲技术:双缓冲技术将渲染的内容缓冲到一个隐藏的画布上,等内容完全渲染好后再将其显示到页面上,从而避免了渲染中间状态的闪烁。原创 2023-09-04 15:38:28 · 346 阅读 · 0 评论 -
overflow相关面试题
属性通常用于处理容器中的文本或内容的溢出问题。通过选择合适的值,你可以控制是否允许溢出、是否显示滚动条以及如何处理溢出的内容。这可以帮助你创建更好的用户界面和布局。是 CSS 属性,用于控制元素的溢出内容的处理方式,当元素中的内容超出其容器时,可以通过该属性进行控制。属性通常与容器元素(如。原创 2023-09-04 15:00:51 · 72 阅读 · 0 评论 -
响应式布局(3种) + flex计 相关面试题
有很多现成的前端框架,如Bootstrap、Foundation等,它们内置了响应式设计的功能。利用这些框架,你可以更快速地创建响应式网站。使用百分比而不是固定的像素宽度来设置元素的宽度,这样元素的宽度可以根据其父元素的宽度进行调整。使用CSS的媒体查询来应用不同的样式规则,根据设备的尺寸和其他特性。原创 2023-09-04 10:59:37 · 1648 阅读 · 0 评论 -
await接受成功的promise,失败的promise用try catch
关键字用于等待一个 Promise 对象的解决(fulfillment)或拒绝(rejection)。并不仅限于接受成功的 Promise,它也可以接受被拒绝的 Promise。并不仅限于接受成功的 Promise,它同样可以处理被拒绝的 Promise,并使用。将接收到解决的值,并在控制台上打印出来。如果 Promise 被拒绝,函数返回的 Promise 对象。如果 Promise 成功解决,将接收到拒绝的原因,并在控制台上打印出来。在 JavaScript 中,结构来处理拒绝的情况。原创 2023-09-03 17:38:16 · 448 阅读 · 0 评论 -
flex-shrink计算题
让我们假设容器的初始宽度为 300 像素,并且子项的初始宽度分别为 100 像素、200 像素和 150 像素。现在,容器的宽度减小到 200 像素,我们来计算每个子项的最终宽度。因此,当容器的宽度缩小到 200 像素时,每个子项的最终宽度分别为 83.33 像素、166.67 像素和 100 像素。当容器的可用空间不足时,它们将根据这些比例进行收缩。假设有一个 flex 容器,其中包含三个子项,它们的。子项1:1 * 16.67 = 16.67 像素。首先,我们将所有子项的。最后,我们将每个子项的。原创 2023-09-03 17:31:17 · 293 阅读 · 0 评论 -
flex:1
它将 “flex-grow”、“flex-shrink” 和 “flex-basis” 设置为特定的值。与其他 “flex” 值相比,“flex: 1” 是常用的简写,用于实现子元素的平均分配剩余空间。“flex: 1” 等效于 “flex: 1 1 0”,这意味着子元素可以增长、缩小,并且初始大小为零。当希望子元素平均分配剩余空间,以充分利用父容器的可用空间时,可以使用 “flex: 1”。“flex: 1” 是 “flex” 属性的一种。原创 2023-09-03 17:30:30 · 227 阅读 · 0 评论 -
DOM事件流和事件委托
有时父元素和其子元素都绑定了同一类型事件,我们不想让事件向上传播,触发哪个元素的事件,就执行那个元素的事件处理,不干扰其他元素事件。事件发生时会在元素节点与根节点之间按照特定的顺序传播,路径所经过的所有节点都会收到该事件,这个传播过程即。节点,这一过程称为事件捕获过程,是从外到内的传播过程。下面代码中,“事件触发-1”不会执行了,被下面的。类型值,可指定事件冒泡阶段还是捕获阶段触发,下面代码中,按钮点击时,事件会依次触发。树,依次向下,直到实际事件触发元素,既。树,逐级向上传递,直到。原创 2023-04-16 18:46:36 · 304 阅读 · 0 评论 -
搞懂clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop的区别
https://juejin.cn/post/7018372558999257102转载 2023-03-14 08:30:42 · 57 阅读 · 0 评论 -
px-%-em-rem-vw-vh有什么区别?
传统的项目开发中,我们只会用到px、%、em这几个单位,它可以适用于大部分的项目开发,并且拥有比较良好的兼容性。但是你知道吗?从css3开始,浏览器对逻辑单位的支持又提升到了另外一个境界,增加了rem、vh、vw、vm等一些新的长度单位,我们可以利用这些新的单位开发出比较良好的响应式页面,随之覆盖多种不同分辨率的终端,包括移动设备等。现在让我们来看下这些长度单位有什么区别。原创 2023-03-13 03:44:28 · 307 阅读 · 0 评论 -
IOS系统中元素被触摸时产生的半透明灰色遮罩怎么去掉?
1原创 2023-03-09 05:31:37 · 154 阅读 · 0 评论 -
rem和em的区别
rem和em的区别原创 2023-03-09 05:30:30 · 68 阅读 · 0 评论 -
怎么让Chrome浏览器支持小于12px的文字?
怎么让Chrome浏览器支持小于12px的文字原创 2023-03-09 05:18:59 · 87 阅读 · 0 评论 -
如何关闭IOS键盘首字母自动大写
如何关闭IOS键盘首字母自动大写原创 2023-03-09 05:15:38 · 117 阅读 · 0 评论 -
对BFC规范(块级格式化上下文: Block Formatting Context) 的理解?)
比如这个灰色的边框,萎缩在页面顶端,它本该包住橙色盒子123的,但是却没有包住,加了overflow: hidden之后才能实现BFC,包住橙色盒子123。然而,这种方法会使元素脱离正常的文档流,可能导致其他布局问题。④position的值为absolute、fixed会创建一个新的BFC。我们最常用的 还是overflow: hidden.这种方法通常对布局和样式的影响最小。2、BFC的原则:如果一个元素具有BFC,那么内部元素再怎么折腾,都不会影响外部的元素。1、了解BFC: 块级格式化上下文。原创 2023-03-09 04:51:16 · 88 阅读 · 0 评论 -
一个盒子不给宽度和高度,如何水平垂直居中?
一个盒子不给宽度和高度,如何水平垂直居中?通过给父盒子添加:原创 2023-03-09 04:33:31 · 86 阅读 · 0 评论 -
用CSS画一个三角形
用CSS画一个三角形原创 2023-03-09 04:26:06 · 62 阅读 · 0 评论 -
html / css 基础面试题 --- 页面导入时,使用link与@import有什么区别?
指令都可以用于在HTML文档中导入CSS样式表。指令在组织和管理样式表之间的依赖关系方面具有优势。在实际项目中,根据具体需求和场景选择使用。标签在大多数情况下具有更好的加载性能和易用性。原创 2023-03-09 02:28:06 · 102 阅读 · 0 评论