2.1

display:none和visibility:hidden的区别2.7

relative和absolute分别是相对于谁进行定位的2.8

calc,

怎么实现宽高自适应的正方形正方形自适应正方形青铜rem优点缺点

vw优点缺点

怎么理解回流跟重绘什么场景下会触发一、是什么二、如何触发回流触发时机重绘触发时机浏览器优化机制

三、如何减少

使用原生js实现以下效果点击容器内的图标图标边框变成border:1px

solid

css选择器有哪些优先级分别是什么哪些属性可以继承一、选择器二、优先级三、继承属性无继承的属性

2.20

怎么触发BFCBFC有什么应用场景文档流绝对定位(Absolute

positioning)浮动

概念BFC的触发方式BFC的特性应用自适应两列布局防止外边距margin重叠父子元素的外边距重叠清除浮动解决令父元素高度坍塌的问题

2.21

为什么有时候⽤translate来改变位置⽽不是使用position进行定位2.23

GPU

的区别每一帧的执行步骤完整的渲染流程普通图层和复合图层硬件加速使用硬件加速的注意事项

2.24

脱离文档流有哪些方法一、什么是文档流二、什么是脱离文档流三、怎么脱离文档流floatabsolutefixed

2.28

为什么会出现浮动什么时候需要清除浮动清除浮动的方式有哪些2.40

CSS3新增伪类有那些2.41

如何使用css完成视差滚动效果?一、是什么二、实现方式background-attachmenttransform:translate3D

2.45

如何实现单行多行文本溢出的省略样式二、实现方式单行文本溢出省略多行文本溢出省略基于高度截断伪元素

定位基于行数截断

内容(content)、填充(padding)、边界(margin)、

边框(border)

display:none和visibility:hidden的区别

display:none

隐藏对应的元素在文档布局中不再给它分配空间它各边的元素会合拢就当他从来不存在。

visibility:hidden

relative:相对定位相对于自己本身在正常文档流中的位置进行定位。

absolute:生成绝对定位相对于最近一级定位不为static的父元素进行定位。

fixed:

老版本IE不支持生成绝对定位相对于浏览器窗口或者frame进行定位。

sticky:生成粘性定位的元素容器的位置根据正常文档流计算得出。

2.8

主要是用于检测浏览器是否支持CSS的某个属性其实就是条件判断如果支持某个属性你可以写一套样式如果不支持某个属性你也可以提供另外一套样式作为替补。

calc()

calc()函数支持

rem是全部的长度都相对于根元素元素。

通常做法是给html元素设置一个字体大小然后其他元素的长度单位就为rem。

em

元素的width/height/padding/margin用em的话是相对于该元素的font-sizevw/vh

Viewport

px像素Pixel。

相对长度单位。

像素px是相对于显示器屏幕分辨率而言的。

19201024

前者是屏幕宽度总共有1920个像素,后者则是高度为1024个像素

2.11

这属于简单的css考查平时在用组件库的同时也别忘了原生的css

{width:

我们在不断摸索中逐渐形成了以编写内嵌样式和外部样式为主要的编写习惯。

样式不能复用。

样式权重太高样式不好覆盖。

表现层与结构层没有分离。

不能进行缓存影响加载效率。

经测试在

声明指向的样式表并不会与页面其他资源并发加载而是等页面所有资源加载完成后才开始下载。

2、如果在

声明的样式表不能充分利用浏览器并发请求资源的行为其加载行为往往会延后触发或被其他资源加载挂起。

由于

import

随着前端工程化的不断发展越来越多的工具被前端大佬们开发出来愿景是把所有的重复性的工作都交给机器去做在

css

的机会也越来越少。

我们常常将页面拆分成许多个小组件然后像搭积木一样将多个小组件组成最终呈现的页面。

是根据类名去匹配元素的如果有两个组件使用了一个相同的类名后者就会把前者的样式给覆盖掉看来解决样式命名的冲突是个大问题。

CSS

名而感到担忧你是否因层级结构不清晰而感到烦躁你是否因代码难以复用而感到不爽你是否因为

common.css

的意思就是块block、元素element、修饰符modifier。

是由

Yandex

应用开发中的组件或模块。

每个块在逻辑上和功能上都是相互独立的。

.block

修饰符用来定义块或元素的外观和行为。

同样的块在应用不同的修饰符之后会有不同的外观

.block--modifier

代码层次结构清晰通过严格的命名也可以解决命名冲突的问题但也不能完全避免毕竟只是一个命名约束不按规范写照样能运行。

CSS

代码代码中的每一个类名都是引入对象的一个属性通过这种方式即可在使用时明确指定所引用的

css

[path][name]__[local]--[hash:base64:5],}}}]}

css

作为一门标记性语言语法相对简单对使用者的要求较低但同时也带来一些问题

需要书写大量看似没有逻辑的代码不方便维护及扩展不利于复用尤其对于非前端开发工程师来讲往往会因为缺少

Css

包含一套自定义的语法及一个解析器根据这些语法定义自己的样式规则这些规则最终会通过解析器编译生成对应的

Css

less声明的变量必须以开头后面紧跟变量名和变量值而且变量名和变量值需要使用冒号:分隔开

red:

}sass声明的变量跟less十分的相似只是变量名前面使用$开头

$red:

stylus声明的变量没有任何的限定可以使用$开头结尾的分号;可有可无但变量与变量值之间需要使用在stylus中我们不建议使用符号开头声明变量

red

{color:white;/*是白色*/background-color:blue;

.unscoped

less与stylus的作用域跟javascript十分的相似首先会查找局部定义的变量如果没有找到会像冒泡一样一级一级往下查找直到根为止

color:

{color:white;/*白色调用了局部变量*/background-color:blue;

.unscoped

混入mixin应该说是预处理器最精髓的功能之一了简单点来说Mixins可以将一部分样式抽出作为单独定义的模块被很多选择器重复使用

在less中混合的用法是指将定义好的ClassA中引入另一个已经定义的Class也能使用够传递参数参数变量为声明

.alert

}Sass声明mixins时需要使用mixinn后面紧跟mixin的名也可以设置参数参数名为变量$声明的形式

mixin

}stylus中的混合和前两款Css预处理器语言的混合略有不同他可以不使用任何符号就是直接声明Mixins名然后在定义参数和默认值之间用等号来连接

