2025前端社招最新面试题汇总- css篇

• vue篇
• js篇
• 手写题篇
• 场景题篇
• 工程篇
• ts篇
• css篇
• 浏览器篇

1. css场景应用

1.1. 三角形

css-border的原理是三角形！

div {
    width: 50px;
    height: 50px;
    border: 40px solid;
    border-color: orange blue red green;
}

当div的高度和宽度变为0 的时候，

这样将某一个border设置为transparent（透明）的时候，就可以成为三角形，可以将对面的边设置为宽度为0,就可以让三角形最小化

div {
    width: 0;
    height: 0;
    border: 40px solid;
    border-color: transparent transparent red;
}

1.2. 扇形

div {
  width: 0;
  height: 0;
  border: 40px solid transparent;
  border-radius: 40px;
  border-top-color: red;
}

1.3. 自适应正方形

第一种方法,利用vw
.div {
  width: 20vw;
  height: 20vw;
  background-color: red;
}

// 利用元素的margin/padding百分比是相对父元素width的性质来实现：
//	当元素高度设为 0 时，通过 padding-top 撑开高度 （实际渲染高度）
// background 部分包含Padding
.div {
  width: 20%;
  height: 0;
  padding-top: 20%;
  background-color: red;
}

// 利用子元素的margin-top的值来实现：
//  如果子元素有margin-top，而父元素没有设置margin或边框，
// 那么这个margin-top会导致整个父元素向下移动，而不是在父元素内部产生间距。
.square {
  width: 30%;
  overflow: hidden; // BFC，计算高度的时候会被撑开，避免塌陷
  background: yellow;
}
.square::after {
  content: '';
  display: block;
  margin-top: 100%; // maring相对于父元素实现
}

1.4. 画一条0.5px的线

采用transform: scale()的方式，该方法用来定义元素的2D 缩放转换：
.line {
  width: 100%;
  height: 1px;
  background-color: black;
  transform: scaleY(0.5);
  transform-origin: top left; //  transform-origin确保变换从左上角开始，保持线条的位置不变。
}

// 采用meta viewport的方式
// 这样就能缩放到原来的0.5倍，如果是1px那么就会变成0.5px。viewport只针对于移动端，只在移动端上才能看到效果
<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/>

2. css浮动

css浮动讲解

脱离标准流: 使得多个块级元素在行内排列

关于文字的环绕：浮动最初的效果是为了文字环绕

如下图所示，红色为div1，蓝色为div2，div1设置了float:left和一定的宽度，使其向左浮动，div2并没有设置浮动，应该就像没有div2一样紧贴在父元素下，向上向左对齐，其实整个div2的作用域就是绿色的部分，但是因为里面是文字，文字默认环绕，所以没有重合到一起。

3. CSS的position

positon的理解

Absolute：元素会脱离文档流，定位（top,left等）是相对于离它最近的且不是static定位的父元素而言(递归向上找)，若该元素没有设置宽度，则宽度由元素里面的内容决定，且宽度不会影响父元素，定位为absolute后，原来的位置相当于是空的，下面的的元素会来占据。如果只设置了定位方式没有具体的left,top等值，则保持原来的文档流位置不变

Relative：元素仍处于文档流中，定位是相对于原本自身的位置，若没有设置宽度，则宽度为父元素的宽度，该元素的大小会影响父元素的大小。

Fixed：绝对定位，是相对于浏览器窗口来定位的，是固定的，不会跟屏幕一起滚动。

CSS3新增的sticky属性：相当于是relative和fixed的结合，通过right,top,left,bottom设置阈值，阈值之前为relative，阈值之后为fixed，可以用来设置返回贴顶的栏目

.element {
  position: sticky;
  top: 10px;
}

一般情况下：CSS 中，为什么绝对定位（absolute）的父级元素必须是相对定位（relative）？

其实绝对定位absolute的参照对象是“离它最近的已定位的祖先元素”，这句话里有两个关键，

一个是“离它最近的祖先元素”，意思是那个参照元素不一定是父元素，也可以是它的爷爷、爷爷的爷爷等等， 如果它的祖先里同时有2个及以上的定位元素，就参照离它最近的一个元素定位

