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

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

每天背5道前端面试题，希望我可以在远方的终点见到你

1、你知道的网页制作会用到的图片格式有哪些？

• png-8，png-24，jpeg，gif，svg。

• 但是上面的那些都不是面试官想要的最后答案。面试官希望听到是Webp。（是否有关注新技术，新鲜事物）科普一下Webp：WebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。在质量相同的情况下，WebP格式图像的体积要比JPEG格式图像小40%

2、CSS都有哪些选择器？
基本选择器：

• 派生选择器（用HTML标签申明）
• id选择器（用DOM的ID申明）
• 类选择器（用一个样式类名申明）
• 属性选择器（用DOM的属性申明，属于CSS2，IE6不支持，不常用，不知道就算了）

除了前3种，还有一些扩展选择器，比如：

• 后代选择器（利用空格间隔，比如div .a{ }）
• 群组选择器（利用逗号间隔，比如p,div,#a{ }）

那么问题来了，CSS选择器的优先级是怎么样定义的？基本原则：

• 一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。

复杂的计算方法：

• 用1表示派生选择器的优先级
• 用10表示类选择器的优先级
• 用100标示ID选择器的优先级
• div.test1 .span var 优先级 1+10 +10 +1
• span#xxx .songs li 优先级1+100 + 10 + 1
• #xxx li 优先级 100 +1

那么问题来了，看下列代码，<p>标签内的文字是什么颜色的？

答案：red。与样式定义在文件中的先后顺序有关，即是后面的覆盖前面的，与在<p class='classB classA'>中的先后关系无关。

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

• 外边距重叠就是margin-collapse。
• 在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。

折叠结果遵循下列计算规则：

• 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
• 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
• 两个外边距一正一负时，折叠结果是两者的相加的和。

4、rgba()和opacity的透明效果有什么不同？

• rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度。

• 而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果）

5、CSS中可以让文字在垂直和水平方向上重叠的两个属性是什么？

• 垂直方向：line-height
• 水平方向：letter-spacing

那么问题来了，关于letter-spacing的妙用知道有哪些么？

• 他可以用于消除inline-block元素间的换行符空格间隙问题。