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

CSS3的calc()使用，css里不同单位相加你信不信？

2015-12-10 13:48 966 查看
什么是 calc()

简单通俗的将，就是能把不同单位的属性执行四则运算，产出结果。

举一个简单的例子

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.out {
width: 500px;
height: 300px;
border: 1px solid #ccc;
}
.in {
background: red;
/*width: calc(100% - 25px);*/
width: 100%;
margin-left: 25px;
}

</style>
</head>
<body>
<div class="out">
<div class="in">
**calc()**从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度。比如说，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。为何说是动态值呢?因为我们使用的表达式来得到的值。不过calc()最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度。 text....blablabla..... text....blablabla..... text....blablabla..... text....blablabla..... text....blablabla..... text....blablabla..... text....blablabla..... text....blablabla.....
</div>
</div>
</body>
</html>

展示效果如下图



因为我们内部div的宽度为100%，然后又设置了margin-left，所以内部超出了外面的div,有时候我们不想要这种效果，我们继续测试下面的代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.out {
width: 500px;
height: 300px;
border: 1px solid #ccc;
}
.in {
background: red;
width: calc(100% - 25px);
margin-left: 25px;
}

</style>
</head>
<body>
<div class="out">
<div class="in">
calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度。比如说，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。为何说是动态值呢?因为我们使用的表达式来得到的值。不过calc()最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度。 text....blablabla..... text....blablabla..... text....blablabla..... text....blablabla..... text....blablabla..... text....blablabla..... text....blablabla..... text....blablabla.....
</div>
</div>
</body>
</html>

如下图



这样我们就达成了预期效果。

最后来看看兼容性



2015-12-10 edire 发表于极客学院
http://qun.jikexueyuan.com/web/topic/224
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css calc
相关文章推荐
新的分享
章节导航