【CSS笔记】— 使用calc()计算宽高(vm/vh)

栏目: CSS · 发布时间: 5年前

内容简介:简单来说就是CSS3中新增的一个函数,calculate(计算)的缩写。用于动态计算宽/高,你可以使用calc()给元素的各个属性设置值【margin、border、padding、font-size】等,calc的语法就是简单的四则运算,主要用于计算不确定值,例如一个外边距为10px,宽度为100%的元素,这种情况我们怎么设置呢?如果设置了

简单来说就是CSS3中新增的一个函数,calculate(计算)的缩写。用于动态计算宽/高,你可以使用calc()给元素的各个属性设置值【margin、border、padding、font-size】等,

calc()语法

calc的语法就是简单的四则运算,

  1. 使用“+”、“-”、“*” 和 “/”四则运算;
  2. 可以使用百分比、px、em、rem等单位;
  3. 可以混合使用各种单位进行计算;
  4. 表达式中有“+”和“-”时,其前后必须要有空格,如"widht: calc(12%+5em)"这种没有空格的写法是错误的;
  5. 表达式中有“*”和“/”时,其前后可以没有空格,但建议留有空格。

calc()的用途

主要用于计算不确定值,例如一个外边距为10px,宽度为100%的元素,这种情况我们怎么设置呢?如果设置了

width: 100%;
margin: 10px;
复制代码

你可以看出这个box已经溢出了,那么怎么解决呢?就可以用calc函数了。

width: 800px;
width: calc(100% - (10 *2)px);
margin: 10px;
复制代码

vw和vh是什么?

vm、vh、vmin、vmax是一种视窗单位,也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗(Viewport)大小来决定的,单位 1,代表类似于 1%。 视窗(Viewport)是你的浏览器实际显示内容的区域—,换句话说是你的不包括 工具 栏和按钮的网页浏览器。

具体描述如下:

  1. vw:视窗宽度的百分比(1vw 代表视窗的宽度为 1%)
  2. vh:视窗高度的百分比
  3. vmin:取当前Vw和Vh中较小的那一个值
  4. vmax:取当前Vw和Vh中较大的那一个值

vw、vh 与 % 百分比的区别

(1)% 是相对于父元素的大小设定的比率,vw、vh 是视窗大小决定的。 (2)vw、vh 优势在于能够直接获取高度,而用 % 在没有设置 body 高度的情况下,是无法正确获得可视区域的高度的,所以这是挺不错的优势。

calc和vh/vm结合使用

上面我们使用%结合calc使用可以实现想要的效果,为什么要引入vm和vh呢?上面说%和vm,vh的区别中,% 在没有设置 body 高度的情况下,是无法正确获得可视区域的高度的。

calc + vm 计算宽度

width: 800px; /* fallback for b*/
width: -moz-calc(100vm - (2 * 10)px);
width: -webkit-calc(100vm -(2 * 10)px);
width: calc(100vm - (2 * 10)px);
复制代码

calc + vh 计算高度

height: 800px;
height: -moz-calc(100vh - (2 * 10)px);
height: -webkit-calc(100vh - (2 * 10)px);
height: calc(100vh - (2 * 10)px);
复制代码

以上所述就是小编给大家介绍的《【CSS笔记】— 使用calc()计算宽高(vm/vh)》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

概率论基础教程

概率论基础教程

罗斯 / 赵选民 / 机械工业出版社 / 2006-4 / 42.00元

本书是一本概率论的入门教材,系统介绍了概率论的基础理论及应用,在取材、结构和写作方法等方面具有鲜明的特点。通过例题阐述概率论的基本概念与方法是本书的一大特色。作者独具匠心地选择和编排了大量例题与习题,这些内容约占全书的三分之二。通过这些例题和习题,读者可以了解概率论在各个领域的广泛应用,如基因、彩票、法庭判决、NBA选秀等。   本书系统介绍了概率论的基础理论及应用,主要内容包括组合......一起来看看 《概率论基础教程》 这本书的介绍吧!

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试