link 和@import 的区别
CSS选择器
布局
定位
图文样式
实现一个宽高自适应的正方形
响应式
CSS3
- transition 和 animation 的区别
- CSS3 中有哪些新特性
CSS工程化
- Sass、Less 是什么？为什么要使用他们？
- PostCss 是如何工作的？我们在什么场景下会使用 PostCss

link 和@import 的区别

两者都是外部引用 CSS 的方式，它们的区别如下：

link 是 XHTML 标签，除了加载 CSS 外，还可以定义 RSS 等其他事务；@import 属于 CSS 范畴，只能加载 CSS。
link 引用 CSS 时，在页面载入时同时加载；@import 需要页面网页完全载入以后加载。
link 是 XHTML 标签，无兼容问题；@import 是在 CSS2.1 提出的，低版本的浏览器不支持。
link 支持使用 Javascript 控制 DOM 去改变样式；而@import 不支持。

CSS选择器

CSS 选择器及其优先级
对于选择器的优先级从高到低的权重
内联样式：1000
id 选择器：100
类选择器、伪类选择器、属性选择器：10
标签选择器、伪元素选择器：1

注意事项：

!important 声明的样式的优先级最高；
如果优先级相同，则最后出现的样式生效；
继承得到的样式的优先级最低；
通用选择器（*）、子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以它们的权值都为 0 ；
样式表的来源不同时，优先级顺序为：内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式。 | 选择器 | 格式 | 优先级权重 | | —- | —- | —- | | id 选择器 | #id | 100 | | 类选择器 | #classname | 10 | | 属性选择器 | a[ref=“eee”] | 10 | | 伪类选择器 | li:last-child | 10 | | 标签选择器 | div | 1 | | 伪元素选择器 | li::after | 1 | | 相邻兄弟选择器 | h1+p | 0 | | 子选择器 | ul>li | 0 | | 后代选择器 | li a | 0 | | 通配符选择器 | * | 0 |

css选择器“+”和“~”的区别

‘+’是指紧跟在后面的某同级元素
‘~’是指某些同级元素

伪元素和伪类的区别和作用？
伪元素：在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成。它们只在外部显示可见，但不会在文档的源代码中找到它们，因此，称为“伪”元素。例如：
```
p::before {content:"第一章：";}
p::after {content:"Hot!";}
p::first-line {background:red;}
p::first-letter {font-size:30px;}
```
伪类：将特殊的效果添加到特定选择器上。它是已有元素上添加类别的，不会产生新的元素。例如：
```
a:hover {color: #FF00FF}
p:first-child {color: red}
```
总结：伪类是通过在元素选择器上加⼊伪类改变元素状态，⽽伪元素通过对元素的操作进⾏对元素的改变。

布局

盒模型的理解
盒就是浏览器定位的基本单位。
在定位的时候，浏览器就会根据元素的盒类型和上下文对这些元素进行定位。有三种定位方案，分别是常规流，浮动和绝对定位。
盒模型都是由四个部分组成的，分别是 margin、border、padding 和 content。

盒模型的宽度应该如何计算
offsetWidth:它返回该元素的像素宽度，宽度包含内边距（padding）和边框（border），不包含外边距（margin），是一个整数，单位是像素 px，也就是border-box模型的计算。
box-sizing定义如何计算一个元素的总宽度和高度。
content-box：标准盒子模型，默认值。宽度仅包含内容区。
border-box：IE 盒子模型，宽度包含内容，边框、内边距。

BFC的理解和应用？
1、Block format context，块级格式上下文，它是一块独立渲染区域，内部元素不会影响外部元素。
2、形成 BFC 的条件：
最常见的是overflow:hidden、float:left/right、position:absolute。
overflow的值为：hidden、auto、scroll；
元素设置浮动：float不是none
元素设置绝对定位：position是absolute或fixed
行内块：display: inline-block；
表格单元格：display: table-cell
弹性盒：display: flex

3、BFC 的特点

垂直方向上，自上而下排列，和文档流的排列方式一致。
在 BFC 中上下相邻的两个容器的 margin 会重叠
计算 BFC 的高度时，需要计算浮动元素的高度
BFC 区域不会与浮动的容器发生重叠。
BFC 是独立的容器，容器内部元素不会影响外部元素。
每个元素的左 margin 值和容器的左 border 相接触

