题目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解析,此时会阻塞。