calc在css中是什么意思

html-css08

calc在css中是什么意思,第1张

英文单词calculate(计算)的缩写,是css3的一个新增的功能,用来指定元素的长度。比如说,你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。为何说是动态值呢?因为我们使用的表达式来得到的值。不过calc()最大的好处就是用在流体布局上,可以通过calc()计算得到元素的宽度。

calc()能做什么?

很多时候跟着书和不系统的视频学习,会发现没有方向,学了很多却不知道自己能够做出什么成绩。

学习要有一个清晰的职业学习规划,学习过程中会遇到很多问题,你可以到我们的web学习交流君羊- 点击此处 ,

同时准备了基础,进阶学习资料。学友都会在里面交流,分享一些学习的方法和需要注意的小细节,每天也会准时讲一些项目实战案例。

数学表达式calc()是CSS中的函数,主要用于数学运算。使用calc()为页面元素布局提供了便利和新的思路。相关视频教程推荐:

定义

数学表达式calc()是calculate计算的缩写,它允许使用+、-、*、/这四种运算符,可以混合使用%、px、em、rem等单位进行计算

兼容性: IE8-、safari5.1-、ios5.1-、android4.3-不支持,android4.4-4.4.4只支持加法和减法。IE9不支持用于backround-position

注意:+和-运算符两边一定要有空白符

实例如下:

应用

数学表达式calc()常用于布局中的不同单位的数字运算

以上就是详细介绍css中的数学表达式calc()的详细内容,

相关链接:

css基础之flex布局

css如何实现边框长度控制功能

关于书籍:需要学习资料的小伙伴们可以加群, 点击此处

calc() 函数属于CSS3版本内容,用于动态计算长度值。例如:width: calc(100% - 10px);需要注意的是,运算符前后都需要保留一个空格。calc()函数支持 "+", "-", "*", "/" 运算;

举例,给一个div动态设置宽度如下:

vh,是指css中相对长度单位,表示相对视口高度(Viewport Height),1vh = 1% * 视口高度。

视口比例长度定义了相对于视口的长度大小,这是文档的可见部分。

通俗点讲,vh就是当前屏幕可见高度的1%,也就是说 height:100vh == height:100%