还有一个是“已定位”，这个定位也不一定非要是相对定位，也可以是绝对定位，为什么一般都是用相对定位呢，因为相对定位的特性是虽然它定位了，就算给了偏移量它离开了原来的地方，但是它原来占的地方也不会让出来的，这样的好处是原来在它周围的其他元素不会因为它的离开而改变位置而使页面乱套，所以用相对定位是非常合适的（如果你另有其他需要，祖先元素绝对定位也不是不可以）

4. 题目换成图片

text-indent：100%；
overflow:hidden;
white-space:nowrap;

把题目的文字替换成为图片,不能直接display:none,这样整个h1不就没了吗,所以只能想办法让文字隐藏,text-indent:100%;表示首行缩进,%表示相对于父元素缩进的百分比,overflow:hidden,缩进之后会往后退,有溢出则隐藏,white-space:nowrap,保证溢出的文字不会换行

5. flex布局

flex 布局是意为“弹性盒布局”，Flex布局的核心在于将容器（flex container）内的项目（flex item）视为灵活的盒子，这些盒子可以自动适应宽度，而无需依赖于传统的块状布局和浮动定位。容器内的所有子元素自动成为容器成员，称为Flex项目。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。

容器:

设置display:flex

兼容：display:-webkit-flex;

行内元素也可以设置：display: inline-flex;

属性：

• flex-direction：row | row-reverse | column | column-reverse;
• flex-wrap：nowrap | wrap | wrap-reverse; （设置项目是否换行。）
• flex-flow：flex-direction || flex-wrap; 默认为 row nowrap;
• justify-content：flex-start | flex-end | center | space-between | space-around;（项目在主轴上的对齐方式。）

• align-items：flex-start | flex-end | center | baseline | stretch;（项目在交叉轴上如何对齐）
• align-content：flex-start | flex-end | center | space-between | space-around | stretch;（多根轴线的对齐方式）

项目

属性：

• order：属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
• flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
• flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
• flex-basis： 默认为auto(项目自身的大小); 定义了在分配多余空间之前，项目占据的主轴空间（main size）。

属性值	初始大小基准	剩余空间分配逻辑	典型应用场景
flex-basis: auto	基于内容尺寸	按 flex-grow比例分配剩余空间	内容动态变化，需保留内容最小宽度
flex-basis: 0%	强制为 0	按 flex-grow比例分配 全部空间	等宽布局、强制压缩内容

• flex：none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
• align-self：auto | flex-start | flex-end | center | baseline | stretch; 允许单个项目有与其他项目不一样的对齐方式，覆盖align-items属性

flex 布局的缩写：
flex: flex-grow flex-shirnk flex-basis的缩写
默认值： 0 1 auto (不可放大，可以缩小)
flex:auto（1 1 auto）
flex:none（0 0 auto）
flex:1（1 1 0%）
flex:0（0 1 0%）

flex:1

当flex只有一个参数的时候：

如果参数没有单位，则表示flex-grow:为1时则平均填满剩余空间

多个项目设置flex,和本身大小没有关系，按照flex后面的数字的比例划分

flex:1 flex:2 flex;3 则分别占据1/6，2/6，3/6

6. css清除浮动

juejin.cn/post/684490…

在清除浮动前我们要了解两个重要的定义：
浮动的定义： 使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。
高度塌陷： 浮动元素父元素高度自适应（父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷）

清除浮动的属性clear.：

• clear:left | right | both | none | inherit：元素的某个方向上不能有浮动元素 ，是针对当前元素的属性，它不能影响到其他元素（前面的浮动元素）
• clear:both：在左右两侧均不允许浮动元素。

清除浮动的方法：

1. 1. 万能清除法 父元素增加 after伪类 清浮动（现在主流方法，推荐使用）

伪类是给该元素内容前后增加内容，加的其实是它的子类，那这里就相当于给里面的浮动元素增加了一个兄弟元素

原理：设置了clear属性的元素左右的边都不能和前面的浮动元素相邻，那只能将这个新的元素放在浮动元素的下面，因此撑起了高度