error(borderWidth

在电商、个人博客等网站我们或多或少都可以看到css正方形的应用场景自适应正方形布局是必须要掌握的。

正方形

提起自适应想必都会想到rem、vw等相对单位我们分别用这些单位来实现一下。

rem

}屏幕宽度大于1200px时字体为16pxrem的盒子的大小为

160px

实际应用场景屏幕宽度变化会动态计算rem的值这里只用于案例理解。

在适配了rem的项目中可以直接使用rem设置盒子宽高即自适应正方形

div

百分比padding这里有一个很细的知识点当padding、margin取值为百分比时百分比的值是以父元素的width为参考。

div

}我们给盒子的宽度设置20%使用的padding的纵轴将盒子高度撑开这样便得到了一个自适应正方形。

细心的小伙伴会发现现在是个自适应正方形没错了但是高度被占满了内容没地方放了。

是的当前只是一个正方形在实际业务场景中内部不是图片就是其他内容不止需要一个正方形的。

解决办法再嵌套一层内容盒子外层方形盒为相对定位内层内容盒为绝对定位内层盒宽高基于外层方形盒代码如下

div

}.box-content类为内容盒我们可以在内容盒里为所欲为还原设计稿了。

若方形区域只需要展示图片同理如下

classbox-square我是内容/div.box-square

{aspect-ratio:

一个属性自适应正方形就OK啦属性再好也得看兼容性和浏览器支持。

唯一缺点就是兼容性了2023年了该支持的基本都支持上了此事古难全

活学活用

实现这个布局假设总宽1000px商品卡片左右间距12px布局要求自适应响应式。

百分比padding实现

classshop-title这是小黎测试的文字区域实际运用一下百分比padding实现自适应方形布局。

/div/divdiv

classshopdiv

classshop-title这是小黎测试的文字区域实际运用一下百分比padding实现自适应方形布局。

/div/divdiv

classshopdiv

classshop-title这是小黎测试的文字区域实际运用一下百分比padding实现自适应方形布局。

/div/divdiv

classshopdiv

classshop-title这是小黎测试的文字区域实际运用一下百分比padding实现自适应方形布局。

/div/div

/main

使用aspect-ratio了属性我们可以少嵌套一个外层方形盒

maindiv

classshop-title这是小黎测试的文字区域实际运用aspect-ratio实现自适应方形布局。

/div/divdiv

classshopimg

classshop-title这是小黎测试的文字区域实际运用aspect-ratio实现自适应方形布局。

/div/divdiv

classshopimg

classshop-title这是小黎测试的文字区域实际运用aspect-ratio实现自适应方形布局。

/div/divdiv

classshopimg

classshop-title这是小黎测试的文字区域实际运用aspect-ratio实现自适应方形布局。

/div/div

main

我们再来看个需求——UI规定图片区域宽高比为4:3给的图片也是4:3。

一般情况我们的方案是设置好图片宽度高度自适应就OK了。

这样做相对简便但也会存在一些问题比如图片宽高比并不是4:3或多或少又或者传的图不规整这样会导致我们的页面布局不可控所谓失之毫厘谬以千里。

这时候就牵扯到了代码健壮性和可扩展性作为前端开发个人觉得页面应该有良好的用户体验而不是调教用户。

接下来我分别用百分比padding、aspect-ratio等方案来实现该业务场景。

借用方形示例这里我就只贴关键代码

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

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dfKKrtqV-1683893248605)(null)]

解析HTML生成DOM树解析CSS生成CSSOM树将DOM树和CSSOM树结合生成渲染树(Render

Tree)Layout(回流):根据生成的渲染树进行回流(Layout)得到节点的几何信息位置大小Painting(重绘):根据渲染树以及回流得到的几何信息得到节点的绝对像素Display:将像素发送给GPU展示在页面上

在页面初始渲染阶段回流不可避免的触发可以理解成页面一开始是空白的元素后面添加了新的元素使页面布局发生改变

当我们对

几何尺寸的变化比如修改元素的宽、高或隐藏元素等时浏览器需要重新计算元素的几何属性然后再将计算的结果绘制出来

当我们对

的修改导致了样式的变化color或background-color却并未影响其几何属性时浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式这里就仅仅触发了重绘

二、如何触发

回流这一阶段主要是计算节点的位置和几何信息那么当页面布局和几何信息发生变化的时候就需要回流如下面情况

添加或删除可见的DOM元素元素的位置发生变化元素的尺寸发生变化包括外边距、内边框、边框大小、高度和宽度等内容发生变化比如文本变化或图片被另一个不同尺寸的图片所替代页面一开始渲染的时候这避免不了浏览器的窗口尺寸变化因为回流是根据视口的大小来计算元素的位置和大小的

offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight

这些属性有一个共性就是需要通过即时计算得到。

因此浏览器为了获取这些值也会进行回流

重绘触发时机

可以把页面理解为一个黑板黑板上有一朵画好的小花。

现在我们要把这朵从左边移到了右边那我们要先确定好右边的具体位置画好形状回流再画上它原有的颜色重绘

除此之外还有一些其他引起重绘行为

由于每次重排都会造成额外的计算消耗因此大多数浏览器都会通过队列化修改并批量执行来优化重排过程。

浏览器会将修改操作放入到队列里直到过了一段时间或者操作达到了一个阈值才清空队列

当你获取布局信息的操作的时候会强制队列刷新包括前面讲到的offsetTop等方法都会返回最新的数据

三、如何减少

fixed/absolute尽可能地使元素脱离文档流从而减少对其他元素的影响使用css3硬件加速可以让transform、opacity、filters这些动画不会引起回流重绘避免使用

CSS

}每次循环都需要获取多次offset属性比较糟糕可以使用变量的形式缓存起来待计算完毕再提交给浏览器发出重计算请求

const

document.getElementById(container)

100px

document.getElementById(container)container.classList.add(basic_style)

/script前者每次单独操作都去触发一次渲染树更改新浏览器不会

none将其从页面上去掉然后再进行后续操作这些后续操作也不会触发回流与重绘这个过程称为离线操作

const

document.getElementById(container)

100px

document.getElementById(container)

none

的使用是在有两个重叠的标签在一定的情况下控制其中一个在另一个的上方或者下方出现。

z-index值越大就越是在上层。

z-index元素的position属性需要是relativeabsolute或是fixed。

z-index属性在下列情况下会失效

父元素position为relative时子元素的z-index失效。

