20210204 104道常见经典CSS面试题笔记53-63)

53 position：fixed在android下无效怎么处理？

因为移动端浏览器默认的viewport叫做layout viewport。在移动端显示时，因为layout viewport的宽度小于移动端屏幕的宽度，所以页面会出现滚动条左右移动，fixed的元素是相对layout viewport来固定位置的，而不是移动端屏幕来固定未知的，所以会出现感觉fixed无效的情况。

如果想实现fixed相对于屏幕的固定效果，需要改变的是viewport的大小为ideal viewport，如下:

<metaname="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimun-scale=1.0,user-scalable=no"/>

54 如果需要手动写动画，最小间隔是多久？

多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60*1000ms=16.7ms

55 如何让去除inline-block元素间间距？

移除空格，使用margin负值，使用

font-size:0,letter-spacing,word-spacing

56 overflow:scroll时不能平滑滚动的问题怎么处理？

以下代码可以解决这种卡顿问题:

-webkit-overflow-scrolling:touch

是因为这行代码启用了硬件加速特性，所以滑动很流畅。

57 有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下高度？

1. 外层div使用position:relative，高度要求自适应的div使用

position:absolute;top:100px;bottom:0;left:0;right:0

2. 使用flex布局，设置主轴为竖轴，第二个div的flex-grow为1.

58 png，jpg，gif这些图片格式化解释以下，分别什么时候用，有没有了解过webp？

1. BMP 是无损的，即支持索引色也支持直接色，点阵图。这种图片格式几乎没有对数据进行压缩，所以BMP格式的图片具有较大的文件大小。
2. GIF 是无损的，采用索引色，点阵图。采用LZW压缩算法进行编码。文件小，是GIF格式的优点，同时，GIF格式还具有支持动画以及透明的优点。但GIF格式仅支持86bit的索引色，所以GIF格式适用于对色彩要求不高同时需要文件体积较小的场景。
3. JPEG 是有损的，采用直接色，点阵图。JPEG的图片优点是采用了直接色，得益于更丰富的色彩，JPEG非常适合用来存储照片，与GIF相比，JPEG不适合用来存钱企业logo，线框类的图，因为有损压缩会导致图片模糊，而直接色的选用，又会导致图片文件较GIF更大。
4. PNG-8 是无损的，使用索引色，点阵图。PNG是一种比较新的图片格式，PNG-8是非常好的GIF格式替代者，在可能的情况下，应该尽可能的使用PNG-8而不是GIF，因为在相同的图片效果下，PNG-8具有更小的文件体积。除此之外，PNG-8还支持透明度的调节，而GIF并不支持，现在，除非需要动画支持，否则没有理由使用GIF而不是PNG-8.
5. PNG24 是无损的，使用直接色，点阵图。PNG24的优点在于，它压缩了图片的数据，使得同样效果的图片，PNG24格式的文件大小要比BMP小得多。当然，PNG24图片还是要比JPEG，GIF，PNG-8大得多。
6. SVG 是无损的，矢量图。这意味着SVG图片由直线和曲线以及绘制它们的方法组成。当你放大一个SVG图片的时候，看到的还是线和曲线，而不会出现像素点。这意味着SVG图片在放大时，不会失真，所以它非常适合用来绘制企业logo，icon等。
7. WebP 是谷歌开发的一种新图片格式，WebP是同时支持有损和无损压缩的，使用直接色时，点阵图。从名字就可以看出来为web而生的。就是说相同质量的图片，webp具有更小的文件体积。现在网站上充满了大量的图片，如果能够降低每一个图片的文件大小，那么将大大减少浏览器和服务器之间的数据传输量，今儿降低访问延迟，提升访问体验。

在无损压缩情况下，相同质量的webp图片，文件大小要比PNG小26%；
在有损压缩的情况下，具有相同图片精度的webp图片，文件大小要比JPEG小25%-34%；
webp图片格式支持图片透明度，一个有损压缩的webp图片，如果要支持透明度只需要22%的文件大小。

目前只有chrome浏览器和opera浏览器支持webp格式，兼容性不太好。

59 浏览器如何判断是否支持webp格式图片？

1. 宽高判断法，通过创建image对象，将其src属性设置为webp格式的图片，然后在onload事件中获取图片的宽高，如果能够获取，则说明浏览器支持webp格式图片，如果不能获取或者触发了onerror函数，那么说明浏览器不支持webp格式的图片。
2. canvas判断方法，可以动态创建一个canvas对象，通过canvas的toDataURL将设置为webp格式，然后判断返回值是否还有iamge/webp字段，如果包含则说明支持webp，反之不支持。

60 什么是Cookie隔离？

网站向服务器请求的适合，会自动带上cookie这样增加表头信息量，使请求变慢。

如果静态文件都放在主域名下，那静态文件请求的适合都带有cookie的数据是提交给serve的，非常浪费流量，所以不如隔离开，静态资源放CDN。

因为cookie有域的限制，因此不能跨域提交请求，故使用非主要域名的时候，请求头中就不会带有cookie数据，这样可以降低请求头的大小，降低请求时间，从而达到降低整体请求延时的目的。

同时这种方式不会将cookie传入webServer，也减少了webServer对cookie的处理分析环节，提高了webServer的http请求的解析速度。

61 style标签写在body后与body前的区别？

页面加载自上而下当然是先加载样式。写在body标签后由于浏览器以逐行方式对html文档进行解析，当解析到写在尾部的样式表会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在windows的iE下可能会出现FOUC现象（即样式失效导致页面闪烁）

62 什么是CSS预处理器/后处理器？

css预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为css增加了一些编程的特性，将css作为目标生成文件，然后开发者就只要用这种语言进行编码工作。通俗的说，css预处理用一种专门的编程语言，进行web页面样式设计，然后再编译成正常的css文件。

预处理器例如：less，sass，stylus，用来预编译sass或less，csssprite，增强了css代码的复用性，还有层级，mixin，变量循环，函数等，具有很方便的ui组件模块开发能力，极大的提高工作效率。

css后处理器对css进行处理，并最终生成css预处理器，它属于广义上的css预处理器。最典型的例子是css压缩工具。

后处理器例如:postCss，通常被视为在完成的样式表中根据css规范处理css，让其更有效，目前最常做的是给css属性添加浏览器私有前缀，实现夸浏览器兼容性的问题。

63 CSSSprites？

将一个页面涉及到的所有图片都包含到一张大图中去，然后利用css的background-image，background-repeat，background-position的组合进行背景定位。利用CSSSprites能很好地减少网页的http请求，从而很好的提高页面性能。CSSSprites能减少图片的字节。

优点:
减少http请求，极大提高页面加载速度
增加图片信息重复度，提高压缩比，减少图片大小
更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现

缺点
图片合并麻烦
维护麻烦 修改一个图片可能需要重新布局整个图片样式