码迷,mamicode.com
首页 > Web开发 > 详细

CSS3 calc() 会计算的属性

时间:2017-06-07 14:22:06      阅读:185      评论:0      收藏:0      [点我收藏+]

标签:box   padding   pad   color   技术   布局   英文   rem   pre   

原文链接:http://caibaojian.com/calc.html

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

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

怎么使用

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

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

技术分享

//code from http://caibaojian.com/calc.html
*{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>

演示

浏览器兼容性

技术分享


来源:前端开发博客

CSS3 calc() 会计算的属性

标签:box   padding   pad   color   技术   布局   英文   rem   pre   

原文地址:http://www.cnblogs.com/camile/p/6956322.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!