css3属性：calc()

css3 新属性

在项目开发过程中中&＃xff0c;遇到了一些css3的属性&＃xff0c;比如calc属性&＃xff0c;能实现自适应布局&＃xff0c;还可以进行计算&＃xff0c;在官网和一些文章中进行了解之后&＃xff0c;做如下总结
在做网页的过程中&＃xff0c;我们会遇到有的元素的宽高为100%&＃xff0c;如果自身还有其他的盒模型属性&＃xff08;margin&＃xff0c;padding&＃xff0c;border&＃xff09;&＃xff0c;会导致盒子被撑破&＃xff08;标准模式下&＃xff0c;
怪异模式除外&＃xff09;&＃xff0c;这样的情况下我们需要进行更复杂的计算&＃xff0c;这样的问题&＃xff0c;我们可以通过box-sizing来解决&＃xff0c;但今天的calc()函数在同样可以实现&＃xff0c;并且更加简单。

calc()是什么

clac()是一个函数&＃xff0c;calculate&＃xff08;计算&＃xff09;的缩写&＃xff0c;用于指定元素长度&＃xff0c;calc() 函数用于动态计算长度值。

clac()能干什么

可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值&＃xff0c;比如给一个div,
使用px,rem等计算宽高&＃xff0c;“width:calc(90% - 20px)”。

calc 语法

需要注意的是&＃xff0c;运算符前后都需要保留一个空格&＃xff0c;例如&＃xff1a;width: calc(100% - 10px)&＃xff1b;
任何长度值都可以使用calc()函数进行计算&＃xff1b;
calc()函数支持 “&＃43;”, “-”, “*”, “/” 运算&＃xff1b;
calc()函数使用标准的数学运算优先级规则

demo

1.添加样式

如图&＃xff1a;

2.此时在div2添加padding,border

.div1 {width: 110px;background: pink;height: 100px;border: 3px solid black;}
.div2 {width: 100%;background: yellow;height: 50px;padding-right:30px;border-right:10px;
}


如图&＃xff1a;

此时盒子被撑开
3.运用calc&＃xff08;&＃xff09;

.div1 {width: 110px;background: pink;height: 100px;border: 3px solid black;}
.div2 {width:calc(100% - (30px &＃43; 10px)); //此时才是div2的最终宽度background: yellow;height: 50px;padding-right:30px;border-right:10px;
}


这样获得的宽度才是最终div2的宽度