解决父元素position改为absolute或static元素没有设置position属性为非static属性。

解决设置该元素的position属性为relativeabsolute或是fixed中的一种元素在设置z-index的同时还设置了float浮动。

解决float去除改为displayinline-block

20230116有小伙伴补充

系统中-webkit-overflow-scrolling:touch

也会使

使用原生js实现以下效果点击容器内的图标图标边框变成border:1px

solid

document.getElementById(box);function

isIcon(target)

target.className.includes(icon);

}box.onclick

position:fixed;的元素会被移出正常文档流并不为元素预留空间而是通过指定元素相对于屏幕视口viewport的位置来指定元素位置元素的位置在屏幕滚动时不会改变。

fixed

transform,

它是元素和其他部分组合起来告诉浏览器哪个HTML元素应当是被选为应用规则中的CSS属性值的方式

我们从一个Html结构开始

子选择器.oneone_1选择父元素为.one的所有.one_1的元素

相邻同胞选择器.one.two选择紧接在.one之后的所有.two元素

群组选择器div,p选择div、p的所有元素还有一些使用频率相对没那么多的选择器

伪类选择器

4[attribute|value]选择attribute属性以value开头的元素在CSS3中新增的选择器有如下

1:first-of-type

[attribute*value]选择attribute属性值包含value的所有元素

[attribute^value]选择attribute属性开头为value的所有元素

[attribute$value]选择attribute属性结尾为value的所有元素二、优先级

ID选择器

较大者优先级更高如果相等则继续往右移动一位进行比较如果4位全部相等则后面的会覆盖前面的

经过上面的优先级计算规则我们知道内联样式的优先级最高如果外部样式需要覆盖内联样式就需要使用!important

三、继承属性

在css中继承是指的是给父元素设置一些属性后代元素会自动拥有这些属性

字体系列属性

标签的字体颜色不能被继承h1-h6标签字体的大下也是不能被继承的

display文本属性vertical-align、text-decoration盒子模型的属性宽度、高度、内外边距、边框等背景属性背景图片、颜色、位置等定位属性浮动、清除浮动、定位position等生成内容属性content、counter-reset、counter-increment轮廓样式属性outline-style、outline-width、outline-color、outline页面样式属性size、page-break-before、page-break-after

2.20

在绝对定位布局中元素会整体脱离普通流因此绝对定位元素不会对其兄弟元素造成影响而元素具体的位置由绝对定位的坐标决定。

它的定位相对于它的包含块相关CSS属性top、bottom、left、right

position:

absolute元素定位将相对于上级元素中最近的一个relative、fixed、absolute如果没有则相对于body

position:fixed正常来说是相对于浏览器窗口定位的但是当元素祖先的

transform

在浮动布局中元素首先按照普通流的位置出现然后根据浮动的方向尽可能的向左边或右边偏移其效果与印刷排版中的文本环绕相似。

(normal

Context)直译过来是格式化上下文它是页面中的一块渲染区域有一套渲染规则决定了其子元素如何布局以及和其他元素之间的关系和作用。

HTML

中的先后位置至上而下布局在这个过程中行内元素水平排列直到当行被占满然后换行。

块级元素则会被渲染为完整的一个新行。

除非另外指定否则所有元素默认都是普通流定位也可以说普通流中元素的位置由该元素在

HTML

是Web页面的可视CSS渲染的一部分是块盒子的布局过程发生的区域也是浮动元素与其他元素交互的区域。

BFC

特性的元素可以看作是隔离了的独立容器容器里面的元素不会在布局上影响到外面的元素并且

BFC

理解为一个封闭的大箱子箱子内部的元素无论如何翻江倒海都不会影响到外部。

BFC还有

MDN上对于BFC的触发条件写的很多总结一下常见的触发方式有只需要满足一个条件即可触发

BFC

inline-block、table-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid绝对定位元素position

absolute、fixed

是页面上的一个独立容器容器里面的子元素不会影响外面的元素。

BFC

BFC

box的左边相接触从右向左的格式的话则相反即使存在浮动浮动盒的区域不会和

BFC

BFC是页面上的一个隔离的独立容器容器里面的子元素不会影响到外面元素反之亦然。

我们可以利用BFC的这个特性来做很多事。

自适应两列布局

将左列设为左浮动将自身高度塌陷使得其它块级元素可以和它占据同一行的位置。

右列为

div

块级元素利用其自身的流特性占满整行。

右列设置overflow:

hidden,触发

块级元素的上外边距和下外边距有时会合并或折叠为一个外边距其大小取其中的较大者这种行为称为外边距折叠重叠注意这个是发生在属于同一

BFC

如果在父元素与其第一个/最后一个子元素之间不存在边框、内边距、行内内容也没有创建块格式化上下文、或者清除浮动将两者的外边距

div

当容器内子元素设置浮动时脱离了文档流容器中总父元素高度只有边框部分高度。

div

等等这些都可以触发不过父元素宽度表现不一定相同但父元素高度都被撑出来了。

2.21

代码如何组织、如何拆分、模块结构怎样设计编码优化怎样写出更好的

CSS才能让它的打包结果最优可维护性代码写完了如何最小化它后续的变更成本如何确保任何一个同事都能轻松接手

CSS

基于这三个方向可以衍生出一些具有典型意义的子问题这里我们逐个来看

CSS

文件的结构和更强的拓展能力这两点如果能做到自然会带来更强的可维护性。

CSS

所做不到的也正是预处理器所解决掉的问题。

预处理器普遍会具备这样的特性

css

style-loader注意答出“用什么”有时候可能还不够面试官会怀疑你是不是在背答案所以你还需要了解每个

loader

为什么有时候⽤translate来改变位置⽽不是使用position进行定位

translate

改变transform或opacity不会触发浏览器重新布局reflow或重绘repaint只会触发复合compositions。

transform使浏览器为元素创建⼀个

⽽translate改变位置时元素依然会占据其原始空间绝对定位就不会发⽣这种情况。

2.23

面试中可能会经常会碰到怎么解决动画卡顿的问题然后会引导到硬件加速。

那么究竟什么是硬件加速为什么它可以提高咱们的动画效率我们今天就来一探究竟。

首先我们先从

指令来控制的计算机的运行。

它会对指令进行译码然后通过逻辑电路执行该指令。

整个执行的流程分为了多个阶段叫做流水线。

