2024 高级前端面试题之 CSS 「精选篇」

该内容主要整理关于 CSS 的相关面试题,其他内容面试题请移步至 「最新最全的前端面试题集锦」 查看。

CSS模块精选篇

  • 1. 盒模型
  • 2. BFC
  • 3. 层叠上下文
  • 4. 居中布局
  • 5. 选择器权重计算方式
  • 6. 清除浮动
  • 7. link 与 @import 的区别
  • 8. CSS3的新特性
  • 9. CSS动画和过渡
  • 10. 有哪些方式(CSS)可以隐藏页面元素
  • 11. 说说em/px/rem/vh/vw区别
  • 12. flex布局
  • 13. 关于伪类 LVHA 的解释
  • 14. calc函数
  • 15. 伪类和伪元素
  • 16. 浏览器是怎样解析 CSS 选择器的
  • 17. 浏览器如何判断是否支持 webp 格式图片
  • 18. CSS加载问题
  • 19. 文字超出显示省略号
  • 20. 页面变灰
  • 21. CSS中可继承的属性
  • 22. 常规流(文档流)是个怎样的排列关系
  • 23. inline-block的使用场景
  • 24. position: fixed什么时候会失效?
  • 25. 回流(reflow)和重绘(repaint)的理解
  • 26. GPU加速的原因
  • 27. 说说will-change
  • 28. z-index和background的覆盖关系
  • 29. 移动端中CSS你是使用什么单位
  • ==----------待更新----------==
  • 30. 说说设备像素、CSS像素、设备独立像素、DPR、PPI之间的区别
  • 31. 在移动端中怎样初始化根元素的字体大小
  • 32. 移动端中不同手机HTML默认的字体大小都是一样的吗
  • 33. line-height 如何继承
  • 34. CSS怎么开启硬件加速(GPU加速)
  • 35. flex:1 是哪些属性组成的
  • 36. CSS选择器有哪些?优先级?哪些属性可以继承?
  • 37. flex弹性盒布局模型及适用场景?
  • 38. 介绍一下grid网格布局
  • 39. 什么是响应式设计?响应式设计的基本原理是什么
  • 40. 如果要做优化,CSS提高性能的方法有哪些?
  • 41. 如何实现单行/多行文本溢出的省略样式?
  • 42. 让Chrome支持小于12px 的文字方式有哪些
  • 43. 说说对CSS预编语言的理解?有哪些区别?
  • 44. 编程题
      • 画一条 0.5px 的线
      • 如何画一个三角形
      • 圆?半圆?椭圆?
      • CSS画圆半圆扇形三角梯形
      • 两栏布局:左边定宽,右边自适应方案
      • 三栏布局:左右两边宽度固定中间自适应


1. 盒模型

  • 盒模型有两种, IE盒子模型、W3C盒子模型;
  • 盒模型: 内容(content)、填充(padding)、边界(margin)、 边框(border);
  • 区 别: IE的 content 部分把 borderpadding 计算进去了;

标准盒子模型的模型图
在这里插入图片描述

标准盒模型
盒子总宽度 = width + padding + border + margin;
盒子总高度 = height + padding + border + margin
width/height 只是内容(content)高度,不包含 padding 和 border 值

IE 怪异盒子模型
在这里插入图片描述

IE 怪异盒模型
盒子总宽度 = width + margin;
盒子总高度 = height + margin;
也就是,width/height 包含了 content、 padding 和 border 值

通过 box-sizing 来改变元素的盒模型

CSS 中的 box-sizing 属性定义了引擎应该如何计算一个元素的总宽度和总高度

  • box-sizing: content-box; 默认的标准(W3C)盒模型元素效果,元素的 width/height 不包含 paddingborder,与标准盒子模型表现一致
  • box-sizing: border-box; 触发怪异(IE)盒模型元素的效果,元素的 width/height 包含 paddingborder,与怪异盒子模型表现一致
  • box-sizing: inherit; 继承父元素 box-sizing 属性的值

小结

  • 盒子模型构成:内容(content)、内填充(padding)、 边框(border)、外边距(margin)
  • IE8及其以下版本浏览器,未声明 DOCTYPE,内容宽高会包含内填充和边框,称为怪异盒模型(IE盒模型)
  • 标准(W3C)盒模型:元素宽度 = width + padding + border + margin
  • 怪异(IE)盒模型:元素宽度 = width + margin
  • 标准浏览器通过设置 css3 的 box-sizing: border-box 属性,触发“怪异模式”解析计算宽高

2. BFC

详细介绍请移步至:对BFC的深层理解

块级格式化上下文,是一个独立的渲染区域,让处于 BFC 内部的元素与外部的元素相互隔离,使内外元素的定位不会相互影响。
IE下为 Layout,可通过 zoom:1 触发