4、BFC的常见应用

解决 margin 的重叠问题：由于 BFC 是一个独立的区域，内部的元素和外部的元素互不影响，将两个元素变为两个 BFC，就解决了 margin 重叠的问题。
解决高度塌陷的问题：清除浮动
```
.bfc {
overflow:hidden;
}
```
创建自适应两栏布局：可以用来创建自适应两栏布局：左边的宽度固定，右边的宽度自适应。 ```typescript .left{ width: 100px; height: 200px; background: red; float: left; } .right{ height: 300px; background: blue; overflow: hidden; }

左侧设置float:left，右侧设置overflow: hidden。这样右边就触发了 BFC，BFC 的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠，实现了自适应两栏布局。
<a name="cmqAu"></a>
## margin纵向重叠问题
**1、垂直方向margin重叠**<br />**相邻元素的**`**margin-top**`**和**`**margin-bottom**`**会发生重叠，**其大小会取其中外边距值大的那个，这种行为就是外边距折叠。需要注意的是，**浮动的元素和绝对定位**这种脱离文档流的元素的外边距不会折叠。重叠只会出现在**垂直方向**。<br />**计算原则：**<br />折叠合并后外边距的计算原则如下：
- 如果两者都是正数，那么就去最大者
- 如果是一正一负，就会正值减去负值的绝对值
- 两个都是负值时，用 0 减去两个中绝对值大的那个
**解决办法：**<br />对于折叠的情况，主要有两种：**兄弟之间重叠**和**父子之间重叠**<br />（1）兄弟之间重叠
- 底部元素变为行内盒子：`display: inline-block`
- 底部元素设置浮动：float
- 底部元素的 position 的值为absolute/fixed
（2）父子之间重叠
- 父元素加入：overflow: hidden
- 父元素添加透明边框：border:1px solid transparent
- 子元素变为行内盒子：display: inline-block
- 子元素加入浮动属性或定位。
**2、空白内容的**`**<p></p>**`**也会重叠**<br />AAA和BBB的距离是15px。
```typescript
 <style type="text/css">
        p {
            font-size: 16px;
            line-height: 1;
            margin-top: 10px;
            margin-bottom: 15px;
        }
 </style>
<body>
    <p>AAA</p>
    <p></p>
    <p></p>
    <p></p>
    <p>BBB</p>
</body>

margin负值问题

对margin的top、left、right、bottom设置赋值，有何效果？

margin-top和margin-left赋值，元素向上、向左移动
**margin-right**负值，右侧元素左移，自身不受影响。对除了自身以外的元素来说，具体表现就是
**margin-bottom**负值，下方元素上移，自身不受影响

Float布局问题

为什么需要清除浮动？清除浮动的方式
浮动的工作原理：
元素浮动后，不属于文档流中的普通流，此时文档流的普通流会表现得该浮动框不存在一样的布局模式。当包含框的高度小于浮动框的高度时，会出现高度坍塌，导致常规流环绕在浮动流周边，除非设置clear属性。
清除浮动的方式如下：
给父级 div 定义height属性
最后一个浮动元素之后添加一个空的 div 标签，并添加clear:both样式。
包含浮动元素的父级标签添加overflow:hidden或者overflow:auto。（BFC）
使用 :after伪元素。由于 IE6-7 不支持 :after，使用 zoom:1 触发 hasLayout。

使用 clear 属性清除浮动的原理？

clear:none|left|right|both

“元素盒子的边不能和前面的浮动元素相邻”，对元素设置 clear 属性是为了避免浮动元素对该元素的影响，而不是清除掉浮动。
还需要注意 clear 属性指的是元素盒子的边不能和前面的浮动元素相邻，注意这里“前面的”3 个字，也就是 clear 属性对“后面的”浮动元素是不闻不问的。考虑到 float 属性要么是 left，要么是 right，不可能同时存在，同时由于 clear 属性对“后面的”浮动元素不闻不问，因此，当 clear:left 有效的时候，clear:right 必定无效，也就是此时 clear:left 等同于设置 clear:both；同样地，clear:right 如果有效也是等同于设置 clear:both。由此可见，clear:left 和 clear:right 这两个声明就没有任何使用的价值，至少在 CSS 世界中是如此，直接使用 clear:both 吧。
一般使用伪元素的方式清除浮动：
clear 属性只有块级元素才有效的，而::after 等伪元素默认都是内联水平，这就是借助伪元素清除浮动影响时需要设置 display 属性值的原因。

