CSS基础

什么是CSS 预处理器 / 后处理器？

预处理器例如：LESS、Sass、Stylus，用来预编译Sass或less，增强了css代码的复用性，还有层级、mixin、变量、循环、函数等，具有很方便的UI组件模块化开发能力，极大的提高工作效率。

后处理器例如：PostCSS，通常被视为在完成的样式表中根据CSS规范处理CSS，让其更有效；目前最常做的是给CSS属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。

---

如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）

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

---

CSS3有哪些新特性？

新增各种CSS选择器 （: not(.input)：所有 class 不是“input”的节点）

圆角 （border-radius:8px）

多列布局 （multi-column layout）

阴影和反射 （Shadow\Reflect）

文字特效 （text-shadow、）

文字渲染 （Text-decoration）

线性渐变 （gradient）

旋转 （transform）

缩放,定位,倾斜,动画,多背景

例如:transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation:

---

position的值relative和absolute定位原点是？

absolute

生成绝对定位的元素，相对于值不为 static的第一个父元素进行定位。

fixed （老IE不支持）

生成绝对定位的元素，相对于浏览器窗口进行定位。

relative

生成相对定位的元素，相对于其正常位置进行定位。

static

默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）。

inherit

规定从父元素继承 position 属性的值

https://github.com/poetries/FE-Interview-Questions/blob/master/Interview-Questions/Front-end-Developer-Questions%5Bquestion-and-answer-version%5D.md

用纯CSS创建一个三角形的原理是什么？

把上、左、右三条边隐藏掉（颜色设为 transparent）

#demo {

  width: 0;

  height: 0;

  border-width: 20px;

  border-style: solid;

  border-color: transparent transparent red transparent;

}

为什么要初始化CSS样式

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异

当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化

最简单的初始化方法： * {padding: 0; margin: 0;} （强烈不建议）

---

想让插入的内容出现在其它内容前，使用::before，否者，使用::after；在代码顺序上，::after生成的内容也比::before生成的内容靠后。

让页面里的字体变清晰，变细用CSS怎么做？

-webkit-font-smoothing: antialiased;

font-style属性可以让它赋值为“oblique” oblique是什么意思？

倾斜的字体样式

---

如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）

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

---

css居中的几种方法：

https://juejin.im/entry/58aaaf03ac502e006972fd75