触发条件

  • 根元素,即 HTML 元素
  • 绝对定位元素 position: absolute/fixed
  • 行内块元素 display 的值为 inline-blocktableflexinline-flexgridinline-grid
  • 浮动元素:float 值为 leftright
  • overflow 值不为 visible,为 autoscrollhidden

规则

  • 【1】属于同一个 BFC 的两个相邻 Box 垂直排列
  • 【2】属于同一个 BFC 的两个相邻 Boxmargin 会发生重叠
  • 【3】BFC 中子元素的 margin box 的左边, 与包含块 (BFC) border box的左边相接触 (子元素 absolute 除外)
  • 【4】BFC 的区域不会与 float 的元素区域重叠
  • 【5】计算 BFC 的高度时,浮动子元素也参与计算
  • 【6】文字层不会被浮动层覆盖,环绕于周围

应用

  • 利用【2】:可以阻止 margin 重叠
  • 利用【4】:实现自适应两栏布局
  • 利用【5】:可以避免高度塌陷
  • 可以包含浮动元素 —— 清除内部浮动(清除浮动的原理是两个div都位于同一个 BFC 区域之中)

示例

  • 详细示例见:对BFC的深层理解

3. 层叠上下文

元素提升为一个比较特殊的图层,在三维空间中 (z轴) 高出普通元素一等。

触发条件

  • 根层叠上下文(html)
  • position
  • css3属性
    • flex
    • transform
    • opacity
    • filter
    • will-change
    • webkit-overflow-scrolling

层叠等级:层叠上下文在z轴上的排序

  • 在同一层叠上下文中,层叠等级才有意义

  • z-index 的优先级最高

  • 层叠等级见下图👇
    在这里插入图片描述

4. 居中布局

详细介绍见【居中布局】

5. 选择器权重计算方式