.container:after{
    content:'';
    display:block;
    clear:both;
    height:0;
    visibility:hidden;
}
//a、触发 IE下 haslayout，使元素根据自身内容计算宽高。
//b、FF（Firefox） 不支持；
.clear{
  zoom:1;
}

1. 2. clear清除浮动（添加空div法）和上面的原理一样

在浮动元素下方添加空div,并给该元素写css样式：
{
    clear:both;
    height:0;
    overflow:hidden;
}

1. 3. 给父级添加overflow:hidden 清浮动方法

原理：触发了元素的bfc,bfc内部计算高度需要包含浮动元素

问题：需要配合 宽度 或者 zoom 兼容IE6 IE7；
.container{
    overflow: hidden;
    zoom: 1;
}

1. 4. 给浮动元素父级设置高度

我们知道了高度塌陷是应为给浮动元素的父级高度是自适应导致的,那么我们给它的设置适当的高度就可以解决这个问题。缺点：在浮动元素高度不确定的时候不适用

1. 5. 以浮制浮（父级同时浮动）

何谓“以浮制浮”呢？就是让浮动元素的父级也浮动。缺点：需要给每个浮动元素父级添加浮动，浮动多了容易出现问题

7. css的盒子模型

①盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)

②类型： IE 盒子模型、标准 W3C 盒子模型；

两种盒模型的主要区别是:标准盒模型的宽高是值内容宽高(content)

而IE盒模型的宽高是指content+padding+border。

⑤设置盒模型的方式是：设置box-sizing

box-sizing:content-box 标准盒模型

box-sizing:border-box IE盒模型

标准模式和怪异模式

• 在css3中新增了box-sizing属性：

当为box-sizing：content-box时，将采取标准模式进行解析计算

盒子总宽度/高度=width/height+padding+border+margin

.box{
    width:100px;
    height:100px;
    border:10px #ddd solid;
    padding:10px;
    margin:10px;
        box-sizing:content-box;
}

当为box-sizing：border-box时，将采取怪异模式解析计算

盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin;

也即是说 width = 内容区宽度 + padding + border

.box{
    width:100px;
    height:100px;
    border:10px #ddd solid;
    padding:10px;
    margin:10px;
        box-sizing:border-box;
}

• 当为box-sizing：inherit时，将从父元素来继承box-sizing属性的值

8. BFC 块级格式化上下文/外边距重叠与塌陷

bfc

BFC(Block formatting context)：所谓BFC，可直译为“块级格式化上下文”，BFC定义了一块独立的渲染区域，规定了其内部块级元素的渲染规则，其渲染效果不受外界环境的干扰。可以包含浮动元素，使到它可以包含浮动元素，从而防止出现高度塌陷.

BFC定义了如下布局规则：

1.内部的块元素会在垂直方向，一个接一个地放置。
2.块元素垂直方向的距离由margin决定。两个相邻块元素的垂直方向的margin会发生重叠。
3.每个元素的左外边距，与包含块的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4.BFC的区域不会与float元素的区域重叠。（制作双列布局）
5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6.计算BFC的高度时，浮动元素也参与计算（可以清除浮动）

根据CSS规范，当给元素添加下列Style属性时，元素成为一个BFC元素。

• 根元素：body；
• 元素设置浮动：float 除 none 以外的值；
• 元素设置绝对定位：position (absolute、fixed)；
• display 值为：inline-block、table-cell、table-caption、flex等；
• overflow 值为：hidden、auto、scroll；

bfc的作用：

• 解决兄弟元素和父子元素的margin的重叠问题：由于BFC是一个独立的区域，内部的元素和外部的元素互不影响。

• • 将两个兄弟元素变为两个BFC，就解决了兄弟元素margin重叠的问题。
  • 将父元素设置为bfc，就可以避免父子元素的重叠/也可以给父元素增加border

• 解决高度塌陷的问题：在对子元素设置浮动后，父元素会发生高度塌陷，也就是父元素的高度变为0。解决这个问题，只需要把父元素变成一个BFC。常用的办法是给父元素设置overflow:hidden。
• 创建自适应两栏布局：可以用来创建自适应两栏布局：左边的宽度固定(左边设置float)，右边的宽度自适应(右边设置为bfc,不和浮动元素重叠)。

9. 什么是margin重叠问题？如何解决？

