前端—每天5道面试题（十三）

Posted 2021-08-15 每天都在慢慢进步的王同学

前端—每天5道面试题（十三）

一、display：none；和visibilty:hidden ;和opacity：0；和overflow：hidden的区别？

• display：none；隐藏自己，隐藏后不占据位置

• visibilty:hidden;隐藏位置，隐藏后原位置保留

• opacity：0；隐藏位置，隐藏后位置保留

• overflow：hidden；溢出部分隐藏

二、CSS中，自适应的单位都有哪些？

• 百分比：%
• 相对于视口宽度的单位：vw
• 相对于视口高度的单位：vh
• 相对于视口宽度或者高度（取决于哪个小）的单位： vm
• 相对于父元素字体大小的单位：em
• 相对于根元素字体大小的单位：rem

三、什么是外边距重叠？重叠的结果是什么？

外边距重叠就是 margin- collapse在CSS中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式称为折叠，因此而结合成的外边距称为折叠外边距，折叠结果遵循下列计算规则。

（1）当两个相邻的外边距都是正数时，折叠的结果是它们两者中较大的值

（2）当两个相邻的外边距都是负数时，折叠的结果是两者中绝对值较大的值。

（3）当两个外边距一正一负时，折叠的结果是两者相加的和。

四、访问超链接后 hover样式就不出现的原因是什么？应该如何解决？

因为访问过的超链接样式覆盖了原有的 hover和 active伪类选择器样式，解决方法是将CSS属性的排列顺序改为L→V→H→A（link, visited, hover, active）。

五、在书写高效CSS时有哪些问题需要考虑？

（1）样式，从右向左解析一个选择器

（2）类型选择器的速度，ID选择器最快， Universal（通配符*）最慢。对于常用的4种类型选择器，解析速度由快到慢依次是ID、 class, tag和 universal。

（3）不要用标签限制ID选择器（如：ul#main- navigation{}，ID已经是唯一的，不需要Tag来限制，这样做会让选择器变慢）。

（4）后代选择器最糟糕（换句话说， html body ul li a{}这个选择器是很低效的）。

（5）想清楚你的需求，再去书写选择器。

（6）CSS3选择器（如nth- child）能够漂亮地定位我们想要的元素，又能保证CSS整洁易读。然而，这些神奇的选择器会浪费很多的浏览器资源。

（7）我们知道ID选择器的速度最快，但是如果都用ID选择器，会降低代码的可读性和可维护性等。在大型项目中，相对于使用ID选择器提升速度，代码的可读性和可维护性带来的收益更大。