指令流水线包括取指令、译码、执行、取数、写回五步这是一个指令周期。

CPU会不断的执行指令周期来完成各种任务。

ProcessingUnit的简写是现代显卡中非常重要的一个部分其地位与CPU在主板上的地位一致主要负责的任务是加速图形处理速度。

GPU是显卡的“大脑”它决定了该显卡的档次和大部分性能同时也是2D显示卡和3D显示卡的区别依据。

2D显示芯片在处理3D图像和特效时主要依赖CPU的处理能力称为“软加速”。

3D显示芯片是将三维图像和特效处理功能集中在显示芯片内也即所谓的“硬件加速”功能。

要解释两者的区别要先明白两者的相同之处两者都有总线和外界联系有自己的缓存体系以及数字和逻辑运算单元。

两者的区别在于存在于片内的缓存体系和数字逻辑运算单元的结构差异

CPU虽然有多核但总数没有超过两位数每个核都有足够大的缓存和足够多的数字和逻辑运算单元并辅助有很多加速分支判断甚至更复杂的逻辑判断的硬件GPU

Fermi有512个核。

每个核拥有的缓存大小相对小数字逻辑运算单元也少而简单GPU初始时在浮点计算上一直弱于CPU。

从结果上导致CPU擅长处理具有复杂计算步骤和复杂数据依赖的计算任务如分布式计算数据压缩人工智能物理模拟以及其他很多很多计算任务等。

GPU由于历史原因是为了视频游戏而产生的至今其主要驱动力还是不断增长的视频游戏市场在三维游戏中常常出现的一类操作是对海量数据进行相同的操作如对每一个顶点进行同样的坐标变换对每一个顶点按照同样的光照模型计算颜色值。

GPU的众核架构非常适合把同样的指令流并行发送到众核上采用不同的输入数据执行。

在通用计算领域有广泛应用包括数值分析海量数据处理排序Map-Reduce等金融分析等等。

简而言之当程序员为CPU编写程序时他们倾向于利用复杂的逻辑结构优化算法从而减少计算任务的运行时间即

Latency。

当程序员为GPU编写程序时则利用其处理海量数据的优势通过提高总的数据吞吐量Throughput来掩盖

目前CPU

的区别正在逐渐缩小因为GPU也在处理不规则任务和线程间通信方面有了长足的进步。

1000ms

页面的元素布局是相对的所以其中任意一个元素的位置发生变化都会联动的引起其他元素发生变化这个过程叫

DOM

元素的的文字、颜色、图像、边框和阴影等。

Composite渲染层合并按照合理的顺序合并图层然后显示到屏幕上。

减少或者避免

渲染进程将HTML内容转换为能够读懂的DOM树结构。

渲染引擎将CSS样式表转化为浏览器可以理解的

styleSheets

计算出DOM节点的样式。

创建布局树并计算元素的布局信息。

对布局树进行分层并生成分层树。

为每个图层生成绘制列表并将其提交到合成线程。

合成线程将图层分成图块并在光栅化线程池中将图块转换成位图。

合成线程发送绘制图块命令DrawQuad给浏览器进程。

浏览器进程根据DrawQuad消息生成页面并显示到显示器上

composite

可以简单的这样理解浏览器渲染的图层一般包含两大类渲染图层普通图层以及复合图层

渲染图层又称默认复合层是页面普通的文档流。

我们虽然可以通过绝对定位相对定位浮动定位脱离文档流但它仍然属于默认复合层共用同一个绘图上下文对象GraphicsContext。

复合图层它会单独分配资源当然也会脱离普通文档流这样一来不管这个复合图层中怎么变化也不会影响默认复合层里的回流重绘

GraphicsLayer而其他不是复合图层的渲染层则和其第一个拥有

GraphicsLayer

一般一个元素开启硬件加速后会变成复合图层可以独立于普通文档流中改动后可以避免整个页面重绘提升性能。

最常用的方式translate3d、translateZopacity

属性/过渡动画需要动画执行的过程中才会创建合成层动画没有开始或结束后元素还会回到之前的状态will-change属性这个知识点比较冷僻一般配合

opacity

使用而且经测试除了上述可以引发硬件加速的属性外其它属性并不会变成复合层作用是提前告诉浏览器要变化这样浏览器会开始做一些优化工作这个最好用完后就释放video、iframe、canvas、webgl等元素其它譬如以前的

flash

内存。

如果GPU加载了大量的纹理那么很容易就会发生内容问题这一点在移动端浏览器上尤为明显所以一定要牢记不要让页面的每个元素都使用硬件加速。

使用GPU渲染会影响字体的抗锯齿效果。

这是因为GPU和CPU具有不同的渲染机制。

即使最终硬件加速停止了文本还是会在动画期间显示得很模糊。

所以不要大量使用复合图层否则由于资源消耗过度页面可能会变的更加卡顿。

同时在使用硬件加速时尽可能的使用z-index防止浏览器默认给后续的元素创建复合层渲染。

webkit

CSS3中如果一个元素添加了硬件加速并且z-index层级比较低那么在这个元素的后面其它元素层级比这个元素高的或者相同的并且releative或absolute属性相同的会默认变为复合层渲染如果处理不当会极大的影响性能。

简单点理解其实可以认为是一个隐式合成的概念如果a是一个复合图层而且b在a上面那么b也会被隐式转为一个复合图层这点需要特别注意。

2.24

浏览器可以对动画进行优化代码相对简单,性能调优方向固定对于帧速表现不好的低版本浏览器CSS3可以做到自然降级而JS则需要撰写额外代码

运行过程控制较弱,无法附加事件绑定回调函数代码冗长想用CSS实现稍微复杂一点动画,最后CSS代码都会变得非常笨重

JS动画

可以在动画播放过程中对动画进行控制开始、暂停、回放、终止、取消都是可以做到的。

动画效果比css3动画丰富,有些动画效果比如曲线运动,冲击闪烁,视差滚动效果只有js动画才能完成CSS3有兼容性问题而JS大多时候没有兼容性问题

代码的复杂度高于CSS动画JavaScript在浏览器的主线程中运行而主线程中还有其它需要运行的JavaScript脚本、样式计算、布局、绘制任务等,对其干扰导致线程可能出现阻塞从而造成丢帧的情况

2.25

属性原生JS动画使用canvas绘制动画SVG动画Jquery的animate函数用gif图片

transition属性

