css3 calc()的用法

转载自：css3 calc()的用法

 

说明：calc（四则运算）；任何长度值都可以使用calc()函数进行计算；和平时的加减乘除优先顺序一样一样的；

特别注意：calc（）里面的运算符必须前后都留一个空格，不然浏览器识别不了，比如：calc(100% - 5px);

兼容性：

HTML:

<div class="out">
　　　　<div class="in">in</div> </div>

CSS：

.out{
　　　　width: 200px;
　　　　height: 200px; 　　　　background: red; 　　　　padding: 10px; 　　　　margin: 40px auto; 　　} .in{ 　　　　width: 100%; 　　　　height: 100%; 　　　　background: skyblue; 　　　　padding: 20px 10% 12% 30px; 　　}

结果：

这个时候out被撑破了怎么办呢，padding百分比不好计算啊。。。css3的calc()属性就帮了大忙了。

重新设置in的css属性：

.in{
　　width: calc(100% - 30px - 10%);
　　width: -webkit-calc(100% - 30px - 10%); 　　width: -moz-calc(100% - 30px - 10%); 　　height: calc(100% - 20px - 12%); 　　height: -webkit-calc(100% - 20px - 12%); 　　height: -moz-calc(100% - 20px - 12%); 　　background: skyblue; 　　padding: 20px 10% 12% 30px; }

 结果：

 

转载于:https://www.cnblogs.com/jeacy/p/9808485.html