css3计算的css样式 |css浮动层相对定位

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

上面的代码中，大家可以看到使用了calc()函数来进行计算，并将计算结果作为样式的值。calc()函数可以使用加、减、乘、除等计算符号来进行计算。

除此之外，calc()函数还可以与百分比、长度、用户自定义变量等进行混合使用，让开发者在布局时更加灵活。

.container {
width: calc(100% - var(--padding));
height: calc(50% + 20px);
padding: var(--padding);
}

在上面的代码中，大家使用了用户自定义变量来设置padding的值，让布局更加易于修改、维护。

总的来说，css3中的计算样式为开发者提供了更多的布局方式和思路，让页面的布局更加灵活，适应性更加强大。