/* 手写 clearfix */
.clearfix:after {
  content: '';
  display: block;
  clear: both;
}

如何实现圣杯布局和双飞翼布局

1、圣杯布局和双飞翼布局的目的

三栏布局，中间一栏最先加载和渲染。
两侧内容固定，中间内容随宽度自适应

2、技术要点

使用float布局
两侧使用margin负值，以便和中间内容横向重叠
防止中间内容被两侧覆盖，一个用padding 一个用margin

  <body>
    <div class="container">
      <header>我是头部</header>
      <div class="main">
        <article class="mainContent">我是内容</article>
        <aside class="left">我是左边</aside>
        <aside class="right">我是右边</aside>
      </div>
      <footer>我是脚</footer>
    </div>
  </body>

  <style>
    .container {
      min-height: 100vh;
      background-color: red;
      display: flex;
      flex-direction: column;
    }
    header {
      height: 100px;
      background-color: yellow;
    }
    .main {
      flex: 1;
      display: flex;
    }
    .mainContent {
      flex: 1;
    }
    .left {
      flex: 0 0 12em;
      order: -1;
      background-color: green;
    }
    .right {
      flex: 0 0 12em;
      background-color: chocolate;
    }
    footer {
      background-color: blueviolet;
      height: 100px;
    }
  </style>

    .container {
      min-height: 100vh;
      min-width: 650px;
    }
    header {
      height: 100px;
      background-color: yellow;
    }
    .main {
      padding-left: 200px;
      padding-right: 200px;
      background-color: aqua;
    }
    .mainContent {
      float: left;
      width: 100%;
    }
    .left {
      float: left;
      width: 200px;
      background-color: green;
      //会让left这个元素往左边挤100%（.container宽度）就会挤到最左边去了。
      margin-left: -100%;
      // 然后因为container有padding：200px，所以这里需要再相对自身宽度往右移动
      position: relative;
      right: 200px;
    }
    .right {
      float: left;
      width: 200px;
      background-color: chocolate;
      // 本来都是三者都是浮动元素，main是100%。.right被挤下去了
      // margin-right等于负值的时候，它对外界来说，它的宽度在缩小。
      // 所以宽度是-200px时，他就挤上去了。
      margin-right: -200px;
    }
    footer {
      background-color: blueviolet;
      height: 100px;
    }
    .clearfix::after {
      content: '';
      display: table;
      clear: both;
    }

实现两栏布局

一般两栏布局指的是左边一栏宽度固定，右边一栏宽度自适应，两栏布局的具体实现：

利用浮动，将左边元素宽度设置为 200px，并且设置向左浮动。将右边元素的 margin-left 设置为 200px，宽度设置为 auto（默认为 auto，撑满整个父元素）。
利用浮动，左侧元素设置固定大小，并左浮动，右侧元素设置 overflow: hidden; 这样右边就触发了 BFC，BFC 的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠。
利用 flex 布局，将左边元素设置为固定宽度 200px，将右边的元素设置为 flex:1。
利用绝对定位，将父级元素设置为相对定位。左边元素设置为 absolute 定位，并且宽度设置为 200px。将右边元素的 margin-left 的值设置为 200px。
利用绝对定位，将父级元素设置为相对定位。左边元素宽度设置为 200px，右边元素设置为绝对定位，左边定位为 200px，其余方向定位为 0。