问题描述： 两个块级元素的上外边距和下外边距可能会合并（折叠）为一个外边距，其大小会取其中外边距值大的那个，这种行为就是外边距折叠。

需要注意的是，浮动的元素和绝对定位这种脱离文档流的元素的外边距不会折叠（因为已经是BFC）。重叠只会出现在垂直方向。

计算原则： 折叠合并后外边距的计算原则如下：

• 如果两者都是正数，那么就去最大者
• 如果是一正一负，就会正值减去负值的绝对值
• 两个都是负值时，用0减去两个中绝对值大的那个

解决办法： 对于折叠的情况，主要有两种：兄弟之间重叠和父子之间重叠

（1）兄弟之间重叠

• 底部元素变为行内盒子：display: inline-block
• 底部元素设置浮动：float
• 底部元素的position的值为absolute/fixed
• 将兄弟分别变成独立的bfc，互不影响

（2）父子之间重叠

如果子元素有margin-top，而父元素没有设置margin或边框，那么这个margin-top会导致整个父元素向下移动，而不是在父元素内部产生间距。

• 父元素加入：overflow: hidden
• 父元素添加透明边框：border:1px solid transparent
• 子元素变为行内盒子：display: inline-block
• 子元素加入浮动属性或定位

10. css的常见布局

juejin.cn/post/690553…

10.1.1.1. CSS 实现对角线布局

知识点：

grid 布局：www.ruanyifeng.com/blog/2019/0…

// flex 布局
.container {
  justify-content: space-between;
}

.div2 {
  align-self: center;
}
.div3{
  align-self: flex-end;
}

// 使用grid布局实现
.container {
  display: grid;
  grid-template-areas: "area1 . ."
                       ". area2 ."
                       ". . area3"
}

.items-1: {
  grid-area: area1;
}
.items-2: {
  grid-area: area2;
}
.items-3: {
  grid-area: area3;
}

11. css单位

像素（px）是页面布局的基础，一个像素表示终端（电脑、手机、平板等）屏幕所能显示的最小的区域，像素分为两种类型：CSS像素和物理像素：

• CSS像素：为web开发者提供，在CSS中使用的一个抽象单位；
• 物理像素：只与设备的硬件密度有关，任何设备的物理像素都是固定的。

百分比（%），当浏览器的宽度或者高度发生变化时，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。一般认为子元素的百分比相对于直接父元素。

浏览器默认的字体大小是 16px

em

1. 一般情况下，em是参考父级的字体大小来进行换算的。但是，对于长度（length，width，padding或者 margin），这个单位参考的是当前的字体大小来换算的。

body {
    font-size: 24px;
    width: 10em;    /* 10em = 24px * 10 = 240px */
}

rem

2. rem是参考根级字体大小即html中的字体大小来换算的。

vh和vw

vh和vw都是根据视见区（view port）的百分比来计算的。

vw : 1vw 等于视口宽度的1%

vh : 1vh 等于视口高度的1%

vmin : 选取 vw 和 vh 中最小的那个

vmax : 选取 vw 和 vh 中最大的那个

总结：

1. 浏览器的默认字体大小是16px;
2. 百分数和相对单位都会最终被换算成px。因为浏览器只能识别px；
3. em在用于长度单位的时候，参考的是当前的字体大小而非父级字体（这里很容易混淆）。
4. 以上都是相对单位

px 如何转为 rem

rem 值 = px 值 / (基础根元素字体大小)

自动转换

// sass

// 定义基准字体大小（默认16px，可配置）
$base-font-size: 16px !default;

// px转rem函数
@function px-to-rem($px) {
  @return calc($px / $base-font-size) * 1rem;
}

// 使用案例
.element {
  width: px-to-rem(32px);    // 2rem (32/16)
  padding: px-to-rem(24px);  // 1.5rem (24/16)
}



// less
// 定义基准字体大小变量
@base-font-size: 16px;

// 定义px转rem混入
.px-to-rem(@property, @px) {
  @rem-value: (@px / @base-font-size);
  @{property}: ~"@{rem-value}rem";
}

// 使用案例
.element {
  .px-to-rem(width, 32px);   // width: 2rem;
  .px-to-rem(padding, 24px); // padding: 1.5rem;
}


