前端之CSS篇-CSDN博客

本文链接：https://blog.csdn.net/m0_47048022/article/details/140982131

1. CSS盒模型，在不同浏览器的差异

css盒子模型又称为框模型（Box Model），包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。如下图：

盒子模型分为标准盒模型和IE盒模型。

标准盒模型：width = content (width、height只包含content)，标准盒模型也可以转换为IE盒模型，添加属性 box-sizing: border-box;
IE盒模型: width = content + padding + border (width、height包含content、padding、border)，同理，添加属性 box-sizing: content-box; 可以转换为标准盒模型。

我们可以通过CSS的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>

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>
</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">
      <div class="inner"></div>
    </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">
      <div class="inner"></div>
    </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">
      <div class="inner"></div>
    </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不在渲染进行完成，不会影响页面的渲染，效率会更高。