CSS 面试题第二站

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xiao666yan

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值