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

使用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没有了。

posted on 2022-08-01 18:38  左直拳  阅读(1)  评论(0)    收藏  举报  来源

导航