三栏布局实现
三栏布局一般指的是页面中一共有三栏，左右两栏宽度固定，中间自适应的布局，三栏布局的具体实现：
利用绝对定位，左右两栏设置为绝对定位，中间设置对应方向大小的 margin 的值。
利用 flex 布局，左右两栏设置固定大小，中间一栏设置为 flex:1。
利用浮动，左右两栏设置固定大小，并设置对应方向的浮动。中间一栏设置左右两个方向的 margin 值，注意这种方式，中间一栏必须放到最后。
圣杯布局，利用浮动和负边距来实现。父级元素设置左右的 padding，三列均设置向左浮动，中间一列放在最前面，宽度设置为父级元素的宽度，因此后面两列都被挤到了下一行，通过设置 margin 负值将其移动到上一行，再利用相对定位，定位到两边。
双飞翼布局，双飞翼布局相对于圣杯布局来说，左右位置的保留是通过中间列的 margin 值来实现的，而不是通过父元素的 padding 来实现的。本质上来说，也是通过浮动和外边距负值来实现的。

flex布局
Flex是FlexibleBox的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。行内元素也可以使用Flex布局。注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。
它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis），项目默认沿水平主轴排列。

以下6个属性设置在容器上：

flex-direction属性决定主轴的方向（即项目的排列方向）。
flex-wrap属性定义，如果一条轴线排不下，如何换行。
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
justify-content属性定义了项目在主轴上的对齐方式。
align-items属性定义项目在交叉轴上如何对齐。
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

以下6个属性设置在项目上：

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
flex属性是flex-grow，flex-shrink和flex-basis的简写，默认值为0 1 auto。
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
flex实现一个三色子

      .box {
        width: 200px;
        height: 200px;
        border: 2px solid #ccc;
        border-radius: 10px;
        padding: 20px;
        display: flex;
        justify-content: space-between;
      }
      .item {
        display: block;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #666;
      }
      .item:nth-child(2) {
        align-self: center;
      }
      .item:nth-child(3) {
        align-self: end;
      }
    <div class="box">
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
    </div>

flex:1代表什么？

flex：1是单值语法。当只有一个无单位数值时，表示flex-grow：1。
flex:1 0 auto。
代表增长系数为1，空间不足会缩小，有剩余宽度适合展示项目原有的大小。

定位

水平垂直居中的方式

CSS - 图2

margin : auto

为什么只能实现水平居中不能实现垂直居中？
auto的意思是自动填充剩余空间。
块级元素，即便我们设置了宽度，他还是自己占一行，在css的规范中，元素他的左外边距+左边框宽度+左内边距+内容的宽度+右内边距+右边框+右外边距=包含块的宽度，如果我们给他的左右外边距设置为auto的时候，他会实现平分剩下的距离，从而达到一个水平居中的效果
但是块级元素的高度并不会自动扩充，所以他的外部尺寸是不自动充满父元素的，也没有剩余的空间，因此margin上下设置auto不能实现垂直居中。
当我们给他定位让他上下左右都是0的时候，我们就有了多余空间，auto就能平分剩余的空间去实现水平垂直居中

  width: 200px;
  height: 200px;
  background-color:steelblue;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0; 
  margin:auto;

flex布局

父元素设置了flex布局，只需要给子元素加上margin:auto;就可以实现垂直居中布局

.parent{
    display:flex;
}
.child{
    margin: auto;
}

table布局

组合使用display:table-cell和vertical-align、text-align，使父元素内的所有垂直居中（内部div设置display:inline-block即可）。这在子元素不确定宽高和数量时，非常实用。

#app {
  background: yellow;
  height: 500px;
  width: 500px;
  display: table;
}
.box {
  // 子元素table-cell会自动撑满父元素。
  display: table-cell;
  vertical-align: middle;
  width: 100px;
  height: 100px;
  text-align: center;
  background: red;
}

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；

图文样式

line-height如何继承

写具体数值，如30px，则继承该值
写比例，如2/1.5 ，则继承该比例
写百分比，如200%，则继承计算后的值。 ```typescript

AAA

<a name="fEKP3"></a>
## 单行、多行文本溢出隐藏
- 单行文本溢出
```typescript
overflow: hidden; // 溢出隐藏
text-overflow: ellipsis;  // 溢出用省略号显示
white-space: nowrap; // 规定段落中的文本不进行换行

