前端之CSS篇
搬砖Luffy 2024-08-16 17:03:12 阅读 64
1. CSS盒模型，在不同浏览器的差异
css盒子模型 又称为框模型（Box Model），包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。如下图：
盒子模型分为标准盒模型和IE盒模型。
标准盒模型：width = content (width、height只包含content)，标准盒模型也可以转换为IE盒模型，添加属性 <code>box-sizing: border-box;
IE盒模型: width = content + padding + border (width、height包含content、padding、border)，同理，添加属性 <code>box-sizing: content-box; 可以转换为标准盒模型。
我们可以通过CSS的<code>box-sizing属性去改变盒模型，默认值为
content-box（W3C盒模型），我们可以将其设置为border-box（IE盒模型）。
2. css中的选择器有哪些?优先级?
选择器
id选择器，#开头，后面跟上元素的id；类选择器，.开头，后面跟上元素的类名；标签选择器，标签名；相邻选择器，第一个选择器+第二个选择器（h1+h2）；子代选择器，父元素选择器>子元素选择器（.father>.son）;后代选择器，父元素选择器+空格+后代选择器（.father p）；后续相邻相抵选择器，第一个选择器~第一个元素之后的选择器（.first~p（在first之后，并且和first同级的所有p标签））；属性选择器，标签名+标签的属性（比如div[class=^a]，就代表所有类名以a开头的div元素）；伪类选择器，比如:last-child、:is()、:not()、:first-child、:nth-child(n)、:nth-of-type(n)等等；伪元素选择器，::after、::before等；通配符选择器，*
优先级
!important的优先级最高，无视权重；其次是内联样式，权重1000；其次是id选择器，权重100；再然后是类选择器、伪类选择器、属性选择器，权重10；再然后是标签选择器、伪元素选择器，权重1；再然后是通配符选择器，权重0；
上面是CSS选择器的优先级，当选择器一样时，就要
根据权重来计算优先级，权重一样时，哪个属性在后面，就会覆盖前面的属性。如果使用11个类选择器，会覆盖1个id选择器吗？答案是不会的，只有同级别的选择器才会去比较权重，不能跨选择器去比较权重，也就是说，id选择器的样式永远优先于类选择器。
3. CSS哪些属性可以继承？
css继承特性主要是指文本方面的继承(比如字体、颜色、字体大小等)，盒模型相关的属性基本没有继承特性。
不可继承的：
display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、top、bottom、left、right、z-index、float、clear、 table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。
所有元素可继承的：
visibility和cursor
终极块级元素可继承的：
text-indent和text-align
内联元素可继承的：
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
列表元素可继承的：
list-style、list-style-type、list-style-position、list-style-image
4. css中有哪些方式可以隐藏一个元素?
| 方法 | 文档流中 | 触发事件 | 回流 | 重绘 | 描述 |
|---|---|---|---|---|---|
display: none; | 不在 | 不会 | 会 | 会 | 元素完全从文档流中移除，不占用空间。 |
opacity: 0; | 在 | 会 | 不会 | 会 | 使元素透明度为0，但仍然占据空间，可接收鼠标事件。 |
width: 0; height: 0; | 不在 | 不会 | 会 | 会 | 设置元素的宽高为0，使其看起来消失。 |
visibility: hidden; | 在 | 不会 | 不会 | 会 | 元素不可见但仍保留其原来的空间。 |
clip-path: polygon(0px,0px,0px,0px); | 在 | 不会 | 不会 | 会 | 通过裁剪区域使元素不可见，但保留其原来的空间。 |
回流 (reflow): 当浏览器需要重新计算一个元素的几何属性时，比如位置、大小等。就是当我们修改或者访问一些元素layout的内容之后，浏览器就需要重新进行布局、分层、绘制、分块、光栅化等等一系列操作，如果我们频繁的导致页面回流，就会引起页面的卡顿。重绘 (repaint): 当浏览器需要重新绘制元素时，只是改变了元素的颜色或背景，即元素的位置和大小没有改变。就是元素只是修改了一些不影响元素布局的内容，因此浏览器对内容更新时，不需要重新计算布局，减少了许多流程。
5. CSS中的calc是什么，一般什么情况下会使用？
calc是一个CSS函数，用于动态计算元素的长度值。
比如我们想将一个元素的宽度设置为父元素的1/3，我们可以直接使用width: calc(100% / 3)。
6. 浮动元素会有什么影响？如何清除浮动？
影响：
高度塌陷，如果父元素没有设置高度的话，浮动元素不会撑开父元素，就会造成高度塌陷。影响非浮动的兄弟元素，如果兄弟元素是非浮动块级元素，该兄弟元素会忽略浮动元素，从而占据浮动元素的位置，并且浮动元素会盖在兄弟元素之上，但是兄弟元素内部的文本内容或者行内元素会环绕在浮动元素周围。如果兄弟元素是非浮动行内元素，那么兄弟元素就会环绕在浮动元素周围。影响浮动的兄弟元素，如果兄弟元素也是浮动元素，并且浮动的方向和该元素一致，那么就会紧跟在该元素后面，如果浮动方向不一样，那么互不影响。
清除浮动
利用CSS属性clear来清除浮动，clear的值可以为left（清除左侧元素的浮动）、right（清除右侧元素的浮动）、both（清除所有方向的浮动）。利用BFC清除浮动，一旦我们的父容器创建了BFC，那么就会清除内部的浮动。
7. 如何利用CSS隐藏一个元素，它们各有什么优缺点？
可以利用display: none;来隐藏元素，使用该方法时，该元素不会被渲染，元素不占用空间，但是每次展示或者隐藏时，会引起回流和重绘，影响页面性能。可以使用visibility: hidden;来隐藏元素，使用该方法时，该元素会被渲染到dom树，只是被隐藏，但是还会占据页面空间，只会引发重绘，不会引起回流。使用opacity:0;来隐藏元素，该方法只是将元素的透明的设置为0，元素同样会被渲染，也会占据页面空间，同时，如果该元素绑定了事件，点击该元素区域，依然会触发事件。
8. 说一说CSS中不同长度单位的区别，比如px、em、rem、vw、vh
css3之前 px，em，%用的多。
css3创建了新的单位 rem，vw，vh，为了在不同的场景下做更好的适配
px是一个绝对单位，1px代表了1个像素的物理大小，不会受外部的影响；em是相对于当前文本字体大小的单位，比如当前区域字体大小为12px，那么1em = 12px，如果当前区域内字体大小继承自父元素，那么1em=父元素字体大小；rem是相对于根节点字体大小的单位，如果我们当前html文档的根节点字体大小为12px，那么1rem = 12px；vw是相对于当前视口宽度的单位，视口宽度被均分为100份，比如20vw，含义就是当前视口宽度的20%；vh是相对于当前视口高度的单位，与vw一样，不过它是相对于视口高度的。
9. 移动端的1px问题，为什么有时候1px看起来会比设计稿的要粗呢？
在高清屏出现之前，CSS里的px（逻辑像素）和手机物理像素是保持一致的，比如手机分辨率是375*750，那就代表手机横向有375个像素点，纵向有750个像素点，我们前端代码写多少像素就是多少像素。
随着屏幕分辨率的越来越高，有的手机尺寸没变，但是分辨率已经是之前的2倍甚至3倍，这时候就有了设备像素比dpr（devicePixelRatio）的概念，不同手机有不同的设备像素比，比如iPhone6的设备像素比就是2，那么当我们前端编写的代码为1px时，手机就会根据dpr，自动算出物理像素，也就是2px，也就是说我们代码中的1px到了真机就变成了2px。所以就造成了看起来偏粗的问题。
那如果我们直接写成0.5px呢？首先，在某些机型上这样做是没问题的，但是我们的PC端浏览器支持的最小像素为1px，某些旧版本浏览器还会把0.5px当作0px来渲染，就会造成各种各样的样式问题。
10. 如何实现一个0.5px的线
我们可以通过实现一个1px的线，然后通过CSS的2D转换进行缩放，就变成了0.5px。
<style>
.line {
width: 100%;
height: 1px;
background: #333;
transform: scaleY(0.5);
}
</style>
<div class="line"></div>code>
11. chrome浏览器支持最小字体为12px，如果我们需要一个10像素的字体怎么办呢？
和实现0.5px的线原理相同，我们可以通过CSS的2D转换将整个元素进行缩放相应的倍率，达到10px的效果。
<style>
.small {
width: 200%;
height: 200%;
font-size: 20px;
transform: scale(0.5);
transform-origin: 0 0;
}
</style>
<body>
<div class="small">我是10像素</div>code>
</body>
12. position的值都有哪些，有什么区别
position的值有static（默认）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位）、sticky（粘性定位）。
static默认定位
在默认情况下，该元素使用正常的布局行为，与其他普通元素一样。
relative相对定位
在相对定位的情况下，该元素相对自身进行定位，在不改变left、top、right、bottom任何一个值的情况下，该元素位置保持不变，改变某一个方向的值，该元素会向反方向进行平移，原来的地方保持空白，依然占据文档流。
absolute绝对定位
在绝对定位的情况下，该元素相对于上一个不为static的元素进行定位，并且脱离标准文档流，文档流不为该元素预留空间，原来的位置被其他元素顶替。
fixed固定定位
在固定定位的情况下，该元素默认相对于视口的位置进行定位，并且脱离标准文档流，页面滚动时，该元素不会跟随页面滚动。当元素祖先的transform、perspective、filter、backdrop-filter属性非none时，该元素就会变成相对于该祖先进行定位。
sticky粘性定位
在粘性定位的情况下，该元素会先以relative的状态进行定位，当页面进行滚动，并且该元素到达阈值位置时，改变成fixed状态相对于最近一个拥有滚动机制的祖先进行定位（这个意思就是说，比如整个页面和当前元素的父元素都可以滚动，当我们滚动的是页面的时候，这个元素就会相对于页面进行定位，可能会出现sticky失效的情况）。
13. ::before和:before、:after、::after有什么区别？
没有什么区别，只是在CSS3中，为了更好的区分伪元素和伪类，才将伪元素都变成了冒号的写法。
14. position: fixed;和position: sticky; 失效问题
当position: fixed;时，当元素祖先的transform、perspective、filter、backdrop-filter属性非none时，该元素就会变成相对于该祖先进行定位，就可能会造成fixed失效。
当position: sticky;时，如果发现sticky失效，我们应该检查该元素的父元素的overflow是否设置为hidden | scroll | auto;，如果设置了这些属性，而且除了父元素之外，还有其他元素可以滚动，如果用户操作其他元素的滚动，那么该元素就会相对于最近的滚动的元素进行sticky定位，就有可能会造成sticky失效。
15. overflow都有哪些值，分别有什么特点？
overflow属性决定了盒子内容溢出时的展示方式。 overflow的值有visible、hidden、scroll、auto、clip。
1. visible
visible是overflow属性的默认值，内容溢出时，不会被裁剪，不会为元素创建BFC。
2. hidden
hidden会对盒子内容超出盒子内边距（padding）以外的内容进行裁剪，不提供滚动条，不允许用户滚动，但是可以通过设置元素的scrollTop等来进行滚动，因此当前盒子依旧是一个滚动容器。
3. clip
clip的行为类似于hidden，只不过他也不可以通过编程方式进行滚动，设置了clip的盒子，已经不是一个滚动容器了，并且它不会为元素创建BFC。
4. scroll
scroll会使容器显示出来滚动条，即使没有内容溢出，滚动条依然会展示，有内容溢出时，用户可以手动滚动该区域。 auto默认状态下，如果没有内容溢出，行为就会类似visible（但是会创建新的BFC），如果有内容溢出就会类似scroll。
16. display的值都有哪些？分别代表了什么？
主要有以下几种：
1. block
会将该元素显示为块级元素，元素前后会带有换行符，可以设置宽高。
2. inline
为display的默认值，会将该元素显示为行内元素，元素前后没有换行符，设置宽高无效。
3. inline-block
会将该元素显示为行内块元素，元素不会独占一行，但是可以设置宽高。
4. list-item
会将该元素显示为列表元素（类似li）。
5. table
会将元素显示为块级表格（类似table）。
6. inline-table
会将元素显示为行内表格
7. flow-root
会将元素作为块级元素，并且创建一个新的BFC。
8. inherit
会将元素的display值继承自父元素。
9. none
会将元素隐藏。
10. flex
会将元素变为弹性盒子布局。
11. grid
会将元素变为网格盒子布局。
17. inline-block的元素为什么会和其他元素有间隙？如何解决？为什么img标签的display: inline;，但是可以设置宽高呢？
inline-block元素之间产生间隙，一种可能是因为我们代码中不小心添加进去了空格导致的，还有一种原因就是HTML把block元素前后的换行符转换成了空白字符，导致出现了间隙，我们可以通过设置font-size: 0;或者微调边距等方式解决该问题。
img标签之所以可以设置宽高，是因为它属于可替换元素，像我们的video、audio、iframe等标签都属于可替换元素。它们最终的展示效果不是由CSS控制的，可替换元素拥有内置宽高，他们可以设置width和height。他们的性质同设置了display:inline-block的元素一致。
18. 文本溢出怎么处理？
单行文本溢出显示省略号
<style>
.box {
width: 100px;
overflow: hidden;
text-overflow: ellipsis; /* 文字溢出显示省略号 */
white-space: nowrap; /* 强制文字不换行 */
}
</style>
多行文本溢出显示省略号（该方法仅可在-webkit内核浏览器中使用）
<style>
.out {
width: 100px;
display: -webkit-box;
-webkit-line-clamp: 2; /* 规定文字最多可以多少行 */
-webkit-box-orient: vertical; /* 规定内容应该被水平或垂直排列，目前是垂直排列 */
text-overflow: ellipsis;
overflow: hidden;
}
</style>
非-webkit内核浏览器多行文本溢出显示省略号处理
可以通过伪元素+定位或者伪元素+定位+浮动的方式进行实现。
19. 实现居中布局
利用弹性布局
<style>
.out {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.inner {
width: 200px;
height: 200px;
background: aquamarine;
}
</style>
<body>
<div class="out">code>
<div class="inner"></div>code>
</div>
</body>
在知道内层盒子宽高时，利用绝对定位
<style>
.out {
width: 100vw;
height: 100vh;
position: relative;
}
.inner {
width: 200px;
height: 200px;
background: aquamarine;
position: absolute;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
}
</style>
<body>
<div class="out">code>
<div class="inner"></div>code>
</div>
</body>
在知道内层盒子宽高时，利用绝对定位
<style>
.out {
width: 100vw;
height: 100vh;
position: relative;
}
.inner {
width: 200px;
height: 200px;
background: aquamarine;
position: absolute;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
}
</style>
<body>
<div class="out">code>
<div class="inner"></div>code>
</div>
</body>
20. 层叠
z-index
某些元素的渲染顺序是可以由一个z-index的CSS属性控制，而这个属性就可以让他们形成一个层叠上下文。
如何才能形成层叠上下文
根元素（<html>）；
position的值为absolute或者relative，并且z-index的值不为auto的元素；
position的值为fixed或者sticky的元素；
flex容器的子元素，且z-index !== auto；
grid容器的子元素，且z-index !== auto；
opacity的值小于1的元素；
层叠等级
层叠等级规定了在同一层叠上下文中，各个内部元素或内部其他层叠上下文在当前层叠上下文Z轴排列的顺序。
不同层叠等级的元素在层叠上下文中由上到下的排列顺序如下：
z-index>0的元素z-index: auto;/z-index: 0的元素inline/inline-block盒子float浮动元素block块级元素z-index<0的元素当前层叠上下文的backgroung以及border
21. 谈一谈BFC，以及它如何创建？它的作用是什么？
块级格式化上下文（Block Formatting Context）简称"BFC"，通俗来讲，BFC就是一块独立的渲染区域，它规定了处于BFC内部的块级元素如何布局。
特点：
属于同一个BFC的相邻块级元素垂直排列；相邻的两个块级元素的边距由margin决定；相邻的两个块级元素的margin会进行重叠，最终结果为二者的较大值（比如元素a的margin-bottom: 30px;元素b的margin-top: 20px;那么它们的边距就是30px）；BFC的区域不会与浮动元素重叠；BFC的高度在计算时，内部的浮动元素也参与计算；BFC内部元素不会影响外边的元素，外边的也不会影响内部的元素。
如何创建（开启）BFC？
文档的根元素(<html>)；浮动元素（float不为none的元素）；position的值为absolute或者fixed的元素；行内块级元素（display:inline-block的元素）；overflow不为visible或者cilp的块级元素；display值为flow-root的元素；弹性元素的子元素（如果他们本身不是弹性、网格、表格容器的话）；
网格元素的子元素（如果他们本身不是弹性、网格、表格容器的话）；
它的作用是什么：
防止外边距重叠，如果两个元素的边距重叠，我们可以将其中一个元素创建一个新的BFC，就和另一个元素形成了两个不同的BFC，外边距就不会重叠了。解决高度塌陷，如果一个父容器内有一个浮动元素和一个普通元素，如果我们父容器没有设置高度，那么它的高度只会被普通元素撑开，如果普通元素高度小于浮动元素，浮动元素就会溢出。如果我们在当前父容器内创建BFC，浮动元素也会参与父容器高度的计算。排除外部浮动，比如我们当前同一个BFC中有两个相邻的块级元素，一个浮动元素和一个普通元素，浮动元素会覆盖普通元素，我们可以利用BFC的特性，给非浮动元素创建一个新的BFC，就不会和浮动元素进行重叠了。
22. CSS3有哪些新特性
1. 边框
新增了border-radius圆角，可以通过该属性给元素四周或某一个角设置圆角。新增了border-shadow阴影，可以通过该属性给元素周围添加阴影。新增了border-image图片边框，可以通过该属性指定一张图片作为元素的边框。
2. 背景
新增了background-clip，规定背景的绘制区域，有三个值border-box、padding-box、content-box，设置不同的值，可以让背景充满不同的盒区域。新增了background-origin，规定背景图片的定位区域。新增了background-size，规定背景图片的尺寸。
3. 渐变
定义了线性渐变（Linear Gradients），可以向下、向上、向左、向右、对角进行颜色渐变。定义了径向渐变（Radial Gradients），由中心定义，向四周进行渐变。并且可以设置形状。
4. 文本效果
新增了hanging-punctuation，规定标点字符是否位于线框之外。新增了punctuation-trim，规定是否对标点字符进行修剪。新增了text-align-last，设置如何对齐最后一行，或者紧挨着强制换行符之前的那一行。新增了text-emphasis，向元素的文本应用重点标记以及重点标记的前景色。新增了text-justify，规定当text-align设置为justify时所使用的对齐方法。新增了text-outline，规定文本的轮廓。新增了text-overflow，规定了文本溢出的情况处理方式。新增了text-shadow，规定了文字阴影。新增了text-wrap，规定了文本换行规则。新增了word-break，规定了非中日韩文本的换行规则。
新增了word-wrap，允许对长的不可分割的单词进行分割并且换行到下一行。
5. 字体
css3中可以使用@font-face定义本地字体包。
6. 2D转换
新增了transform，适用于2d或3d转换的元素。新增了transform-origin，可以更改转换元素的位置。transform有几种方法，分别是 matrix(n,n,n,n,n,n)（2D转换，使用6个值的矩阵）、translate(X | Y)(x,y)（定义2D转换，沿X或Y轴进行平移、scale(X | Y)(x,y)（定义2D转换，使X方向或Y方向进行缩放相应的倍数）、rotate(angle)（定义2D转换，进行旋转）、skew(X | Y)(x-angle,y-angle)（定义2D转换，沿X或Y轴倾斜转换）
7. 3D转换
新增了transform-style，规定被嵌套元素如何在3D空间中展示。新增了perspective，规定了3D元素的透视效果。新增了perspective-origin，规定了3D元素的底部位置。新增了backface-visibility，定义元素在不面对屏幕时是否可见。transform的方法和2D转换的差不多，只是除了skew方法以外，其它方法多了一个Z轴。
8. 动画
新增@keyframes创建动画，定义动画时可以定义动画在不同阶段的状态，然后在需要使用动画的地方使用animation关键字，绑定动画名称，给出执行动画的时间。
9. 弹性盒子（Flex）
弹性盒子由弹性容器（Flex container）和弹性子元素（Flex item）组成。通过将容器设置为display: flex | inline-flex;来让该容器变成弹性容器。弹性容器中有两个轴主轴和交叉轴，默认水平方向为主轴，所以默认情况下，弹性容器内的弹性子元素，都是在水平方向排列。使用flex-direction属性，可以改变弹性容器的主轴方向，默认值为row，可选值有row-reverse、column、column-reverse。justify-content属性规定了弹性子元素在弹性容器轴的对齐方式，有五个值flex-start（从头对齐）、flex-end（从尾部对齐）、center（居中对齐）、space-between（左右两端对齐）、space-around（均分对齐）。align-items属性规定了弹性子元素在弹性容器交叉轴的对齐方式，同样也有五个值flex-start（交叉轴头部对齐）、flex-end（交叉轴尾部对齐）、center（居中对齐）、baseline（基线对齐）、stretch（默认对齐方式，拉伸）。align-content属性类似于align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。值和justify-content一样。order属性用来定义弹性子元素的排列顺序，可以为负值，值越小的就会排在越前边。align-self属性用来定义当前弹性子元素自己在交叉轴的对齐方式。值和align-items一样。flex属性用于指定弹性子元素如何分配空间。flex: auto（1 1 auto） | initial（0 1 auto） | none（0 0 auto） | inherit（继承父元素） | [flex-grow]（定义弹性盒子元素的扩展比率） || [flex-shrink]（定义弹性盒子元素的收缩比率） || [flex-basis]（定义弹性盒子元素的默认基准值）。当flex属性的值只有一个时，必须是一个[flex-grow]的有效值，简写会拓展为[flex-grow] 1 0，或者是一个[flex-basis]的有效值，那么简写会拓展为1 1 [flex-basis]，或者是none 或者全局关键字之一。当flex属性的值有两个时，第一个值必须是[flex-grow]的一个有效值，第二个可以是[flex-shrink]或者[flex-basis]两个其中一个的有效值。[flex-grow]的关键值为一个数字。[flex-shrink]的关键值为一个数字。[flex-basis]的关键值为元素的长度，合法值有auto、inherit、后面跟%，px，em的字符串、其他任何长度单位的数字。当我们设置auto时，会看当前元素有没有设置width，如果有，就会将width的值做为flex-basis的值，如果没有，就会用元素实际的长度做为flex-basis的值。
10. 媒体查询
11. 网格布局
23. link标签和@import引入CSS的区别
link作为HTML标签，可以放在HTML文件任何位置，而@import只能放在除了@charset以外其他CSS的前面。link的兼容性更好，@import属于CSS2.1以后的规则，只在IE5以后才被支持。link作为HTML标签，可以使用js动态插入，@import则比较麻烦，只能通过js先插入一个style标签，然后在里面添加@import。link会最大限度的支持并行下载，但是@import如果嵌套过多时，就会导致串行加载，出现FOUC。都会阻塞页面渲染，但是link标签会在HTML解析时同步解析，而@import则是在页面加载完毕之后才解析。
FOUC：用户定义样式表加载之前浏览器使用默认样式显示文档，用户样式加载渲染之后再重新显示文档，造成页面闪烁，在网速较慢或过多使用@import时出现，影响用户体验。
24. CSS预处理器有什么好处
可以利用嵌套的方式来编写CSS代码，层级更加直观；可以将公共样式抽取成变量，方便复用；（CSS3也支持变量了）可以使用mixin（混入），将一些CSS代码片段抽取出来，其它页面可以直接一行就能实现多行的功能。比如我们可以把实现0.5px的方法、水平/垂直居中的方法抽取成公共方法；
25. less和sass有什么区别
语法不同，因为这是两种不同的CSS预处理器，它们的一些语法是不一样的；功能不同，比如sass支持条件语句和循环语句，而less就不支持；less是在客户端进行的处理，而sass基于Node-Sass或者Dart-Sass（之前是Ruby），是在服务端进行的处理。
总的来说，sass的功能比less的
更加强大，但是less相比于sass来说，也更加的轻量化，尤其是我们在用包管理器安装sass相关的插件时，经常会因为版本问题，产生很多奇奇怪怪的报错信息，极大的影响了我们的心智和时间。
26. 在vue中，我们给每一个组件的style设置scoped就可以达到隔离样式，它的原理是什么？
其实他是通过postcss-loader实现的，当我们给style标签加了scoped属性时，比如通过webpack编译代码时，会将我们当前页面的每个dom元素都添加一个[data-v-xxxxxx]的属性，CSS的选择器都变成属性选择器，比如我们之前的类名是.a，那么经过转换之后就变成了.a[data-v-xxxxxx]，以保证和其它页面的类名保持不同，就不会造成样式冲突了。
27. 如何实现动画呢？
使用transition，它的第一个参数可以指定我们CSS属性的名称，第一次渲染或者指定的CSS属性改变时，会触发过渡动画效果，它只有两个状态开始和结束，执行完毕之后就不会再次执行了，除非指定的CSS属性再次发生变化。使用CSS3的animation和@keyframes，我们可以通过@keyframes设置动画的关键帧以及动画名称，关键帧可以用from -> to或者百分比来表示，然后在需要使用动画的地方使用animation，指定要执行的动画名称、执行时间等信息，它可以指定动画结束之后是否循环执行，相比于transition来说，animation更加灵活。使用js动画，其实就是通过定时器，每一段时间改变一次元素的CSS属性，以达到动画的效果。
28. 如何优化动画性能？
尽量减少使用js动画，因为频繁的通过js改变元素的属性，如果改动了宽高、边距等影响布局的属性，就会频繁的引起页面的回流，导致页面卡顿。多使用requestAnimationFrame，该方法会把每一帧中所有的DOM操作合并起来，在一次重绘或回流中执行完毕，并且该函数还会返回我们动画执行的状态，如果返回true，说明我们的动画在当前帧已经执行了，如果为false，说明当前帧没有执行，我们可以把动画放到下一帧去执行。如果有元素需要平移的操作，使用transform里面的translate属性代替left、right的操作，因为left和right的改变，会引起浏览器的重新计算布局，导致回流，而transform不在渲染进行完成，不会影响页面的渲染，效率会更高。
29. 动画执行的最小时间是多少？
这个和我们显示器的刷新率有关，比如我们的显示器是60HZ，那么理论上浏览器每秒钟会重绘60次，因此最平滑的动画效果理论上应该是1000ms/60，大约是16.7ms。
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。