// webpack插件
例如 postcss-pxtorem 插件，它可以在构建过程中自动将 px 转换为 rem 。
您需要在配置中设置根元素的字体大小等相关参数。

12. 高度问题

ele.clientWidth = 宽度 + padding

ele.offsetWidth = 宽度 + padding + border

ele.scrollTop = 被卷去的上侧距离

ele.scrollHeight = 自身实际的高度（不包括边框）

12.1.1. 如何判断元素是否到达可视区域

以图片显示为例：

• window.innerHeight 是浏览器可视区的高度；

• document.body.scrollTop || document.documentElement.scrollTop 是浏览器滚动的过的距离；

• imgs.offsetTop 是元素顶部距离文档顶部的高度（包括滚动条的距离）；

• 内容达到显示区域的：img.offsetTop < window.innerHeight + document.documentElement.scrollTop;

13. CSS中first-child和nth-child

first-child：

E:first-child是伪类选择器，

匹配父元素的第一个子元素E：要满足既是第一个元素，又是E元素

从说明可以看出E是你要选择的第一个子元素，而不是父元素。一开始，误以为E:first-child是E的第一个子元素。

E：nth-child(n)

既是E元素，又是属于其父元素的第n个子元素，同时满足两个条件

14. 渲染机制：display和visibility

（1）渲染相关区别

• display：none

指的是元素完全不陈列出来，不占据空间，涉及到了DOM结构，故产生reflow与repaint，相当于被删除

• visibility：hidden

指的是元素不可见但存在，保留空间，不影响结构，故只产生repaint，绑定在上面的事件不会被触发

• opacity=0

元素不可见但存在，绑定在上面的事件会被触发

• z-index 负值
• transform: scale(0,0)

（2）是否是继承属性

• display:none是非继承属性，子孙节点会随着父节点从渲染树消失，通过修改子孙节点的属性也无法显示；
• visibility:hidden是继承属性，子孙节点消失是由于继承了hidden，通过设置visibility:visible可以让子孙节点显示；

（3）修改常规文档流中元素的 display 通常会造成文档的重排，但是修改visibility属性只会造成本元素的重绘；

（4）如果使用读屏器，设置为display:none的内容不会被读取，设置为visibility:hidden的内容会被读取。

15. css选择器优先级问题

1. 权值较大的优先级越高
2. 比较样式时，将对应的选择器权值相加，大的优先级高
3. 权值相同的，根据从上往下的原则，后定义的优先级高
4. 特殊！important，优先级最高

内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式。

16. display

默认情况下：

1. 常见的块级元素(自动换行， 可设置高宽 )有：

div,h1-h6,p,pre,ul,ol,li,form,table等

2. 常见的行内元素（无法自动换行，无法设置宽高）有：

a,span，i（斜体）,em（强调）,sub(下标)，sup（上标）,label等。

3. 常见的行块级元素(拥有内在尺寸，可设置高宽，不会自动换行 )有：

(button,input，textarea,select), img等

display:

• block:块级元素
• inline:行内级元素：不能设置宽高
• none:隐藏 不占据空间
• inline-block ：行块级元素，可以设置宽高

17. over-flow:hidden

text-overflow: clip|ellipsis|string;

值	描述
clip	修剪文本。
ellipsis	显示省略符号来代表被修剪的文本。
string	使用给定的字符串来代表被修剪的文本。

18. css3的transform

转换：大小、位置移动、缩放、旋转，多种属性用空格分隔开，

• 不会引起回流和重绘，更加高效，但是使用translate之后，元素仍然会占据原来的空间

transform: rotate scale skew translate matrix;

translate(50px,100px)//向右移动50px,向下移动100px;
rotate(30deg)//把元素顺时针旋转 30 度。
scale(2,4)//把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。
skew(30deg,20deg)//围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。
matrix()

19. css3动画

animation:在某个元素上绑定动画。把 "myfirst" 动画捆绑到 div 元素，时长：5 秒：不需要触发条件

div
{
    animation: myfirst 5s;
}

@keyframes myfirst
{
    from {background: red;}
    to {background: yellow;}
}

