css calc属性

CSS calc属性是用于计算CSS样式中的值的函数。它可以让开发者在CSS中进行数学计算，解决了许多布局方案的困难问题。

p {
  width: calc(100% - 50px);
  height: calc(50% + 20px);
}

上面的代码展示了使用calc函数来计算元素的宽度和高度。它使用了减法和加法，其中100%表示元素的父元素宽度，50px表示减去的像素值，50%表示元素的父元素高度，20px表示加上的像素值。

除了加减法以外，calc函数还支持乘法和除法运算，可以在其中使用长度单位和百分比。

p {
  width: calc(50% - 20px * 2);
  height: calc(100% / 3);
}

上面的代码展示了使用乘法和除法运算符，其中20px是像素单位。

在使用calc函数时，需要注意使用空格分隔运算符，否则会出现语法错误。例如calc(100%-50px)就是错误的写法，应该写成calc(100% - 50px)。

另外，由于calc函数是CSS3的新特性，较老的浏览器可能不支持它。因此，在使用calc函数时，需要进行浏览器兼容性的检查。

总的来说，calc函数为CSS开发者提供了一种更加便捷的进行样式计算的方式，帮助我们更好地控制布局、尺寸和位置等方面的设计。