delay;transition是一种简写属性,它可以拆分为四个过渡属性。

你可以

transition:

值1;transition-duration:值2;transition-timing-function:值2;transition-delay:值4;这样写。

值描述transition-property规定设置过渡效果的

CSS

属性的名称。

transition-duration规定完成过渡效果需要多少秒或毫秒。

transition-timing-function规定速度效果的速度曲线。

transition-delay定义过渡效果何时开始。

演示代码

由上图可看出鼠标移入移出时,width状态的变化是瞬间完成的。

添加transition:

flash的同学知道这种逐帧动画是由关键帧组成很多个关键帧连续的播放就组成了动画在

CSS3

transition只需指定动画的开始和结束状态整个动画的过程是由特定的函数控制,你不用管它。

animation可以对动画过程中的各个关键帧进行设置

演示代码

div/div1div{width:50px;height:50px;background-color:

pink;

其主要思想是通过setInterval或setTimeout方法的回调函数来持续调用改变某个元素的CSS样式以达到元素样式变化的效果。

javascript

实现动画通常会导致页面频繁性重排重绘消耗性能一般应该在桌面端浏览器。

在移动端上使用会有明显的卡顿。

!DOCTYPE

document.getElementById(rect);let

left

setInterval(function(){if(leftwindow.innerWidth-200){elem.style.marginLeft

leftpx;left

{clearInterval(timer);}},16);/script

/body

上面的例子中我们设置的setInterval时间间隔是16ms。

一般认为人眼能辨识的流畅动画为每秒60帧这里16ms比(1000ms/60)帧略小一些但是一般可仍为该动画是流畅的。

在很多移动端动画性能优化时一般使用16ms来进行节流处理连续触发的浏览器事件。

例如对touchmove、scroll事件进行节流等。

通过这种方式减少持续事件的触发频率可以大大提升动画的流畅性。

使用canvas绘制动画

charsetUTF-8titleDocument/titlestyle*{margin:0;padding:0;}/style

/head

document.getElementById(canvas);let

ctx

setInterval(function(){ctx.clearRect(0,0,700,550);ctx.beginPath();ctx.fillStyle

#ccc;ctx.fillRect(left,0,100,100);ctx.stroke();if(left700){clearInterval(timer);}left

1;},16);/script

/html注释通过getContext()获取元素的绘制对象通过clearRect不断清空画布并在新的位置上使用fillStyle绘制新矩形内容实现页面动画效果。

Canvas主要优势是可以应对页面中多个动画元素渲染较慢的情况完全通过javascript来渲染控制动画的执行。

可用于实现较复杂动画。

SVG

SVG是一种基于XML的图像格式非常类似于HTML的工作方式。

它为许多熟悉的几何形状定义了不同的元素这些元素可以在标记中组合以产生二维图形。

SVG

中保存的是点、线、面的信息与分辨率和图形大小无关只是跟图像的复杂程度有关所以图像文件所占的存储空间通常会比

png

Language简称XML】标记指计算机所能理解的信息符号通过此种标记计算机之间可以处理包含各种信息的文章等)来标记构建的浏览器通过绘制每个点和线来打印它们而不是用预定义的像素填充某些空间。

这确保

SVG

样式将元素从一个状态改变为另一个状态。

CSS属性值是逐渐改变的这样就可以创建动画效果。

只有数字值可创建动画比如

代码演示

stylebackground:#98bf21;height:100px;width:100px;margin:6px;

/div$(document).ready(function(){$(#btn1).click(function(){$(#box).animate({height:300px});});$(#btn2).click(function(){$(#box).animate({height:100px});});

});

复杂动画的话css代码就会变得冗长js实现起来更优。

动画运行时对动画的控制程度上

比较灵活能控制动画暂停取消终止等css动画不能添加事件只能设置固定节点进行什么样的过渡动画。

兼容方面

css

这个问题的答案和“为何CSS相邻兄弟选择器只支持后面的元素而不支持前面的兄弟元素”是一样的。

浏览器解析HTML文档是从前往后由外及里的。

所以我们时常会看到页面先出现头部然后主体内容再出现的加载情况。

但是如果CSS支持了父选择器那就必须要页面所有子元素加载完毕才能渲染HTML文档因为所谓“父选择器”就是后代元素影响祖先元素如果后代元素还没加载处理如何影响祖先元素的样式于是网页渲染呈现速度就会大大减慢浏览器会出现长时间的白板。

加载多少HTML就可以渲染多少HTML在网速不是很快的时候就显得尤为的必要。

比方说你现在看的这篇文章只要文章内容加载出来就可以了就算后面的广告脚本阻塞了后续HTML文档的加载我们也是可以阅读和体验。

但是如果支持父选择器则整个文档不能有阻塞页面的可访问性则要大大降低。

有人可能会说要不采取加载到哪里就渲染到哪里的策略这样子问题更大因为会出现加载到子元素的时候父元素本来渲染的样式突然变成了另外一个样式的情况体验非常不好。

“相邻选择器只能选择后面的元素”也是一样的道理不可能说后面的HTML加载好了还会影响前面HTML的样式。

所以从这一点来讲CSS支持“父选择器”或者“前兄弟选择器”的可能性要比其他炫酷的CSS特性要低倒不是技术层面而是CSS和HTML本身的渲染机制决定的。

当然以后的事情谁都说不准说不定以后网速都是每秒几个G的网页加载速度完全就忽略不计说不定就会支持了。

2.27

将窗体自上而下分成一行一行并在每行中按从左至右依次排放元素称为文档流也称为普通流。

这个应该不难理解HTML中全部元素都是盒模型盒模型占用一定的空间依次排放在HTML中形成了文档流。

元素脱离文档流之后将不再在文档流中占据空间而是处于浮动状态可以理解为漂浮在文档流的上方。

脱离文档流的元素的定位基于正常的文档流当一个元素脱离文档流后依然在文档流中的其他元素将忽略该元素并填补其原先的空间。

三、怎么脱离文档流

注意使用float脱离文档流时其他盒子会无视这个元素但其他盒子内的文本依然会为这个元素让出位置环绕在该元素的周围。

absolute

absolute称为绝对定位其实博主觉得应该称为相对定位因为使用absolute脱离文档流后的元素是相对于该元素的父类及以上如果直系父类元素不满足条件则继续向上查询元素进行定位的并且这个父类元素的position必须是非static定位的static是默认定位方式。

fixed

完全脱离文档流相对于浏览器窗口进行定位。

相对于浏览器窗口就是相对于html。

2.28

Sprites是一种网页图片应用处理方式就是把网页中一些背景图片整合到一张图片文件中再利用CSS的“background-image”“background-

repeat”“background-position”的组合进行背景定位。

其优点在于

Sprites最大的优点也是其被广泛传播和应用的主要原因减少图片的字节多张图片合并成1张图片的字节小于多张图片的字节总和减少了命名困扰只需对一张集合的图片命名不需要对每一个小元素进行命名提高制作效率更换风格方便只需要在一张或少张图片上修改图片的颜色或样式整个网页的风格就可以改变维护起来更加方便。

诚然CSS

图片合成比较麻烦背景设置时需要得到每一个背景单元的精确位置维护合成图片时最好只是往下加图片而不要更改已有图片。

2.29

Web浏览器先会把获取到的HTML代码解析成一个DOM树HTML中的每个标签都是DOM树中的一个节点包括display:

none隐藏的标签还有JavaScript动态添加的元素等。

浏览器会获取到所有样式并会把所有样式解析成样式规则在解析的过程中会去掉浏览器不能识别的样式。

浏览器将会把DOM树和样式规则组合在一起DOM元素和样式规则匹配后将会合建一个渲染树Render

Tree渲染树类似于DOM树但两者别还是很大的渲染树能识别样式渲染树中每个节点NODE都有自己的样式而且渲染树不包含隐藏的节点比如display:none的节点还有内的一些节点因为这些节点不会用于渲染也不会影响节点的渲染因此不会包含到渲染树中。

一旦渲染树构建完毕后浏览器就可以根据渲染树来绘制页面了。

解析HTML构成DOM树解析加载的样式构建样式规则树加载JavaScript执行JavaScript代码DOM树和样式规则树进行匹配构成渲染树计算元素位置进行页面布局绘制页面最终在浏览器中呈现

是不是会感觉这个和我们图像加载渲染没啥关系一样事实并非如此因为img、picture或者background-image都是DOM树或样式规则中的一部分那么咱们套用进来图片加载和渲染的时机有可能是下面这样

解析HTML时如果遇到img或picture标签将会加载图片解析加载的样式遇到background-image时并不会加载图片而会构建样式规则树加载JavaScript执行JavaScript代码如果代码中有创建img元素之类会添加到DOM树中如查有添加background-image规则将会添加到样式规则树中DOM树和样式规则匹配时构建渲染树如果DOM树节点匹配到样式规则中的backgorund-image则会加载背景图片计算元素图片位置进行布局开始渲染图片浏览器将呈现渲染出来的图片

上面套用浏览器渲染页面的机制但图片加载与渲染还是有一定的规则。

因为页面中不是所有的或picture元素引入的图片和background-image引入的背景图片都会加载的。

那么就引发出新问题了什么时候会真正的加载加载规则又是什么

先概括一点

、和设置background-image的元素遇到display:none时图片会加载但不会渲染、和设置background-image的元素祖先元素设置display:none时background-image不会渲染也不会加载而img和picture引入的图片不会渲染但会加载、和background-image引入相同路径相同图片文件名时图片只会加载一次样式文件中background-image引入的图片如果匹配不到DOM元素图片不会加载伪类引入的background-image比如:hover只有当伪类被触发时图片才会加载

2.30

BFC是Web页面的可视CSS渲染的一部分是块盒子的布局过程发生的区域也是浮动元素与其他元素交互的区域。

定位方案

内部的Box会在垂直方向上一个接一个放置。

Box垂直方向的距离由margin决定属于同一个BFC的两个相邻Box的margin会发生重叠。

每个元素的margin

box

box重叠。

BFC是页面上的一个隔离的独立容器容器里面的子元素不会影响到外面的元素。

计算BFC的高度时浮动元素也会参与计算。

根元素即htmlfloat的值不为none默认overflow的值不为visible默认display的值为table-cell,

table-caption,

中的其中一个position的值为absolute或fixed

2.31

hidden:不会让元素从渲染树消失渲染元素继续占据空间只是内容不可见不能点击

opacity:

不会让元素从渲染树消失渲染元素继续占据空间只是内容不可见可以点击

display:

0是非继承属性子孙节点消失由于元素从渲染树消失造成通过修改子孙节点属性无法显示。

visibility:

hidden是继承属性子孙节点消失由于继承了hidden通过设置visibility:

displaynone

修改元素只会造成本元素的重绘,性能消耗较少读屏器读取visibility:

hidden元素内容

.wh-full{width:100%;height:100%;

htmlbodydiv

增加了记忆成本。

将css拆分为原子之后你势必要记住一些class才能书写哪怕tailwindcss提供了完善的工具链你写background也要记住开头是bg。

增加了html结构的复杂性。

当整个dom都是这样class名势必会带来调试的麻烦有的时候很难定位具体css问题你仍需要起class名。

对于大部分属性而言你可以只用到center,auto100%这些值但是有时候你仍需要设定不一样的参数值例如lefttop这时候你还需要起一个class名

2.33

的视网膜屏幕也被称为二倍屏目前市面上还有像素比更高的三倍屏、四倍屏。

CSS

缩放这是目前市面上最受推崇的解决方法。

这种方法可以满足所有的场景而且修改灵活唯一的缺陷是对于已使用伪元素的元素要多嵌套一个无用元素。

具体的实现如下

.one-pixel-border

(-webkit-min-device-pixel-ratio:

2),

(-webkit-min-device-pixel-ratio:

3),

}当然还有不少其他的解决方案border-image、background-image、viewport

rem

js、box-shadow等但都有各自的缺点不进行推荐此处也不做详细介绍。

2.34

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

为了避免让用户看到长时间的白屏时间我们应该尽可能的提高css加载速度比如可以使用以下几种方法:

使用CDN(因为CDN会根据你的网络状况替你挑选最近的一个具有缓存内容的节点为你提供资源因此可以减少加载时间)对css进行压缩(可以用很多打包工具比如webpack,gulp等也可以通过开启gzip压缩)合理的使用缓存(设置cache-control,expires,以及E-tag都是不错的不过要注意一个问题就是文件更新后你要避免缓存而带来的影响。

其中一个解决防范是在文件名字后面加一个版本号)减少http请求数将多个css文件合并或者是干脆直接写成内联样式(内联样式的一个缺点就是不能缓存)

原理解析

DOM解析和CSS解析是两个并行的进程所以这也解释了为什么CSS加载不会阻塞DOM的解析。

然而由于Render

Tree和CSSOM

Tree构建完成也就是CSS资源加载完成(或者CSS资源加载失败)后才能开始渲染。

因此CSS加载是会阻塞Dom的渲染的。

由于js可能会操作之前的Dom节点和css样式因此浏览器会维持html中css和js的顺序。

因此样式表会在后面的js执行前先加载执行完毕。

所以css会阻塞后面js的执行。

2.35

这个是元素的默认定位方式元素出现在正常的文档流中会占用页面空间。

Relative

相对定位方式相对于其父级元素无论父级元素此时为何种定位方式进行定位准确地说是相对于其父级元素所剩余的未被占用的空间进行定位在父元素由多个相对定位的子元素时可以看出且会占用该元素在文档中初始的页面空间即在使用topbottomleftright进行移动位置之后依旧不会改变其所占用空间的位置。

可以使用z-index进行在z轴方向上的移动。

Absolute

绝对定位方式脱离文档流不会占用页面空间。

以最近的不是static定位的父级元素作为参考进行定位如果其所有的父级元素都是static定位那么此元素最终则是以当前窗口作为参考进行定位。

可以使用topbottomleftright进行位置移动亦可使用z-index在z轴上面进行移动。

当元素为此定位时如果该元素为内联元素则会变为块级元素即可以直接设置其宽和高的值如果该元素为块级元素则其宽度会由初始的100%变为auto。

注意当元素设置为绝对定位时在没有指定topbottomleftright的值时他们的值并不是0这几个值是有默认值的默认值就是该元素设置为绝对定位前所处的正常文档流中的位置。

Fixed

绝对定位方式直接以浏览器窗口作为参考进行定位。

其它特性同absolute定位。

sticky

粘性定位可以简单理解为relative和fixed布局的混合。

当粘性约束矩形在可视范围内为relative反之则为fixed粘性定位元素如果和它的父元素一样高则垂直滚动的时候粘性定位效果是不会出现的它的定位效果完全受限于父级元素们。

如果父元素的overflow属性设置了scrollauto,overlay值那么粘性定位将会失效同一容器中多个粘贴定位元素独立偏移因此可能重叠位置上下靠在一起的不同容器中的粘贴定位元素则会鸠占鹊巢挤开原来的元素形成依次占位的效果。

2.36

多数显示器默认频率是60Hz即1秒刷新60次所以理论上最小间隔为1/601000ms

2.37

避免过度约束避免后代选择符避免链式选择符使用紧凑的语法避免不必要的命名空间避免不必要的重复最好使用表示语义的名字。

一个好的类名应该是描述他是什么而不是像什么避免important可以选择其他选择器尽可能的精简规则你可以合并不同类里的重复规则

2.38

需要在border外侧添加空白空白处不需要背景色上下相连的两个盒子之间的空白需要相互抵消时。

何时使用padding

需要在border内侧添加空白空白处需要背景颜色上下相连的两个盒子的空白希望为两者之和。

2.39

浮动元素碰到包含它的边框或者浮动元素的边框停留。

由于浮动元素不在文档流中所以文档流的块框表现得就像浮动框不存在一样。

浮动元素会漂浮在文档流的块框上。

父元素的高度无法被撑开影响与父元素同级的元素与浮动元素同级的非浮动元素内联元素会跟随其后若非第一个元素浮动则该元素之前的元素也需要浮动否则会影响页面显示的结构。

并添加样式clear:both。

包含浮动元素的父标签添加样式overflow为hidden或auto。

父级div定义zoom

2.40

属性指的是content部分的高/宽border-boxIE传统盒子模型。

设置元素的height/width属性指的是border

padding

盒模型更为合适而在处理一些尺寸固定并且需要进行细粒度控制的情况下content-box

box-sizing

因为浏览器的兼容问题不同浏览器对标签的默认值是不同的如果没有对浏览器的CSS初始化会造成相同页面在不同浏览器的显示存在差异。

2.43

Tools将其归属于Layout过程。

此时浏览器构建出了DOM而且拿到了CSS样式此时要做的就是把样式跟DOM上的节点对应上浏览器为了提高性能需要做的就是快速匹配。

首先要明确一点浏览器此时是给一个可见节点找对应的规则这和jQuery选择器不同后者是使用一个规则去找对应的节点这样从左到右或许更快。

但是对于前者由于CSS的庞大一个CSS文件中或许有上千条规则而且对于当前节点来说大多数规则是匹配不上的稍微想一下就知道如果从右开始匹配也是从更精确的位置开始能更快排除不合适的大部分节点而如果从左开始只有深入了才会发现匹配失败如果大部分规则层级都比较深就比较浪费资源了。

除了上面这点我们前面还提到DOM构建是循序渐进的而且DOM不阻塞Render

Tree构建只有CSSOM阻塞这样也是为了能让页面更早有元素呈现。

考虑如下情况如果我们此时构建的只是部分DOM而CSSOM构建完成浏览器就会构建Render

这个时候对每一个节点如果找到一条规则从右向左匹配我们只需要逐层观察该节点父节点是否匹配而此时其父节点肯定已经在DOM上。

但是反过来我们可能会匹配到一个DOM上尚未存在的节点此时的匹配过程就浪费了资源。

2.44

Scrolling是指多层背景以不同的速度移动形成立体的运动效果带来非常出色的视觉体验

二、实现方式

background-attachmenttransform:translate3D

值分别有如下

scroll默认值背景图像会随着页面其余部分的滚动而移动fixed当页面的其余部分滚动时背景图像不会移动inherit继承父元素background-attachment属性的值

完成滚动视觉差就需要将background-attachment属性设置为fixed让背景相对于视口固定。

及时一个元素有滚动机制背景也不会随着元素的内容而滚动

section

url(...);background-attachment:

center

url(https://images.pexels.com/photos/1097491/pexels-photo-1097491.jpeg);background-attachment:

center

url(https://images.pexels.com/photos/2437299/pexels-photo-2437299.jpeg);background-attachment:

center

url(https://images.pexels.com/photos/1005417/pexels-photo-1005417.jpeg);background-attachment:

center

classa-text7/divtransform:translate3D

同样让我们先来看一下两个概念transform和perspective

transform:

100vw;height:200vh;background:skyblue;padding-top:100px;}.one{width:500px;height:200px;background:#409eff;transform:

50px;}.two{width:500px;height:200px;background:#67c23a;transform:

translateZ(-1px);margin-bottom:

150px;}.three{width:500px;height:200px;background:#e6a23c;transform:

translateZ(-2px);margin-bottom:

150px;}

xpx那么处于这个容器的子元素就将位于3D空间中子元素设置不同的

transform:

Z轴方向距离屏幕我们的眼睛的距离也就不一样滚动滚动条由于子元素设置了不同的

transform:

text-overflow规定当文本溢出时显示省略符号来代表被修剪的文本white-space设置文字在一行显示不能换行overflow文字长度超出限定宽度则隐藏超出的内容

overflow设为hidden普通情况用在块级元素的外层隐藏内部溢出元素或者配合下面两个属性实现文本溢出省略

white-space:nowrap作用是设置文本不换行是overflow:hidden和text-overflowellipsis生效的基础

text-overflow属性值有如下

clip当对象内文本溢出部分裁切掉ellipsis当对象内文本溢出时显示省略标记…

text-overflow只有在设置了overflow:hidden和white-space:nowrap才能够生效的

举个例子

40px;width:400px;height:40px;border:1px

solid

这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本/p

多行文本溢出省略

/body实现原理很好理解就是通过伪元素绝对定位到行尾并遮住文字再通过

overflow:

兼容性好对各大主流浏览器有好的支持响应式截断根据不同宽度做出调整

基于行数截断

2用来限制在一个块元素显示的文本的行数为了实现该效果它需要组合其他的WebKit属性display:

-webkit-box和1结合使用将对象作为弹性伸缩盒子模型显示-webkit-box-orient:

vertical和1结合使用

hidden文本溢出限定的宽度就隐藏内容text-overflow:

ellipsis多行文本的情况下用省略号“…”隐藏溢出范围的文本

stylep

-webkit-box;-webkit-box-orient:

vertical;overflow:

p这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本

可以看到上述使用了webkit的CSS属性扩展所以兼容浏览器范围是PC端的webkit内核的浏览器由于移动端大多数是使用webkit所以移动端常用该形式

需要注意的是如果文本为一段很长的英文或者数字则需要添加word-wrap:

break-word属性

还能通过使用javascript实现配合css实现代码如下所示

css结构如下

$(function(){//获取文本的行高并获取文本的高度假设我们规定的行数是五行那么对超过行数的部分进行限制高度并加上省略号$(p).each(function(i,

obj){var

parseInt($(this).css(line-height));var

height

parseInt($(this).height());if((height

lineHeight)

){$(this).addClass(p-after)$(this).css(height,60px);}else{$(this).removeClass(p-after);}});

})2.46

Animations是为层叠样式表建议的允许可扩展标记语言XML元素使用CSS的动画的模块

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

transition

property:填写需要变化的css属性duration:完成过渡效果需要的时间单位(s或者ms)timing-function:完成效果的速度曲线delay:

值描述linear匀速等于

cubic-bezier(0,0,1,1)ease从慢到快再到慢cubic-bezier(0.25,0.1,0.25,1)ease-in慢慢变快等于

cubic-bezier(0.42,0,1,1)ease-out慢慢变慢等于

cubic-bezier(0,0,0.58,1)ease-in-out先变快再到慢等于

cubic-bezier(0.42,0,0.58,1)渐显渐隐效果cubic-bezier(n,n,n,n)在

cubic-bezier

注意并不是所有的属性都能使用过渡的如display:none-display:block

举个例子实现鼠标移动上去发生变化动画效果

border-width;transition-duration:

all

translate位移scale缩放rotate旋转skew倾斜

注意的是transform不支持inline元素使用前把它变成block

举个例子

border-width;transition-duration:

500ms;}.base2

属性描述属性值animation-duration指定动画完成一个周期所需要时间单位秒s或毫秒ms默认是

0animation-timing-function指定动画计时函数即动画的速度曲线默认是

“ease”linear、ease、ease-in、ease-out、ease-in-outanimation-delay指定动画延迟时间即动画何时开始默认是

0animation-iteration-count指定动画播放的次数默认是

1animation-direction

normalnormal、reverse、alternate、alternate-reverseanimation-fill-mode指定动画填充模式。

默认是

noneforwards、backwards、bothanimation-play-state指定动画播放状态正在运行或暂停。

默认是

runningrunning、pauseranimation-name指定

keyframes

动画只需要定义一些关键的帧而其余的帧浏览器会根据计时函数插值计算出来

keyframes

rotate(180deg);}100%{transform:

rotate(360deg);}