//或者用百分比来规定动画的时间from和to表示0%和100%
@keyframes myfirst
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

transition是过度属性，强调过度，它的实现需要触发一个事件（比如鼠标移动上去，焦点，点击等）才执行动画。

 .inner {
    display: inline-block;
    width: 50px;
    background-color: green;
    height: 20px;
    transition: background-color 5s;
}

.inner:hover {
    background-color: red;
}

20. CSS3中有哪些新特性

• 新增各种CSS选择器 （: not(.input)：所有 class 不是“input”的节点）
• 圆角 （border-radius:8px）
• 多列布局 （multi-column layout）
• 阴影和反射 （Shadoweflect）
• 文字特效 （text-shadow）
• 文字渲染 （Text-decoration）
• 线性渐变 （gradient）
• 旋转 （transform）
• 增加了旋转,缩放,定位,倾斜,动画,多背景

21. CSSSprites 精灵图

CSSSprites（精灵图），将一个页面涉及到的所有图片都包含到一张大图中去，然后利用CSS的 background-image，background-repeat，background-position属性的组合进行背景定位。

优点：

• 利用CSS Sprites能很好地减少网页的http请求，从而大大提高了页面的性能，这是CSS Sprites最大的优点；
• CSS Sprites能减少图片的字节，把3张图片合并成1张图片的字节总是小于这3张图片的字节总和。

缺点：

• 在图片合并时，要把多张图片有序的、合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景。在宽屏及高分辨率下的自适应页面，如果背景不够宽，很容易出现背景断裂；
• CSSSprites在开发的时候相对来说有点麻烦，需要借助photoshop或其他工具来对每个背景单元测量其准确的位置。
• 维护方面：CSS Sprites在维护的时候比较麻烦，页面背景有少许改动时，就要改这张合并的图片，无需改的地方尽量不要动，这样避免改动更多的CSS，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动CSS

22. css工程化相关

CSS 工程化是为了解决以下问题：

1. 宏观设计：CSS 代码如何组织、如何拆分、模块结构怎样设计？
2. 编码优化：怎样写出更好的 CSS？
3. 构建：如何处理我的 CSS，才能让它的打包结果最优？
4. 可维护性：代码写完了，如何最小化它后续的变更成本？如何确保任何一个同事都能轻松接手？

以下三个方向都是时下比较流行的、普适性非常好的 CSS 工程化实践：

• 预处理器：Less、 Sass 等；
• 重要的工程化插件： PostCss；
• Webpack loader 等 。

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

（1）预处理器：为什么要用预处理器？它的出现是为了解决什么问题？

预处理器，其实就是 CSS 世界的“轮子”。预处理器支持我们写一种类似 CSS、但实际并不是 CSS 的语言，然后把它编译成 CSS 代码： 就是预先编译处理CSS。它扩展了 CSS 语言，增加了变量、Mixin、函数等编程的特性，使 CSS 更易维护和扩展。预处理器普遍会具备这样的特性：

• 嵌套代码的能力，通过嵌套来反映不同 css 属性之间的层级关系 ；
• 支持定义 css 变量；
• 提供计算函数；
• 允许对代码片段进行 extend 和 mixin；
• 支持循环语句的使用；
• 支持将 CSS 文件模块化，实现复用。

Less与sass都是CSS预编译器. 对CSS赋予了动态语言的特性

区别：

	优点	缺点
sass	用户多，更容易找到会用scss的开发，更容易找到scss的学习资源； 可编程能力比较强，支持函数，列表，对象，判断，循环等； 相比less有更多的功能； Bootstrap/Foundation等使用scss； 丰富的sass库：Compass/Bourbon； 变量:Sass: $var Javascript编译,客户端	安装node-sass会经常失败或者报错，需要使用cnpm或者手工安装
less	可以在浏览器中运行，实现主题定制功能；变量:@var	编程能力弱，不直接支持对象，循环，判断等； @variable 变量命名和css的@import/media/keyframes等含义容易混淆； mixin/extend的语法比较奇怪； mixin的参数如果遇到多参数和列表参数值的时候容易混淆；

（2）PostCss：PostCss 是如何工作的？我们在什么场景下会使用 PostCss？

，

