Open tomoya06 opened 3 years ago
Google主导的一种同时提供了有损压缩与无损压缩的图片文件格式,文件体积相比PNG和JPG有大幅减小。根据Google的测试,无损压缩后的WebP比PNG文件少了26%的体积,有损压缩后的WebP图片相比于等效质量指标的JPEG图片减少了25%~34%的体积。
传闻只有PC端+Android端的Chrome对WEBP支持较好。但截至2020-09-29,各浏览器对webp格式图片的支持率总体已经达到80%左右了(大人时代变了!)
在线上使用时,还是要考虑少数浏览器的不兼容。基本思想是在浏览器不支持WEBP格式时,换用PNG/JPG等格式的图片。
使用<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>
参考CSS TRICKS提供的方法,Modernizr提供了判断浏览器兼容性的封装方法,据此可以设置不同的background-image
。
.no-webp .elementWithBackgroundImage {
background-image: url("image.jpg");
}
.webp .elementWithBackgroundImage{
background-image: url("image.webp");
}
CSS 弹性盒子布局是 CSS 的模块之一,定义了一种针对用户界面设计而优化的 CSS 盒子模型。在弹性布局模型中,弹性容器的子元素可以在任何方向上排布,也可以“弹性伸缩”其尺寸,既可以增加尺寸以填满未使用的空间,也可以收缩尺寸以避免父元素溢出。子元素的水平对齐和垂直对齐都能很方便的进行操控。通过嵌套这些框(水平框在垂直框内,或垂直框在水平框内)可以在两个维度上构建布局。
具体用法看MDN文档或者阮一峰的图文并茂教学吧。
column / column-reverse / row(默认) / row-reverse
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元素。