题目1：CSS预处理器/后处理器是什么，为什么要使用它们？
答案及解析：
预处理器：如Sass,Less，Stylus,用来预编译sass或者less，增加了css代码的复用性，层级，变量，循环，函数登对编写以及开发UI组件都极为便捷
后处理器：如postCss，通常是在完成的样式表根据css规范处理css，使其更加规范有效，目前最常做的是给css属性添加浏览器私有前缀，实现跨浏览器兼容的问题
css预处理器为CSS增加了一些编程特性，无需考虑浏览器的兼容问题，可以在CSS中使用变量，简单的逻辑程序，函数等在编程语言中的一些基本的性能，让CSS更加的简洁，增加适应性以及可读性，可维护性
使用原因：
- 结构清晰，便于扩展
- 可以很方便的屏蔽浏览器私有语法的差异
- 可以轻松实现多重继承
- 完美的兼容了CSS代码，可以应用到老项目之中
题目2:为什么有时需要用translate来改变位置而不是使用position来进行定位？
答案及解析：
translate是transform属性的一个值，，改变后不影响浏览器的重新布局或重绘，只会影响复用
transform为浏览器创建一个GPU图层，但改变绝对定位会使用到CPU,因此translate更高效，可以缩短平滑动画的绘制时间，但translate改变位置时，元素依旧会占据其原始空间，结对定位不会出现这种情况
题目3：transition和animation的区别
答案及解析：
transform是过渡属性，强调过渡，它的实现需要触发一个事件，它类似于flash的补间动画，设定一个开始关键帧，一个结束关键帧
animation是动画属性，它的实现不需要触发事件，能循环播放，只需要设定一个播放时间，它也类似flash的补间动画，但它可设定多个关键帧
题目4：下面这段代码，class为content的元素，实际高度是100px吗?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<style>
.parent {
display: flex;
flex-direction: column;
height: 600px;
width: 300px;
background: yellow;
}
div {
width: 100%;
}
.header {
height: 200px;
background: red;
}
.content {
height: 100%;
background: blue;
}
.footer {
height: 200px;
background: black;
}
</style>
</head>
<body>
<div class="parent">
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
</div>
</body>
</html>
答案及解析：
不是 content元素的height设置为“100%”,在父级元素的高度为固定值得情况下，直接继承其高度为600%
但父元素的display: flex使得在父元素高度固定的情况下，子元素的高度随着比例进行缩放，所以实际高度为“600*（600/（200+600+200））=360px”
题目5：什么是硬件加速？
答案及解析：
硬件加速就是把浏览器的渲染过程交给GPU进行处理，而不是使用浏览器自带的较慢的渲染器，这样使得transform和animation更加流畅
我们在浏览器中使用css开启硬件加速，使GPU发挥功能，从而提升性能
题目6:CSS动画和JS实现的动画分贝有哪些优缺点？
答案及解析：
CSS动画：
优点：
1.浏览器可以对动画进行优化
2.代码相对简单，性能调优方向相对固定
3.对于帧速表现不好的低版本浏览器，CSS可以做到自然降级，而JS需要额外编撰代码
缺点：
1.运行过程控制很弱，无法附加事件绑定回调函数
2.代码冗长，如果想用CSS实现稍微复杂的动画，CSS代码会变得笨重
JS动画：
优点：
1.控制能力很强，可以在动画播放过程中对动画进行控制：暂停，回放，终止，开始等
2.动画效果比CSS3更丰富，有些动画效果比如曲线运动只能由JS动画完成
CSS3具有兼容性问题，JS大部分情况下没有兼容性问题
缺点：
1.代码比CSS更复杂
2.JS在浏览器的主线程中运行，主线中还有其他需要运行的JS脚本，样式计算，布局，等。对其干扰可能导致线程出现堵塞，从而丢帧
题目7：下面代码中，p标签的背景色是什么？
<style type="text/css">
#parent p { background-color: red; }
div .a.b.c.d.e.f.g.h.i.j.k p{ background-color: green;
</style>
......
<div id="parent">
<div class="a b c d e f g h i j k">
<p>xxxx</p>
</div>
</div>
答案与解析：
red 权重是按优先级进行比较的，而不是相加规则
题目8：第二个子元素的高度是多少？
<div class="container">
<div style="height: 100px"></div>
<div style="min-height: 10px"></div>
</div>
<style>
.container{
display: flex;
}
.container > div {
width: 100px;
}
</style>
答案与解析：
100px
flex会默认：
1.将所有子项变为水平排列
2.默认不自动换行
3.让子项与其内容等宽，并将所有子项的高度变为最高项的高度
题目9：如何从html元素继承box-sizing?
答案与解析：
关于box-sizing:box-sizing详解（文章来自大佬Leeeeeer）
在大多数情况下我们不希望设置元素的border与padding会影响元素的width，height值，这个时候我们就需要设置box-sizing: border-box
html {
box-sizing: border-box;
}
*,*:before,*:after {
box-sizing: inherit;
}
题目10：CSSOM树和DOM树是同时解析的吗？
答案与解析：
浏览器会下下载HTML解析页面生成DOM树，遇到CSS标签就开始解析CSS，这个过程不会阻塞，但是如果遇到了JS脚本，此时假如CSSOM还没有构建完，需要等待CSSOM构建完，再去执行JS脚本，然后再执行DOM解析，此时会阻塞。
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
