CSS3 新属性 cacl | 用法解析

这是一个会计算的属性，特别适合对于自适应还不是很熟练的童鞋！

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

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

calc()可以使用数学运算中的简单加（+）、减（-）、乘（*）和除（/）来解决问题，而且还可以根据单位如px,em,rem和百分比来转化计算，但是要注意，使用运算符号的时候要与两边的值有空格和间隙，否则不识别，会报错！

注意，加上或者减去的值是该元素的border padding margin ！

============================开始代码============================

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>.demo{width: 300px;background:#60f;padding: 3px 0;}.box{background:#f60;height: 50px;padding:10px;border: 5px solid green;/*第一种写法*//*width: 100%;*//*box-sizing: border-box;*//*第二种写法*/width: 90%;/*写给不支持calc()的浏览器*/width: -moz-calc(100% - (10px + 5px ) * 2);width: -webkit-calc(100% - (10px + 5px) * 2);width: calc(100% - (10px + 5px) * 2);}</style></head><body><div ><div ></div></div></body></html>

1>当使用第一种方法不加 box-sizing 属性时

这是效果图，可以看到会有溢出撑开的情况

2>当使用第一种方法加 box-sizing 属性时

这是效果图，可以看到不会被撑开但是高度会变化

3>当使用第二种方法时

Duang！Duang！Duang！是不是很完美？与自己想要的结果完美一致

免责声明：本网信息来自于互联网，目的在于传递更多信息，并不代表本网赞同其观点。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，并请自行核实相关内容。本站不承担此类作品侵权行为的直接责任及连带责任。如若本网有任何内容侵犯您的权益，请及时联系我们，本站将会在24小时内处理完毕。