属性含义transition过度用于设置元素的样式过度和animation有着类似的效果但细节上有很大的不同transform变形用于元素进行旋转、缩放、移动或倾斜和设置样式的动画并没有什么关系就相当于color一样用来设置元素的“外表”translate移动只是transform的一个属性值即移动animation动画用于设置动画属性他是一个简写的属性包含6个属性

2.47

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

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

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

二、单位

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

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

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

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

em是相对长度单位。

相对于当前对象内文本的字体尺寸。

如当前对行内文本的字体尺寸未被人为设置则相对于浏览器的默认字体尺寸1em

16px

是相对长度单位。

相对于当前对象内文本的字体尺寸。

如当前对行内文本的字体尺寸未被人为设置则相对于浏览器的默认字体尺寸任意浏览器的默认字体高都是

16px

/style这时候.big元素的font-size为14px而.small元素的font-size为12px

rem

同理如果想要简化font-size的转化我们可以在根元素html中加入font-size:

62.5%

这样页面中1rem10px、1.2rem12px、1.4rem14px、1.6rem16px;使得视觉、使用、书写都得到了极大的帮助

rem单位可谓集相对大小和绝对大小的优点于一身和em不同的是rem总是相对于根元素而不像em一样使用级联的方式来计算尺寸

vh、vw

就是根据窗口的宽度分成100等份100vw就表示满宽50vw就表示一半宽。

vw

像vw、vh比较容易混淆的一个单位是%不过百分比宽泛的讲是相对于父元素

对于position:

absolute;的元素是相对于已定位的父元素对于position:

三、总结

em相对单位基准点为父节点字体的大小如果自身定义了font-size按自身来计算整个页面内1em不是一个固定的值

em,