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

css使用calc精确设置对象尺寸或位置相关推荐

JavaScript基础 - 21 （精确设置对象属性：value、writable、configurable、enumerable、getter、setter）
对象的每个属性,额外有几个选项: value:默认值 writable:是否可写 configurable:是否可以重新配置 enumerable:是否可遍历 get:getter,读取属性时触发, ...
二、属性操作，文本属性值，元素操作，尺寸、位置操作
1.1. jQuery 属性操作 jQuery 常用属性操作有三种:prop() / attr() / data() ; 1.1.1 元素固有属性值 prop() 所谓元素固有属性就是元素本身自带的属 ...
jQuery第二天学习总结—— jQuery 尺寸、位置操作
jQuery 尺寸.位置操作 jQuery中分别为我们提供了两套快速获取和设置元素尺寸和位置的API,方便易用,内容如下. jQuery 尺寸操作 jQuery 尺寸操作包括元素宽高的获取和设置,且不 ...
html上外边距是,margin-top css设置对象上外边距间距（上外补白）
布局对象与上一个对象盒子间距间隔属性margin-top简称css上边距设置. margin-top与padding-top有相同之处都是设置边距间隔属性,margin-top设置对象上边的外距离,对 ...
【CSS】绝对定位元素设置水平 / 垂直居中 ( 绝对定位元素居中设置 - 先偏移 50% 再回退子元素一半尺寸 | 绝对定位居中设置 )
文章目录一.问题提出二.绝对定位居中设置 1.设置固定尺寸 2.先偏移50%再回退固定值三.绝对定位元素水平 / 垂直居中一.问题提出绝对定位不能通过设置 margin: auto ...
CSS世界-第四章盒尺寸四大家族
盒尺寸的4个盒子:content box,padding box,border box,margin box 一深入理解 content 1.根据可替换性把元素分为替换元素和非替换元素 <im ...
html的font字号1-7,CSS 字体大小font-size设置
CSS font-size字体文字大小样式属性-字体大小样式篇: 本节DIVCSS7为大家介绍通过CSS样式设置文字字体大小知识,涉及CSS样式单词font-size. 一.设置字体大小CSS单词与语 ...
css超出部分省略号设置
css超出部分省略号设置 css超出部分省略号设置给容器添加一个指定类名,然后设置宽度 .overflow{ width:220px; overflow:hidden; white-space: n ...
【入门讲解】Python使用OpenCV设置图片尺寸。
前文前几天看到了"某音特效",人物头像动漫化的效果,感觉这个特效蛮不错的,之前也有找资料学习写了动漫化的人物文章. 接触到了OpenCV,关于人脸识别.人脸检测方面的python ...

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

css使用calc精确设置对象尺寸或位置相关推荐

最新文章

热门文章