CSS3 calc() 会计算的属性

最新推荐文章于 2025-09-06 09:26:50 发布

weixin_34392435

最新推荐文章于 2025-09-06 09:26:50 发布

阅读量80

点赞数

CC 4.0 BY-SA版权

文章标签： python

原文链接：https://my.oschina.net/shuaihong/blog/1618181

本文详细介绍了CSS3中新增的calc()功能，该功能允许开发者为元素的多个属性设置动态值，例如边框、内边距、字体大小、宽度和高度等。通过使用简单的数学运算符和单位（如px、em、rem及百分比），calc()能够实现灵活的布局调整。文章还提供了一个三栏布局的例子，并讨论了与box-sizing属性的兼容性问题。

2019独角兽企业重金招聘Python工程师标准>>>

可用的属性：

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

以前我们可以使用box-sizing:border-box;来设置盒子的属性为不加上边距。现在我们又多了一个选择了。但要注意，两者只能使用一个哦，否则就会造成冲突了。

怎么使用

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

示例：

比如三局平均分布的布局，中间间距为5像素。输入图片说明

布局使用

<style>
*{margin: 0; padding: 0;}
.col-3{width: calc(100%/3 - 5px); float: left; margin-right: calc(5px*3 /2); background: #eee; color: #333; height: 100px; text-align: center; margin-bottom: calc(5px*3 /2); font-size: 18px; line-height: 100px;}
.col-3:nth-child(3){margin-right: 0;}
</style>