您的位置:首页> 前端教程> CSS3教程
文章导航

CSS calc()

2019-4-13 23:40| 作者: admin| 查看: 407| 评论: 0|来自: 蚂蚁部落

在介绍cal()具体用法之前,先对其进行一个总体介绍。

如果学习过JavaScript等编程语言,它的外观非常像一个函数,功能也非常类似。

不妨认为它就是CSS中的一个函数,函数名称calc是calculate的缩写,翻译成汉语具有"计算"的意思。

使用此函数可以动态的计算元素的一些属性值,比如宽度、高度或者内外边距等。

动态计算的需求在实际布局中非常的多,特别是一些尺寸不固定的应用场景,比如响应式布局。

所以对于calc()函数的掌握是必须的,在应用中也一定会体会到它的便利性,文章底部会有简单的代码演示。

一.函数用法:

此函数可以动态计算出参数表达式的值。

语法结构:

[CSS] 纯文本查看 复制代码
calc(expression)

参数解析:

(1).expression:必需,一个合法的数学表达式,函数会计算并返回此表达式的值。

参数数学表达式的规则如下:

(1).表达式支持加减乘除四则运算。

(2).运算符的两侧需要至少保持一个空格(乘除可以省略,但是建议保留)。

(3).遵循数学的运算符优先级规则。

(4).在表达式中可以使用CSS中尺寸单位,比如px或者em等。

二.浏览器兼容:

(1).IE9+浏览器支持此方法。

(2).edge浏览器支持此方法。

(3).火狐浏览器支持此方法。

(4).谷歌浏览器支持此方法。

(5).Opera浏览器支持此方法。

(6).safria浏览器不支持此方法。

三.代码实例如下:

假设有一个容器元素,宽度不固定,有一个子元素,具有5px的边框与5px的内边距。

想让这个子元素铺满父容器元素,但并不溢出,如果设置子元素的宽度与高度都是100%,肯定会溢出。

那么通过calc()函数可以很轻松计算出子元素正确的尺寸。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style> 
html,body{
  width:100%;
  height:100%;
}
#main {
  width:20%;
  height:20%;
  background-color:#ccc;
}
#main>div {
  border:5px solid blue;
  padding:5px;
  width:calc(100% - 5px*2 - 5px*2);
  height:calc(100% - 5px*2 - 5px*2);
  background-color:green;
}
</style>  
</head>
<body>
  <div id="main">
    <div></div>
  </div>
</body>
</html>

上述代码实现了我们的目的,看谷歌开发者工具截图:

a:3:{s:3:\"pic\";s:43:\"portal/201904/13/234211ip4zffq4059cjzo4.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}a:3:{s:3:\"pic\";s:43:\"portal/201904/13/234214van4upn4gqkcnznc.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

左边的是容器的盒模型截图,右侧是子div的盒模型截图。

由于容器div的尺寸不是固定的,所以很难给子div的尺寸一个固定的值。

也就是说由于容器的尺寸不固定,子元素的尺寸也可能随时变化。

通过calc()函数进行动态计算是一个良好的选择,核心代码如下:

[CSS] 纯文本查看 复制代码
width:calc(100% - 5px*2 - 5px*2);
height:calc(100% - 5px*2 - 5px*2);

对代码注意点说明如下:

(1).遵循数学四则运算优先级规则。

(2).运算表达式中可以带有单位,比如上面的px。

(3).运算符两侧需要带有空格,否则会报错,但是乘除运算可以省略。

1

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (1 人)

上一篇:CSS flex-shrink下一篇:CSS align-content

最新评论

返回顶部