预处理器处理的是 类CSS，而 PostCss 处理的就是 CSS 本身。PostCss 类似于babel。都是将源文件解析为AST然后经由插件处理。PostCss 强大的插件机制支持各种各样的扩展。

PostCss 在业务中的使用场景非常多：

• 提高 CSS 代码的可读性：PostCss 其实可以做类似预处理器能做的工作；
• 当我们的 CSS 代码需要适配低版本浏览器时，PostCss 的 Autoprefixer 插件可以帮助我们自动增加浏览器前缀；
• 自动添加浏览器前缀，代码合并，代码压缩等。

（3）Webpack 能处理 CSS 吗？如何实现？

Webpack 在裸奔的状态下，是不能处理 CSS 的，Webpack 本身是一个面向 JavaScript 且只能处理 JavaScript 代码的模块化打包工具；Webpack 在 loader 的辅助下，是可以处理 CSS 的。

如何用 Webpack 实现对 CSS 的处理：

• Webpack 中操作 CSS 需要使用的两个关键的 loader：css-loader 和 style-loader

• • css-loader：导入 CSS 模块，对 CSS 代码进行编译处理，将css内容编译为js对象。
  • style-loader：可以从css-loader解析的对象中提取css样式挂载到页面当中。

在实际使用中，css-loader 的执行顺序一定要安排在 style-loader 的前面。书写的时候需要【'style-loader','css-loader'】保证先编译导入再挂载。

23. 响应式设计的概念及基本原理

响应式网站设计（Responsive Web design）是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。

关于原理： 基本原理是通过媒体查询（@media）查询检测不同的设备屏幕尺寸做处理。 关于兼容： 页面头部必须有mate声明的viewport。

<!-- link元素中的CSS媒体查询 --> 
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" /> 
<!-- 样式表中的CSS媒体查询 --> 
<style> 
@media (max-width: 600px) { 
  .facet_sidebar { 
    display: none; 
  } 
}
</style>
@media  (min-width: 600px) and (max-width: 1000px) {
    body{
       font-size: 18px;
    }
}
@media  (min-width: 1000px) {
    body{
       font-size: 22px;
    }
}

24. css的层叠

juejin.cn/post/684490…

层叠顺序，英文称作 stacking order，表示元素发生层叠时有着特定的垂直显示顺序

层叠上下文：

层叠上下文也基本上是有一些特定的CSS属性创建的，一般有3种方法：

1. HTML中的根元素<html></html>本身j就具有层叠上下文，称为“根层叠上下文”。
2. 普通元素设置position属性为非static值并设置z-index属性为具体数值，产生层叠上下文。
3. CSS3中的新属性也可以产生层叠上下文。

• 父元素的display属性值为flex|inline-flex，子元素z-index属性值不为auto的时候，子元素为层叠上下文元素；
• 元素的opacity属性值不是1；
• 元素的transform属性值不是none；
• 元素mix-blend-mode属性值不是normal`；
• 元素的filter属性值不是none；
• 元素的isolation属性值是isolate；
• will-change指定的属性值为上面任意一个；
• 元素的-webkit-overflow-scrolling属性值设置为touch。

判断方法：

1、首先先看要比较的两个元素是否处于同一个层叠上下文中：

1.1如果是，谁的层叠等级大，谁在上面（怎么判断层叠等级大小呢？——看“层叠顺序”图）。

2、如果两个元素不在统一层叠上下文中，请先比较他们所处的层叠上下文的层叠等级。

3、当两个元素层叠等级相同、层叠顺序相同时，在DOM结构中后面的元素层叠等级在前面元素之上。

24.1. z-index属性在什么情况下会失效

通常 z-index 的使用是在有两个重叠的标签，在一定的情况下控制其中一个在另一个的上方或者下方出现。z-index值越大就越是在上层。z-index元素的position属性需要是relative，absolute或是fixed。

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

• 父元素position为relative时，子元素的z-index失效。解决：父元素position改为absolute或static；
• 元素没有设置position属性为非static属性。解决：设置该元素的position属性为relative，absolute或是fixed中的一种；
• 元素在设置z-index的同时还设置了float浮动。解决：float去除，改为display：inline-block；