您的位置：首页 > Web前端 > CSS

CSS3中的calc( )属性--可以计算的属性

2017-06-11 09:19 323 查看

语法：

calc() = calc(四则运算)

说明：

（1）calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。

（2）任何长度值都可以使用calc()函数进行计算；

（3）calc()函数支持 “+”, “-“, “*”, “/” 运算；

（4）calc()函数使用标准的数学运算优先级规则；

（5）但需要注意的是 + - 必须用空格隔开;

width: calc(100% -8px);     // 这样会出错,结果为0
width: calc(100% - 8px);    //当 + -  符号用空格隔开时,运算成功

兼容性：

使用

calc()可以使用数学运算中的简单加（+）、减（-）、乘（*）和除（/）来解决问题，而且还可以根据单位如px,em,rem和百分比来转化计算。

比如三局平均分布的布局，中间间距为5像素。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>btn</title>
<style>
*{ margin: 0; padding: 0; }
.box{
width: calc(100%/3 - 5px);
float: left;
margin-right: calc(5px*3 /2);
background: #aaa;
color: #333;
height: 100px;
text-align: center;
line-height: 100px;
}
.box:nth-child(3){
margin-right: 0;
}
</style>
</head>
<body>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</body>
</html>

calc()还是比较用的,比如说想居中一个绝对定位的元素,一般都是left:50%;top:50%;然后再margin-left/margin-top值为-50%;现在.运用calc()也可以实现居中。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>btn</title>
<style>
.box{
width: 100px; height: 100px;
background: #aaa;
position: absolute;
left: calc( 50% - 50px );
top: calc( 50% - 50px );
}
</style>
</head>
<body>
<div class="box
4000
"></div>
</body>
</html>

效果如下：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css3

相关文章推荐

新的分享

章节导航