tomoya06
commented
3 years ago WEBP
简述
Google主导的一种同时提供了有损压缩与无损压缩的图片文件格式，文件体积相比PNG和JPG有大幅减小。根据Google的测试，无损压缩后的WebP比PNG文件少了26％的体积，有损压缩后的WebP图片相比于等效质量指标的JPEG图片减少了25％~34%的体积。
兼容性
传闻只有PC端+Android端的Chrome对WEBP支持较好。但截至2020-09-29，各浏览器对webp格式图片的支持率总体已经达到80%左右了（大人时代变了！）
实践
在线上使用时，还是要考虑少数浏览器的不兼容。基本思想是在浏览器不支持WEBP格式时，换用PNG/JPG等格式的图片。
1. 纯HTML实现
使用<picture> + <source> / <img>标签，一个picture中可包含多个image source，由浏览器根据设定的属性或支持程度来选用要展示的图片。
完整文档参考MDN，最简实现参考codesandbox
<picture>
<source srcset="https://dy-pic0.iqiyipic.com/image/20200709/18/vm/a3959f0d9e394a1c8b1e3b15610676c0.webp" type="image/webp" />
<img src="https://dy-pic0.iqiyipic.com/image/20200709/16/wp/3e6d1acd4343402a83e2ededbe757fb3.png" />
</picture>2. 借助js判断
参考CSS TRICKS提供的方法，Modernizr提供了判断浏览器兼容性的封装方法，据此可以设置不同的background-image。
.no-webp .elementWithBackgroundImage {
background-image: url("image.jpg");
}
.webp .elementWithBackgroundImage{
background-image: url("image.webp");
}
CSS
盒子模型
当对一个文档进行布局的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型，将所有元素表示为一个个矩形的盒子。每个盒子包括：边距，边框，填充，和实际内容。
box-sizing
盒模型分为 IE盒模型 和 W3C标准盒模型。
通过设置CSS的
box-sizing属性，可以定义使用哪个盒模型。默认值为content-box，即标准盒模型；设为border-box则用的是IE盒模型。下图【图片来源】，在设置width相等的情况下，上方为标准盒模型，下方为IE盒模型。BFC
在讲 BFC 之前，我们先来了解一下常见的定位方案，定位方案是控制元素的布局，有三种常见方案:
BFC 即 Block Formatting Contexts (块级格式化上下文)，它属于上述定位方案的普通流。具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。
能触发BFC的属性：
BFC的特性：
CSS布局以及尝试
水平、垂直居中
方案介绍参考前端工匠博客 代码实现对比参考CodeSandbox
瀑布流
实现参考自己代码。原理是根据页面宽度居中放置N条纵列容器，每次往最短的容器添加一个item元素。