!important > 内联样式 = 外联样式 > ID选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 元素选择器 = 伪元素选择器 > 通配选择器 = 后代选择器 = 兄弟选择器

  1. 属性后面加 !import 会覆盖页面内任何位置定义的元素样式
  2. 作为 style 属性写在元素内的样式
  3. id选择器
  4. 类选择器
  5. 元素选择器
  6. 通配符选择器(*
  7. 浏览器自定义或继承

同一级别:后写的会覆盖先写的

css选择器的解析原则:选择器定位DOM元素是从右往左的方向,这样可以尽早的过滤掉一些不必要的样式规则和元素

6. 清除浮动

1. 在浮动元素后面添加 clear:both 的空 div 元素

<div class="container"><div class="left"></div><div class="right"></div><div style="clear:both"></div>
</div>

2. 给父元素添加 overflow:hidden 或者 auto 样式,触发 BFC

<style>
.container{width: 300px;background-color: #aaa;overflow: hidden;zoom:1;   /*兼容IE*/
}
</style>
<div class="container"><div class="left"></div><div class="right"></div>
</div>

3. 使用伪元素,也是在元素末尾添加一个点并带有 clear: both 属性的元素实现的【推荐】

推荐:不会在页面新增div,文档结构更加清晰

<style>
.clearfix{zoom: 1; /*兼容IE*/
}
.clearfix:after{content: "";height: 0;clear: both;display: block;visibility: hidden;
}
</style>
<div class="container clearfix"><div class="left"></div><div class="right"></div>
</div>

7. link 与 @import 的区别

  • link 功能较多,可以定义 RSS,定义 Rel 等作用,而 @import 只能用于加载 css
  • 当解析到 link时,页面会同步加载所引的 css,而 @import 所引用的 css 会等到页面加载完才被加载
  • @import 需要 IE5 以上才能使用
  • link 可以使用 js 动态引入,@import 不行

8. CSS3的新特性

详细介绍见【CSS3的新特性】

在这里插入图片描述

9. CSS动画和过渡

常见的动画效果有很多,如平移旋转缩放等等,复杂动画则是多个简单动画的组合

css实现动画的方式,有如下几种:

  • transition 实现渐变动画
  • transform 转变动画
  • animation 实现自定义动画

详细介绍见【CSS动画和过渡】

10. 有哪些方式(CSS)可以隐藏页面元素

  • opacity:0:本质上是将元素的透明度将为0,就看起来隐藏了,但是依然占据空间且可以交互
  • visibility:hidden: 与上一个方法类似的效果,占据空间,但是不可以交互了
  • overflow:hidden: 这个只隐藏元素溢出的部分,但是占据空间且不可交互
  • display:none: 这个是彻底隐藏了元素,元素从文档流中消失,既不占据空间也不交互,也不影响布局
  • z-index:-9999: 原理是将层级放到底部,这样就被覆盖了,看起来隐藏了
  • transform: scale(0,0): 平面变换,将元素缩放为0,但是依然占据空间,但不可交互

11. 说说em/px/rem/vh/vw区别

传统的项目开发中,我们只会用到px%em这几个单位,它可以适用于大部分的项目开发,且拥有比较良好的兼容性

从CSS3开始,浏览器对计量单位的支持又提升到了另外一个境界,新增了remvhvwvm等一些新的计量单位

利用这些新的单位开发出比较良好的响应式页面,适应多种不同分辨率的终端,包括移动设备等

在css单位中,可以分为长度单位、绝对单位,如下表所指示

CSS单位
相对长度单位em、ex、ch、remvwvh、vmin、vmax、%
绝对长度单位cm、mm、in、px、pt、pc

px(像素)

px,表示像素,所谓像素就是呈现在我们显示器上的一个个小点,每个像素点都是大小等同的,所以像素为计量单位被分在了绝对长度单位中

有些人会把px认为是相对长度,原因在于在移动端中存在设备像素比,px实际显示的大小是不确定的

这里之所以认为px为绝对单位,在于px的大小和元素的其他属性无关

em

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸(1em = 16px

为了简化 font-size 的换算,我们需要在css中的 body 选择器中声明 font-size= 62.5%,这就使 em 值变为 16px*62.5% = 10px

这样 12px = 1.2em, 10px = 1em, 也就是说只需要将你的原来的px 数值除以 10,然后换上 em作为单位就行了

特点:

  • em 的值并不是固定的
  • em 会继承父级元素的字体大小
  • em 是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸
  • 任意浏览器的默认字体高都是 16px

rem(常用)

  • 根据屏幕的分辨率动态设置 html 的文字大小,达到等比缩放的功能
  • 保证 html 最终算出来的字体大小,不能小于12px
  • 在不同的移动端显示不同的元素比例效果
  • 如果htmlfont-size:20px的时候,那么此时的1rem = 20px
  • 把设计图的宽度分成多少分之一,根据实际情况
  • rem做盒子的宽度,viewport缩放

vh、vw
vw ,就是根据窗口的宽度,分成100等份,100vw 就表示满宽,50vw 就表示一半宽。(vw 始终是针对窗口的宽),同理,vh则为窗口的高度

这里的窗口分成几种情况:

  • 在桌面端,指的是浏览器的可视区域
  • 移动端指的就是布局视口

vwvh,比较容易混淆的一个单位是%,不过百分比宽泛的讲是相对于父元素:

  • 对于普通定位元素就是我们理解的父元素
  • 对于position: absolute;的元素是相对于已定位的父元素
  • 对于position: fixed;的元素是相对于 ViewPort(可视窗口)

小结

  • px:绝对单位,页面按精确像素展示
  • %:相对于父元素的宽度比例
  • em:相对单位,基准点为父节点字体的大小,如果自身定义了 font-size 按自身来计算(浏览器默认字体是 16px),整个页面内1em 不是一个固定的值
  • rem:相对单位,可理解为 root em, 相对根节点 html 的字体大小来计算
  • vhvw:主要用于页面视口大小布局,在页面布局上更加方便简单
    • vw:屏幕宽度的1%
    • vh:屏幕高度的1%
    • vmin:取vwvh中较小的那个(如:10vh=100px 10vw=200pxvmin=10vh=100px
    • vmax:取vwvh中较大的那个(如:10vh=100px 10vw=200pxvmax=10vw=200px

12. flex布局

13. 关于伪类 LVHA 的解释

a 标签有四种状态:链接访问前、链接访问后、鼠标滑过、激活,分别对应四种伪类:link:visited:hover:active

当链接未访问过时:

  • 当鼠标滑过 a 链接时,满足 :link:hover 两种状态,要改变 a 标签的颜色,就必须将 :hover 伪类在 :link 伪类后面声明;
  • 当鼠标点击激活a链接时,同时满足:link:hover:active 三种状态,要显示a标签激活时的样式(:active), 必须将 :active 声明放到 :link:hover之后。因此得出 LVHA 这个顺序。
  • 当链接访问过时,情况基本同上,只不过需要将 :link 换成 :visited

这个顺序能不能变?可以,但也只有 :link:visited 可以交换位置,因为一个链接要么访问过要么没访问过,不可能同时满足,也就不存在覆盖的问题。

14. calc函数

calc 函数是css3新增的功能,可以使用 calc() 计算 bordermarginpadingfont-sizewidth 等属性设置动态值

注意点:

  1. 运算符前后都需要保留一个空格,例如:width: calc(100% - 10px);
  2. calc() 函数支持 "+", "-", "*", "/" 运算;
  3. 对于不支持 calc() 的浏览器,整个属性值表达式将被忽略。不过我们可以对那些不支持 calc() 的浏览器,使用一个固定值作为回退。

15. 伪类和伪元素

css 引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说,伪类和伪元素都是用来修饰不在文档树中的部分

伪类

伪类存在的意义是为了通过选择器找到那些不存在DOM树中的信息以及不能被常规CSS选择器获取到的信息

  1. 获取不存在与DOM树中的信息。比如a标签的:link:visited 等,这些信息不存在与DOM树结构中,只能通过CSS选择器来获取;
  2. 获取不能被常规CSS选择器获取的信息。比如:要获取第一个子元素,我们无法用常规的CSS选择器获取,但可以通过 :first-child 来获取到。

在这里插入图片描述

伪元素

伪元素用于创建一些不在文档树中的元素,并为其添加样式。
比如说,我们可以通过 :before 来在一个元素前增加一些文本,并为这些文本添加样式。虽然用户可以看到这些文本,但是这些文本实际上不在文档树中。常见的伪元素有:::before::after::first-line::first-letter::selection::placeholder

伪类与伪元素的区别在于:有没有创建一个文档树之外的元素

::after:after 的区别?

在实际的开发工作中,我们会看到有人把伪元素写成 :after,这实际是 CSS2CSS3 新旧标准的规定不同而导致的。
CSS2 中的伪元素使用1个冒号,在 CSS3 中,为了区分伪类和伪元素,规定伪元素使用2个冒号。所以,对于 CSS2 标准的老伪元素,比如 :first-line:first-letter:before:after,写一个冒号浏览器也能识别,但对于 CSS3 标准的新伪元素,比如 ::selection,就必须写2个冒号了

CSS3新增伪类有那些?

  • p:first-of-type 选择属于其父元素的首个<p>元素的每个<p> 元素。
  • p:last-of-type 选择属于其父元素的最后 <p> 元素的每个<p> 元素。
  • p:only-of-type 选择属于其父元素唯一的 <p>元素的每个 <p> 元素。
  • p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
  • p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
  • :after 在元素之前添加内容,也可以用来做清除浮动。
  • :before 在元素之后添加内容。
  • :enabled 表示任何已启用的元素。
  • :disabled 控制表单控件的禁用状态。
  • :checked 单选框或复选框被选中。

16. 浏览器是怎样解析 CSS 选择器的

  • 样式系统从关键选择器开始匹配,然后左移查找规则选择器的祖先元素。只要选择器的子树一直在工作,样式系统就会持续左移,直到和规则匹配,或者是因为不匹配而放弃该规则。
  • 试想一下,如果采用从左至右的方式读取CSS规则,那么大多数规则读到最后(最右)才会发现是不匹配的,这样做会费时耗能,最后有很多都是无用的;
  • 而如果采取从右向左的方式,那么只要发现最右边选择器不匹配,就可以直接舍弃了,避免了许多无效匹配。

17. 浏览器如何判断是否支持 webp 格式图片

  • 宽高判断法。 通过创建 image 对象,将其 src 属性设置为 webp 格式的图片,然后在 onload 事件中获取图片的宽高,如果能够获取,则说明浏览器支持 webp 格式图片。如果不能获取或者触发了 onerror 函数,那么就说明浏览器不支持 webp 格式的图片
  • canvas判断方法。 可以动态的创建一个canvas对象,通过canvastoDataURL将设置为webp格式,然后判断返回值中是否含有image/webp字段,如果包含则说明支持WebP,反之则不支持

18. CSS加载问题

根据页面渲染流程可得知:

  • css加载不会阻塞DOM树的解析;
  • css加载会阻塞DOM树的渲染;
  • css加载会阻塞后面js语句的执行;

19. 文字超出显示省略号

文字单行超出显示省略号

div {width: 200px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}

文字多行超出显示省略号

div {width: 200px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;
}

该方法适用于WebKit浏览器及移动端。

跨浏览器兼容方案:

div {position:relative;line-height:1.4em;/* 3 times the line-height to show 3 lines */height:4.2em;overflow:hidden;
}
div::after {content:"...";font-weight:bold;position:absolute;bottom:0;right:0;padding:0 20px 1px 45px;
}

20. 页面变灰

body {filter: grayscale(100%); /* 百分比或者 0~1 */
}

21. CSS中可继承的属性

可继承的只有:颜色文字字体间距行高对齐方式列表样式

  • 所有元素可继承:visibilitycursor
  • 内联元素可继承:
    • letter-spacing
    • word-spacing
    • white-space
    • line-height
    • color
    • font
    • font-family
    • font-size
    • font-style
    • font-variant
    • font-weight
    • text-decoration
    • text-transform
    • direction
  • 块状元素可继承:
    • text-indent
    • text-align
  • 列表元素可继承:
    • list-style
    • list-style-type
    • list-style-position
    • list-style-image

22. 常规流(文档流)是个怎样的排列关系

将窗体自上而下分成一行一行,并在每行中按从左至右的挨次排放元素。

23. inline-block的使用场景

  1. 要设置某些子元素在一行或者多行内显示,尤其是排列方向一致的情况下,应尽量用 inline-block
  2. 希望若干个元素平行排列,且在父元素中居中排列,此时可以用 inline-block,且给父元素设 text-align: center
  3. inline-block 可以用一排 a {display: inline-block} 实现横向导航栏,无论是居左的导航栏还是居右的都适用
  4. 对于第一种和第三种情况虽然都可以使用 float 来实现,不过 inline-block 会比它好一些【原因:浮动会脱离文档流,导致父元素高度塌陷】

24. position: fixed什么时候会失效?

设置了 position: fixed 固定定位属性的元素会脱离文档流,达到“超然脱俗”的境界。

也就是说此时给这种元素设置 top, left, right, bottom 等属性是根据浏览器窗口定位的,与其上级元素的位置无关。

但是有一种情况例外:

  • 若是设置了 position: fixed 属性的元素,它的祖先元素设置了 transform 属性则会导致固定定位属性失效。
  • 只要 transform 设置的不是none,都会影响到 position: fixed,因为此时就会相对于祖先元素指定坐标,而不是浏览器窗口。

注意,这个特性表现,目前只在Chrome浏览器/FireFox浏览器下有。IE浏览器,包括IE11, fixed还是fixed的表现。

25. 回流(reflow)和重绘(repaint)的理解

一、分析

在HTML中,每个元素都可以理解成一个盒子,在浏览器解析过程中,会涉及到回流与重绘:

  • 回流:布局引擎会根据各种样式计算每个盒子在页面上的大小与位置
  • 重绘:当计算好盒模型的位置、大小及其他属性后,浏览器根据每个盒子特性进行绘制

具体的浏览器解析渲染机制如下所示:

在这里插入图片描述

  • 解析 HTML,生成 DOM 树,解析 CSS,生成 CSSOM 树
  • DOM树CSSOM树结合,生成渲染树(Render Tree)
  • Layout(回流):根据生成的渲染树,进行回流(Layout),得到节点的几何信息(位置,大小)
  • Painting(重绘):根据渲染树以及回流得到的几何信息,得到节点的绝对像素
  • Display:将像素发送给GPU,展示在页面上
  • 在页面初始渲染阶段,回流不可避免的触发,可以理解成页面一开始是空白的元素,后面添加了新的元素使页面布局发生改变
  • 当我们对 DOM 的修改引发了 DOM几何尺寸的变化(比如修改元素的宽、高或隐藏元素等)时,浏览器需要重新计算元素的几何属性,然后再将计算的结果绘制出来
  • 当我们对 DOM 的修改导致了样式的变化(colorbackground-color),却并未影响其几何属性时,浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式,这里就仅仅触发了重绘

二、如何触发

要想减少回流和重绘的次数,首先要了解回流和重绘是如何触发的

回流触发时机

  • 回流这一阶段主要是计算节点的位置和几何信息,那么当页面布局和几何信息发生变化的时候,就需要回流,如下面情况:
    • 添加或删除可见的DOM元素
    • 元素的位置发生变化
    • 元素的尺寸发生变化(包括外边距、内边框、边框大小、高度和宽度等)
    • 内容发生变化,比如文本变化或图片被另一个不同尺寸的图片所替代
    • 页面一开始渲染的时候(这避免不了)
    • 浏览器的窗口尺寸变化(因为回流是根据视口的大小来计算元素的位置和大小的)
    • 还有一些容易被忽略的操作:获取一些特定属性的值。浏览器为了获取这些值,需要进行回流操作
      • offsetTop
      • offsetLeft
      • offsetWidth
      • offsetHeight
      • scrollTop
      • scrollLeft
      • scrollWidth
      • scrollHeight
      • clientTop
      • clientLeft
      • clientWidth
      • clientHeight
      • 这些属性有一个共性,就是需要通过即时计算得到。因此浏览器为了获取这些值,也会进行回流
    • 除此还包括 getComputedStyle 方法,原理是一样的

回流过程:由于DOM的结构发生了改变,所以需要从生成DOM这一步开始,重新经过样式计算、生成布局树、建立图层树、再到生成绘制列表以及之后的显示器显示这整一个渲染过程走一遍,开销是非常大的

  • 重绘触发时机

    通过构造渲染树和重排(回流)阶段,我们知道了哪些节点是可见的,以及可见节点的样式和具体的几何信息(元素在视口内的位置和尺寸大小),接下来就可以将渲染树的每个节点都转换为屏幕上的实际像素,这个阶段就叫做重绘

    触发回流一定会触发重绘

    • DOM 的修改导致了样式的变化,并且没有影响几何属性的时候,会导致重绘(repaint)。

重绘过程:由于没有导致 DOM 几何属性的变化,因此元素的位置信息不需要更新,所以当发生重绘的时候,会跳过生存布局树和建立图层树的阶段,直接到生成绘制列表,然后继续进行分块、生成位图等后面一系列操作。

浏览器优化机制

  • 由于每次重排都会造成额外的计算消耗,因此大多数浏览器都会通过队列化修改并批量执行来优化重排过程。浏览器会将修改操作放入到队列里,直到过了一段时间或者操作达到了一个阈值,才清空队列
  • 当获取布局信息的操作的时候,会强制队列刷新,包括前面讲到的 offsetTop 等方法都会返回最新的数据
  • 因此浏览器不得不清空队列,触发回流重绘来返回正确的值

三、如何避免

  • 避免频繁使用 style,而是采用修改 class 的方式。
  • 将动画效果应用到 position 属性为 absolutefixed 的元素上。
  • 批量操作 DOM,比如读取某元素 offsetWidth 属性存到一个临时变量,再去使用,而不是频繁使用这个计算属性;又比如利用 document.createDocumentFragment() 来添加要被添加的节点,处理完之后再插入到实际 DOM
  • 也可以先为元素设置 display: none,操作结束后再把它显示出来。因为在 display 属性为 none 的元素上进行的 DOM 操作不会引发回流和重绘
  • 对于 resizescroll 等进行防抖/节流处理。
  • 避免频繁读取会引发回流/重绘的属性,如果确实需要多次使用,就用一个变量缓存起来。
  • 利用 CSS3transformopacityfilter 这些属性可以实现合成的效果,也就是 CPU 加速。

👇 举例分析
// TODO

26. GPU加速的原因

在合成的情况下,会直接跳过布局和绘制流程,直接进入非主线程处理的部分,即直接交给合成线程处理。交给它处理有两大好处:

  1. 能够充分发挥GPU的优势。合成线程生成位图的过程中会调用线程池,并在其中使用GPU进行加速生成,而 GPU 是擅长处理位图数据的。
  2. 没有占用主线程的资源,即使主线程卡住了,效果依然能够流畅地展示。

27. 说说will-change

will-changeCSS3 新增的标准属性,它的作用很单纯,就是"增强页面渲染性能",当我们在通过某些行为触发页面进行大面积绘制的时候,浏览器往往是没有准备,只能被动的使用CUP去计算和重绘,由于事先没有准备,对于一些复杂的渲染可能会出现掉帧、卡顿等情况。而 will-change则是在真正的行为触发之前告诉浏览器可能要进行重绘了,相当于浏览器把CUP拉上了,能从容的面对接下来的变形。

常用的语法主要有:

  • whil-change: scroll-position; 即将开始滚动
  • will-change: contents; 内容要动画或者变化了
  • will-transform; transform相关的属性要变化了(常用)

注意:

  • will-change 虽然可以开启加速,但是一定要适度使用
  • 开启加速的代价为手机的耗电量会增加
  • 使用时遵循最小化影响原则,可以对伪元素开启加速,独立渲染
  • 可以写在伪类中,例如 hover 中,这样移出元素的时候就会自动 removewill-change
  • 如果使用JS添加了 will-change,注意要及时remove掉,方式就是 style.willChange = 'auto'

28. z-index和background的覆盖关系

在这里插入图片描述

29. 移动端中CSS你是使用什么单位

比较常用的:

  • em:定义字体大小时以父级的字体大小为基准;定义长度单位时以当前字体大小为基准。【例父级font-size: 14px,则子级 font-size: 1em;font-size: 14px;;若定义长度时,子级的字体大小如果为14px,则子级 width: 2em; width: 24px
  • rem:以根元素的字体大小为基准。【例如htmlfont-size: 14px,则子级1rem = 14px
  • %:以父级的宽度为基准。【例父级width: 200px,则子级width: 50%; height:50%;width:100px; height:100px;
  • vwvh:基于视口的宽度和高度(视口不包括浏览器的地址栏工具栏和状态栏)。【例如视口宽度为1000px,则60vw = 600px;
  • vminvmaxvmin为当前vwvh中较小的一个值;vmax为较大的一个值。【例如视口宽度375px,视口高度812px,则100vmin = 375px;100vmax = 812px;

不常用的:

  • exchex以字符"x"的高度为基准;【例如1ex表示和字符"x"一样长】ch以数字"0"的宽度为基准;【例如2ch表示和2个数字"0"一样长】

移动端布局总结:

  • 移动端布局的方式主要使用 remflex,可以结合各自的优点,比如 flex 布局很灵活,但是字体的大小不好控制,我们可以使用 rem 和媒体查询控制字体的大小,媒体查询视口的大小,然后不同的上视口大小下设置设置 htmlfont-size
  • 可单独制作移动端页面也可响应式pc端移动端共用一个页面。没有好坏,视情况而定,因势利导

----------待更新----------

30. 说说设备像素、CSS像素、设备独立像素、DPR、PPI之间的区别

31. 在移动端中怎样初始化根元素的字体大小

32. 移动端中不同手机HTML默认的字体大小都是一样的吗

33. line-height 如何继承

34. CSS怎么开启硬件加速(GPU加速)

35. flex:1 是哪些属性组成的

36. CSS选择器有哪些?优先级?哪些属性可以继承?

37. flex弹性盒布局模型及适用场景?

38. 介绍一下grid网格布局

39. 什么是响应式设计?响应式设计的基本原理是什么

40. 如果要做优化,CSS提高性能的方法有哪些?

41. 如何实现单行/多行文本溢出的省略样式?

42. 让Chrome支持小于12px 的文字方式有哪些

43. 说说对CSS预编语言的理解?有哪些区别?

44. 编程题

画一条 0.5px 的线

如何画一个三角形

圆?半圆?椭圆?

CSS画圆半圆扇形三角梯形

两栏布局:左边定宽,右边自适应方案

三栏布局:左右两边宽度固定中间自适应

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/248153.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何使用Python+Flask搭建本地Web站点并结合内网穿透公网访问?

文章目录 前言1. 安装部署Flask并制作SayHello问答界面2. 安装Cpolar内网穿透3. 配置Flask的问答界面公网访问地址4. 公网远程访问Flask的问答界面 前言 Flask是一个Python编写的Web微框架&#xff0c;让我们可以使用Python语言快速实现一个网站或Web服务&#xff0c;本期教程…

HTML以及CSS相关知识总结(一)

近日就开始回顾html和css相关知识啦&#xff0c;并且会学习html5和css3的新知识&#xff0c;以下是我对记忆不太深刻的地方以及新知识点的总结&#xff1a; Web标准&#xff1a; 结构&#xff1a;用于对网页元素进行整理和分类&#xff0c;即HTML 表现&#xff1a;用于设置网页…

Spring Boot如何统计一个Bean中方法的调用次数

目录 实现思路 前置条件 实现步骤 首先我们先自定义一个注解 接下来定义一个切面 需要统计方法上使用该注解 测试 实现思路 通过AOP即可实现&#xff0c;通过AOP对Bean进行代理&#xff0c;在每次执行方法前或者后进行几次计数统计。这个主要就是考虑好如何避免并发情况…

Spring cloud智慧工地信息平台管理系统源码

目录 报警统计 实时报警列表 工程进度 劳务信息 隐患信息 施工安全管理 人员证书管理 专项安全方案 安全方案审批 隐患排查管理 安全检查统计 危险源Top10 整改超时预警 检查问题数量统计 安全隐患趋势 安全日志管理 视频监控查看 视频回放 AI危险源识别 AI应用总览 AI设备 机械…

海外动态IP代理如何帮助批量注册TikTok账户?

Tik Tok作为全球最火爆的短视频社交平台&#xff0c;无论是商业推广还是个人使用&#xff0c;都有着巨大的吸引力。商业推广中经常需要批量注册Tik Tok账号&#xff0c;以便进行市场营销或者数据分析。那么&#xff0c;如何批量注册Tik Tok账号呢&#xff1f;这篇文章将为大家详…

路由、组件目录存放

文章目录 单页应用程序&#xff1a;SPA- Single Page Application路由的介绍VuePouter的介绍VueRouted 的使用 组件目录存放问题&#xff08;组件分类&#xff09; 单页应用程序&#xff1a;SPA- Single Page Application 单页应用&#xff08;SPA&#xff09;:所有功能在一个…

粒子群算法求解港口泊位调度问题(MATLAB代码)

粒子群算法&#xff08;Particle Swarm Optimization&#xff0c;PSO&#xff09;是一种基于群体智能的优化算法&#xff0c;它通过模拟鸟群或鱼群的行为来寻找最优解。在泊位调度问题中&#xff0c;目标是最小化所有船只在港时间的总和&#xff0c;而PSO算法可以帮助我们找到一…

GitLab 中国发行版如何设置镜像拉取策略?

最近在用极狐GitLab&#xff08;极狐GitLab 可以理解为 GitLab 在中国的发行版&#xff09; CI/CD 的时候遇到一个问题&#xff1a;CI/CD 中有一个 stage 需要拉取 dockerhub 上的镜像&#xff0c;但是由于 dockerhub 在国内的访问不是很顺畅&#xff0c;经常发生 timeout 的情…

Spring Boot + security + jwt 测试安全策略

一、测试概述 主要目的是测试security的用法。因测试搭建mysql和redis比较麻烦&#xff0c;所以我这里将自定义的jwt和用户信息缓存到程序的内存中。 本人测试的项目比较混乱&#xff0c;Spring Boot父类只标出有用的依赖。其子类用的版本为jdk11。后续会继续深入oauth2&#x…

【Linux 基础】常用基础指令(上)

文章目录 一、 创建新用户并设置密码二、ls指令ls指令基本概念ls指令的简写操作 三、pwd指令四、cd指令五、touch指令六、rm指令七、mkdir指令八、rmdir 指令 一、 创建新用户并设置密码 ls /home —— 查看存在多少用户 whoami —— 查看当前用户名 adduser 用户名 —— 创建新…

公司宣传电子画册的制作方法

​制作公司宣传电子画册是一种非常有效的方式&#xff0c;可以展示公司的形象和产品&#xff0c;同时也可以吸引更多的潜在客户。不仅低碳环保&#xff0c;还省了不少人力和财力&#xff0c;只要一个二维码、一个链接就能随时随地访问公司的宣传画册。以下是一些制作电子画册的…

(2024,双流编码器,文本引导的风格迁移,调制,FFT 和低频滤波)FreeStyle:使用扩散模型进行文本引导风格迁移

FreeStyle: Free Lunch for Text-guided Style Transfer using Diffusion Models 公和众和号&#xff1a;EDPJ&#xff08;进 Q 交流群&#xff1a;922230617 或加 VX&#xff1a;CV_EDPJ 进 V 交流群&#xff09; 目录 0. 摘要 3. 方法 3.1 LDM 3.2 FreeStyle 的模型结构…

springBoot配置文件加密

很多项目的配置文件里&#xff0c;包括数据库密码、缓存密码、还有一些第三方服务的Key都是直接配在里面&#xff0c;没有做任何加密处理&#xff01; 本次我用SpringBoot 集成 Jasypt 对数据库加密以及踩坑经验 1.集成依赖&#xff0c;我用的是目前最新的版本3.0.4版本 <…

常用芯片学习——AMS1117芯片

AMS1117 1A 低压差线性稳压器 使用说明 AMS1117 是一款低压差线性稳压电路&#xff0c;该电路输出电流能力为1A。该系列电路包含固定输出电压版本和可调输出电压版本&#xff0c;其输出电压精度为士1.5%。为了保证芯片和电源系统的稳定性&#xff0c;XBLWAMS1117 内置热保护和…

语音生成、写作增强、论文辅助、英文学习,AI原生应用精彩推荐一箩筐!

崭新的2024年已然降临&#xff0c;飞桨星河社区再次涌现出诸多精彩纷呈的AI原生应用&#xff0c;快来一同探索&#xff0c;发现这些应用带来的无限惊喜与可能吧&#xff01; 语音生成&#xff1a;10音色自由选择 应用介绍 本应用基于ERNIE SDK和语音合成工具&#xff0c;可以…

树--二叉树(C语言纯手凹)

目录 目录 1.什么是树&#xff1f;&#xff08;不深入&#xff0c;仅做了解&#xff09; 2.树的表示方式 2.1孩子兄弟表示法&#xff08;左孩子右兄弟&#xff09; 2.2孩子表示法 2.3双亲表示法 3.什么是二叉树 4.二叉树分类 4.1满二叉树 4.2完全二叉树 4.3二叉搜索树…

获取鼠标点击图片时候的坐标,以及利用html 中的useMap 和area 实现图片固定位置的点击事件

一 编写原因 应项目要求&#xff0c;需要对图片的固定几个位置分别做一个点击事件&#xff0c;响应不同的操作&#xff0c;如下图&#xff0c;需要点击红色区域&#xff0c;弹出不同的提示框&#xff1a; 二 获取点击图片时候的坐标 1. 说明 实现这以上功能的前提是需要确定需…

for循坏

签名&#xff1a;但行好事&#xff0c;莫问前程。 文章目录 前言一、循坏的四要素二、for循环的格式三、for循坏的小练习1、打印1-100以内的偶数&#xff0c;并求和2、输出所有的水仙花数3、求两个数的最大公约数和最小公倍数3.1最大公约数3.2最小公倍数 4、双层for循坏打印九九…

linux安装python3.11

yum install gcc-c zlib-devel bzip2-devel openssl* ncurses-devel sqlite* readline-devel tk-devel gdbm-devel libpcap* xz-devel libffi-devel -y 下载地址 https://www.python.org/ftp/python/3.11.7/Python-3.11.7.tar.xz 上传python文件&#xff0c;解压&#xff…

kubernetes-快速部署一套k8s集群

1、前置知识点 1.1 生产环境可部署Kubernetes集群的两种方式 目前生产部署Kubernetes集群主要有两种方式&#xff1a; kubeadm Kubeadm是一个K8s部署工具&#xff0c;提供kubeadm init和kubeadm join&#xff0c;用于快速部署Kubernetes集群。 二进制包 从github下载发行…