前端—每天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
那么问题来了，看下列代码，
标签内的文字是什么颜色的？
答案：red。与样式定义在文件中的先后顺序有关，即是后面的覆盖前面的，与在
中的先后关系无关。
3、什么是外边距重叠？重叠的结果是什么？
- 外边距重叠就是margin-collapse。
- 在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。
折叠结果遵循下列计算规则：
- 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
- 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
- 两个外边距一正一负时，折叠结果是两者的相加的和。
4、rgba()和opacity的透明效果有什么不同？
- rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度。
- 而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果）
5、CSS中可以让文字在垂直和水平方向上重叠的两个属性是什么？
- 垂直方向：line-height
- 水平方向：letter-spacing
那么问题来了，关于letter-spacing的妙用知道有哪些么？
- 他可以用于消除inline-block元素间的换行符空格间隙问题。
