[分享]css中calc如何运行的

CSS中，calc()是一个十分有用的数学计算方法，它可以帮助我们在CSS中进行简单的四则运算，从而实现更加灵活的页面设计。boxsizing:borderbox; width:calc(50 + 5...

CSS中，calc()是一个十分有用的数学计算方法，它可以帮助我们在CSS中进行简单的四则运算，从而实现更加灵活的页面设计。

box-sizing:border-box;
width:calc(50% + 50px); 

在上面的例子中，我们将宽度设置为50%再加上50像素。这就意味着，无论屏幕大小如何，我们的元素宽度都将是动态的。

Calc在执行过程中采用的是和一般的四则运算一样的优先级，也就是说它会按照先乘除后加减的顺序依次计算出最终的值。

width:calc(100% - 20px * 2);
height:calc(100% - (50px + 20px) * 2); 

在上面的代码示例中，我们第一行将元素的宽度设置为100%减去20像素乘以2，也就是减去40像素的结果。第二行将元素的高度设置为100%减去边框、内边距和内容高度之和的两倍。

需要注意的是，Calc的运算符和数字之间需要空格隔开，这样才能正常运算。

最后需要提醒大家的是，虽然Calc在CSS中非常实用，但是在某些老旧浏览器中可能会存在兼容性问题，因此需要慎重使用。如果有必要，可以通过Modernizr等工具进行判断与适配。