CSS面试题汇总（三）

参考答案：浏览器的默认行为是把 inline 元素间的空白字符（空格换行 tab）渲染成一个空格，也就是我们上面的代码<li>换行后会产生换行字符，而它会变成一个空格，当然空格就占用一个字符的宽度。

解决方案：

方法一：既然是因为 <li> 换行导致的，那就可以将 <li> 代码全部写在一排，如下

li标签空白测试

• 方法二：我们为了代码美观以及方便修改，很多时候我们不可能将 <li> 全部写在一排，那怎么办？既然是空格占一个字符的宽度，那我们索性就将 <ul> 内的字符尺寸直接设为 0，将下面样式放入样式表，问题解决。

  .wrap ul {

  font-size: 0px;

  }

  但随着而来的就是 <ul> 中的其他文字就不见了，因为其尺寸被设为 0px 了，我们只好将他们重新设定字符尺寸。

  方法三：本来以为方法二能够完全解决问题，但经测试，将 li 父级标签字符设置为 0 在 Safari 浏览器依然出现间隔空白；既然设置字符大小为 0 不行，那咱就将间隔消除了，将下面代码替换方法二的代码，目前测试完美解决。同样随来而来的问题是 li 内的字符间隔也被设置了，我们需要将 li 内的字符间隔设为默认。

  .wrap ul {

  letter-spacing: -5px;

  }

  之后记得设置 li 内字符间隔

  .wrap ul li {

  letter-spacing: normal;

  }

  22. 设置元素浮动后，该元素的 display 值是多少？

  参考答案：

  自动变成 display:block

  23. 怎么让 Chrome 支持小于 12px 的文字？

  参考答案：

  css3 的 transform 属性，设置值为 scale(x, y) 定义 2D 缩放转换

  示例：

  -webkit-transform: scale(0. 50);

  24. display:inline-block 什么时候会显示间隙？

  参考答案：

  间隙产生的原因是因为，换行或空格会占据一定的位置

  推荐解决方法：

  父元素中设置

  font-size:0; letter-spaceing:-4px;

  25.png、jpg、gif 这些图片格式解释一下，分别什么时候用？，webp 呢

  参考答案：

  gif 图形交换格式，索引颜色格式，颜色少的情况下，产生的文件极小，支持背景透明，动画，图形渐进，无损压缩（适合线条，图标等），缺点只有 256 种颜色

  jpg 支持上百万种颜色，有损压缩，压缩比可达 180：1，而且质量受损不明显，不支持图形渐进与背景透明，不支持动画

  png 为替代 gif 产生的，位图文件，支持透明，半透明，不透明。不支持动画，无损图像格式。Png8 简单说是静态 gif，也只有 256 色，png24 不透明，但不止 256 色。

  webp 谷歌开发的旨在加快图片加载速度的图片格式，图片压缩体积是 jpeg 的 2/3，有损压缩。高版本的 W3C 浏览器才支持，google39+，safari7+

  26. style 标签写在 body 后与 body 前有什么区别？

  参考答案：

  从上向下加载，加载顺序不同

  27. 超链接访问过后 hover 样式就不出现的问题是什么？如何解决？

  参考答案：

  被点击访问过的超链接样式不在具有 hover 和 active 了, 解决方法是改变 CSS 属性的排列顺序: L-V-H-A（link, visited, hover, active）

  28. 什么是 Css Hack？ie6, 7, 8 的 hack 分别是什么？

  参考答案：

  针对不同的浏览器写不同的 CSS code 的过程，就是 CSS hack。

  示例如下：

  #test {

  width: 300px;

  height: 300px;

  background-color: blue;/firefox/ background-color: red\9;/all ie/ background-color: yellow;/ie8/+background-color: pink;/ie7/ _background-color: orange;/ie6/

  }

  :root #test {

  自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

  深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

  因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
  
  
  
  
  
  

  既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

  由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新

  如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）
  

  数据结构与算法

  这一块在笔试、面试的代码题中考核较多，其中常考的数据结构主要有：数组、链表、队列、栈、Set、Map、哈希表等，不同数据结构有不同的方法以及储存原理，这些算是技术岗的必备知识。算法部分主要分为两大块，排序算法与一些其他算法题。

  排序算法根据考频高低主要有：快速排序、归并排序、堆排序、冒泡排序、插入排序、选择排序、希尔排序、桶排序、基数排序、Timsort这十种，这类考核点要么是算法的时间、空间复杂度、稳定度，要么是直接手写代码，故在理解算法原理的同时，对JS语言版的排序算法代码也要加强记忆。

  • 二叉树层序遍历
  • B 树的特性，B 树和 B+树的区别
  • 尾递归
  • 如何写一个大数阶乘？递归的方法会出现什么问题？
  • 把多维数组变成一维数组的方法
  • 知道的排序算法 说一下冒泡快排的原理
  • Heap 排序方法的原理？复杂度？
  • 几种常见的排序算法，手写
  • 数组的去重，尽可能写出多个方法
  • 如果有一个大的数组，都是整型，怎么找出最大的前 10 个数
  • 知道数据结构里面的常见的数据结构
  • 找出数组中第 k 大的数组出现多少次，比如数组【1，2， 4，4，3，5】第二大的数字是 4，出现两次，所以返回 2
  • 合并两个有序数组
  • 给一个数，去一个已经排好序的数组中寻找这个数的位 置（通过快速查找，二分查找）

  

  一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
  

  组【1，2， 4，4，3，5】第二大的数字是 4，出现两次，所以返回 2

  • 合并两个有序数组
  • 给一个数，去一个已经排好序的数组中寻找这个数的位 置（通过快速查找，二分查找）

  [外链图片转存中…(img-QbbicJzc-1712824358009)]

  一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
  [外链图片转存中…(img-XCD9qsvi-1712824358010)]