CSS技巧笔记

以前总觉得往后的人生一眼望不到头，一切皆有可能，但是现在却隐隐感觉能看到了……

图片的自适应问题

在写 banner 图时，发现一个问题，轮播图中使用的图片大小不同，会出现撑起的容器高度不一致，没法对其的情况，如果简单地采用明确的宽高(px 单位)，又无法自适应多种设备。

在网上找到了合适的教程，原理是使用 vw 解决，现简单的总结下：

1. 理解 vw 单位，即将视窗宽度分为 100 份，每份即为 1vw；
2. width 正常设置为 100%，然后设置height: 需要图片的高度 / 设备宽度 * 100，例如我需要的正常图片高度为 624px，设备宽度为 768px，那么height: 624 / 750 * 100，即可得到需要的高度；
3. 接下来使用到object-fit: cover，关于 object-fit，可以参考MDN；

参考地址

width 与 left 间的平衡

先抛出代码：

.div-class {
  width: calc(100% - 20vw);
  left: 10vw;
  right: 10vw;
}
.div-class {
  width: 5vw;
  left: calc(50% - 2.5vw);
}

容器实际宽度，为width的属性值再加上left的属性值，也就是说，当如果设置width: 100%; left: 10px时，实际容器的宽度为100% + 10px，故如果我们想让容器的实际宽度为 100%，则需要对width属性进行修正，使用到calc()函数，即width: calc(100% - 10px);。同理，反之则需要对left属性进行修正。