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

爱被打了一巴掌 2022-08-30 00:48 185阅读 0赞

# 前端—每天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选择器提升速度，代码的可读性和可维护性带来的收益更大。

发表评论取消回复

表情：

评论列表（有 0 条评论，185人围观）

还没有评论，来说两句吧...

相关阅读

相关每天十道面试题-20200409

每天十道面试题-20200409 题目解答题目一

╰半夏微凉°/ 2023年07月24日 08:39/ 0 赞/ 20 阅读

相关每天十道面试题-20200403

每天十道面试题-20200403 题目解答题目一

本是古典何须时尚/ 2023年07月21日 11:16/ 0 赞/ 18 阅读

相关每天十道面试题-20200328

每天十道面试题-20200328 题目解答题目一

快来打我*/ 2023年07月18日 12:45/ 0 赞/ 20 阅读

相关每天十道面试题-20200326

每天十道面试题-20200326 题目解答题目一

左手的ㄟ右手/ 2023年07月18日 09:22/ 0 赞/ 22 阅读

相关每天十道面试题-20200324

每天十道面试题-20200324 题目解答题目一

- 日理万妓/ 2023年07月18日 06:18/ 0 赞/ 14 阅读

相关前端—每天5道面试题（十二）

前端—每天5道面试题（十二） > 每天进步1% 不多就1% ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_sha

分手后的思念是犯贱/ 2023年01月23日 15:56/ 0 赞/ 26 阅读

相关前端—每天5道面试题（十一）

前端—每天5道面试题（十一） > 每天进步1% 不多就1% ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_sha

阳光穿透心脏的1/2处/ 2023年01月23日 14:57/ 0 赞/ 85 阅读

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

前端—每天5道面试题（十） > 每天进步1% 不多就1% ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow

末蓝、/ 2023年01月23日 11:58/ 0 赞/ 13 阅读

相关前端—每天5道面试题（十四）

前端—每天5道面试题（十四） > 每天进步1% 不多就1% ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_sha

淡淡的烟草味﹌/ 2022年08月30日 01:42/ 0 赞/ 206 阅读

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

前端—每天5道面试题（十三）一、display：none；和visibilty:hidden ;和opacity：0；和overflow：hidden的区别？

爱被打了一巴掌/ 2022年08月30日 00:48/ 0 赞/ 186 阅读