众所周知,CSS有一个特殊的calc()函数,用于做基本的数学运算。
demo:
让我们来详细的学习一下这个功能吧:
calc()函数只能在值中使用。
demo:
也可以在部分属性的内部作为单独的值使用.
demo:
它甚至可以成为构成属性一部分的另一个功能的一部分!例如,这里的calc() 用于渐变的色标中.
demo:
calc() 可以将不同的单位混合在一起 .
demo:(在sass中)
例如:假设我们需要写定一个父盒子的7分之一的宽度的盒子;
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如何实现边框长度控制功能
关于书籍:需要学习资料的小伙伴们可以加群, 点击此处