前端—每天5道面试题(十三)

简介: 前端—每天5道面试题(十三)

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


相关文章
|
5月前
|
缓存 前端开发 中间件
[go 面试] 前端请求到后端API的中间件流程解析
[go 面试] 前端请求到后端API的中间件流程解析
|
2月前
|
缓存 前端开发 JavaScript
"面试通关秘籍:深度解析浏览器面试必考问题,从重绘回流到事件委托,让你一举拿下前端 Offer!"
【10月更文挑战第23天】在前端开发面试中,浏览器相关知识是必考内容。本文总结了四个常见问题:浏览器渲染机制、重绘与回流、性能优化及事件委托。通过具体示例和对比分析,帮助求职者更好地理解和准备面试。掌握这些知识点,有助于提升面试表现和实际工作能力。
67 1
|
4月前
|
Web App开发 前端开发 Linux
「offer来了」浅谈前端面试中开发环境常考知识点
该文章归纳了前端开发环境中常见的面试知识点,特别是围绕Git的使用进行了详细介绍,包括Git的基本概念、常用命令以及在团队协作中的最佳实践,同时还涉及了Chrome调试工具和Linux命令行的基础操作。
「offer来了」浅谈前端面试中开发环境常考知识点
|
5月前
|
存储 XML 移动开发
前端大厂面试真题
前端大厂面试真题
|
3月前
|
Web App开发 JavaScript 前端开发
前端Node.js面试题
前端Node.js面试题
|
5月前
|
存储 前端开发 JavaScript
44 个 React 前端面试问题
【8月更文挑战第18天】
62 2
|
5月前
|
存储 JavaScript 前端开发
2022年前端js面试题
2022年前端js面试题
48 0
|
5月前
|
存储 前端开发 JavaScript
44 个 React 前端面试问题
44 个 React 前端面试问题
|
5月前
|
存储 JavaScript 前端开发
|
5月前
|
Web App开发 存储 缓存