多行文本溢出
```
overflow:hidden;
text-overflow: ellipsis;
display: -webkit-box; //  作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
-webkit-line-clamp:3; // 显示的行数
```
如何判断一个元素 CSS 样式溢出，从而可以选择性的加 title 或者 Tooltip?
**Element.scrollWidth**这个只读属性是元素内容宽度的一种度量，包括由于overflow溢出而在屏幕上不可见的内容。
**HTMLElement.offsetWidth**是一个只读属性，返回一个元素的布局宽度
```
function isEllipsisActive(e) {
   return (e.offsetWidth < e.scrollWidth);
}
```
画一条0.5px的线
采用transform: scale()的方式，该方法用来定义元素的2D 缩放转换：
```
transform: scale(0.5,0.5);
```
采用meta viewport的方式
```
<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/>
```
这样就能缩放到原来的0.5倍，如果是1px那么就会变成0.5px。viewport只针对于移动端，只在移动端上才能看到效果

设置小于12px的字体
在谷歌下css设置字体大小为12px及以下时，显示都是一样大小，都是默认12px。
解决办法：
使用Webkit的内核的-webkit-text-size-adjust的私有CSS属性来解决，只要加了-webkit-text-size-adjust:none;字体大小就不受限制了。但是chrome更新到27版本之后就不可以用了。所以高版本chrome谷歌浏览器已经不再支持-webkit-text-size-adjust样式，所以要使用时候慎用。
使用css3的transform缩放属性-webkit-transform:scale(0.5); 注意-webkit-transform:scale(0.75);收缩的是整个元素的大小，这时候，如果是内联元素，必须要将内联元素转换成块元素，可以使用display：block/inline-block/…；
使用图片：如果是内容固定不变情况下，使用将小于12px文字内容切出做图片，这样不影响兼容也不影响美观。

实现一个扇形
用CSS实现扇形的思路和三角形基本一致，就是多了一个圆角的样式，实现一个90°的扇形：
```
div{
  border: 100px solid transparent;
  width: 0;
  heigt: 0;
  border-radius: 100px;
  border-top-color: red;
}
```
实现一个宽高自适应的正方形
```
.square {
width: 10%;
height: 10vw; //注意是vw不是vh!
background: tomato;
}
```

利用元素的margin/padding百分比是相对父元素width的性质来实现：

.square {
width: 20%;
height: 0;
padding-top: 20%; // 相对父元素width
background: orange;
}

利用子元素的margin-top的值来实现：

.square {
width: 30%;
overflow: hidden; // 父元素上触发 BFC,防止和子元素的外边距折叠。
background: yellow;
}
.square::after {
content: '';
display: block;
margin-top: 100%; /* margin 百分比相对父元素宽度计算 */
}

响应式

相应式布局的原则就是按比例还原设计稿，视口宽度必去无限接近理想视口。

视口宽度：layout viewport
理想视口：visual viewport

我们把pc端的网页放在移动端屏幕，整个有横向滚动条的就是layout viewport。我们可视区，就是visual viewport

<meta name="viewport" content="width=device-width">

什么是物理像素，逻辑像素和像素密度，为什么在移动端开发时需要用到@3x, @2x 这种图片？

物理像素：组成屏幕的最小单位。
逻辑像素（dpi）：独立像素 css的1px。
设配像素比（dpr）：dpr = 物理像素/ 逻辑像素，越大线看起来越粗

rem相应式布局如何实现
1、原理是根据不同屏幕宽度设置根元素font-size。
工程实践：
- lib-flexible: 根据不同dpr设置不同的缩放比，不同屏幕大小设置不同的根字体大小
- px2rem-loader：把px转成rem

2、rem的弊端：

阶梯性：根据媒体查询不同屏幕的不同尺寸去设置根字体尺寸。
理念问题：屏幕越大（想看更多内容），结果内容没变多，各种元素还变大了。
安卓机的dpr都是1，其它奇怪的dpr会有问题。
不支持iframe
- 网页视口尺寸

CSS - 图3

Veiwport方案

工程实践
postcss-px-to-viewport，大于1px的容器，文本、边距、圆角都可以用。
缺点
1、1px不会被转换。无法解决1px物理尺寸的问题：ostcss-write-svg，设置border-image设置1px的图片
2、px转vw不能整除时，存在像素差

