css使用calc精确设置对象尺寸或位置

Posted 2022-08-08 左直拳

使用calc()可以在页面内比较精确地控制对象的尺寸或位置。

1、控制尺寸

.fd-item 
  width: calc(24vw - 15px);
  。。。

.classify 
  height: calc(45vh);
  。。。

2、定位

.loading 
  position: absolute;
  left: calc(50vw - 25px);
  top: calc(50vh - 25px);

3、vh和vw
这两个东西真好使。

过去想实现类似这样的功能，我印象中要么用具体的像素值，要么用百分比。前者不能自适应；后者不同分辨率下有较大误差。

但说到底，都要浏览器支持才行。以前这个calc()属于CSS3的东西，IE系列好像不支持。现在没有这个问题了。因为IE没有了。