calc()的作用
calc()顾名思义,calculate,是一个计算函数,我们可以通过 calc(表达式) 的形式为width/height,padding,margin等属性赋予动态计算的值。
问题回顾
在box-sizing的解析与应用场景一文的问题场景中,我们用border-box属性使得 height/width = content + padding * 2+ border * 2,使得子元素盒子占满父元素内容块,并不发生溢出。
除了使用border-box,我们还可以使用CSS3加入的calc()函数进行规范。
解决方案
我们可以使用calc()对元素的宽高进行手动计算,calc(100% - padding * 2 - border * 2),效果等价于border-box
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">