如何解决1px物理尺寸的问题

问题由来
retina 屏的 1px 线会显得比较粗，设计美感欠缺；在视觉设计师眼里的 1px 是指设备像素 1px，而如果我们直接写 css 的大小 1px，那在 dpr = 2 时，则等于 2px 设备像素，dpr = 3 时，等于 3px 设备像素。
解决：
1、媒体查询不同的屏幕dpr进行相应缩放。

/* 2倍屏 */ 
@media only screen and (-webkit-min-device-pixel-ratio: 2.0) { 
  .border-bottom::after {
    -webkit-transform: scaleY(0.5); transform: scaleY(0.5);
  } 
} /* 3倍屏 */ 
@media only screen and (-webkit-min-device-pixel-ratio: 3.0) { 
  .border-bottom::after { 
    -webkit-transform: scaleY(0.33); transform: scaleY(0.33); 
  } 
}

2、

CSS3

transition 和 animation 的区别

transition 是过度属性，强调过度，它的实现需要触发一个事件（比如鼠标移动上去，焦点，点击等）才执行动画。它类似于 flash 的补间动画，设置一个开始关键帧，一个结束关键帧。
animation 是动画属性，它的实现不需要触发事件，设定好时间之后可以自己执行，且可以循环一个动画。它也类似于 flash 的补间动画，但是它可以设置多个关键帧（用@keyframe 定义）完成动画。

CSS3 中有哪些新特性

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

CSS工程化

Sass、Less 是什么？为什么要使用他们？
他们都是 CSS 预处理器，是 CSS 上的一种抽象层。他们是一种特殊的语法/语言编译成 CSS。例如 Less 是一种动态样式语言，将 CSS 赋予了动态语言的特性，如变量，继承，运算，函数，LESS 既可以在客户端上运行 (支持 IE 6+, Webkit, Firefox)，也可以在服务端运行 (借助 Node.js)。
为什么要使用它们？
结构清晰，便于扩展。可以方便地屏蔽浏览器私有语法差异。封装对浏览器语法差异的重复处理，减少无意义的机械劳动。
可以轻松实现多重继承。完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。

PostCss 是如何工作的？我们在什么场景下会使用 PostCss
Sass、less是预处理器。
PostCss，后处理器，是css编译器，和babel类似，原理也是通过改写AST来达到转换。
它可以编译尚未被浏览器广泛支持的先进的 CSS 语法，还可以自动为一些需要额外兼容的语法增加前缀。更强的是，由于 PostCss 有着强大的插件机制，支持各种各样的扩展，极大地强化了 CSS 的能力。

使用场景非常多：
解决全局css问题，比如提供css module支持
使用未全面兼容的css特性，比如autoprefixer
格式化，提高css可读性
图片和文字处理
linters，比如stylelint
不同语法的css支持，比如postcss-html可以解析类html文件中

CSS

link 和@import 的区别

CSS选择器

CSS 选择器及其优先级

css选择器“+”和“~”的区别

伪元素和伪类的区别和作用？

布局

盒模型的理解

盒模型的宽度应该如何计算

BFC的理解和应用？

margin负值问题

Float布局问题

为什么需要清除浮动？清除浮动的方式

使用 clear 属性清除浮动的原理？

如何实现圣杯布局和双飞翼布局

实现两栏布局

三栏布局实现

flex布局

flex实现一个三色子

flex:1代表什么？

定位

水平垂直居中的方式

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

图文样式

line-height如何继承

如何判断一个元素 CSS 样式溢出，从而可以选择性的加 title 或者 Tooltip?

画一条0.5px的线

设置小于12px的字体

实现一个扇形

实现一个宽高自适应的正方形

响应式

什么是物理像素，逻辑像素和像素密度，为什么在移动端开发时需要用到@3x, @2x 这种图片？

rem相应式布局如何实现

Veiwport方案

如何解决1px物理尺寸的问题

CSS3

transition 和 animation 的区别

CSS3 中有哪些新特性

CSS工程化

Sass、Less 是什么？为什么要使用他们？

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