css calc inh

在 CSS3 中，我们可以使用 calc() 函数来进行数学计算，这个函数有很大的用处。有时候我们在设置元素宽高时，需要用到其他元素的大小作为参考，这时候可以使用 calc() 来进行计算。还有一个非常有用的计算单位 inherit，它可以将元素的属性值设置为父元素的属性值。下面我们就来更详细的介绍一下 calc() 和 inherit。

使用 calc()

.Box {
  width: calc(90% - 20px);
  height: calc(100vh - 80px);
}

上面的示例中，.Box 元素的宽度通过计算父元素的宽度减去 20px 来得到，高度通过计算浏览器窗口的高度减去 80px 来得到。使用 calc() 函数可以让我们更加灵活地设置元素的宽高，它能够自动处理单位转换。

使用 inherit

.parent {
  font-size: 16px;
}
.child {
  font-size: inherit;
}

上面的示例中，.child 元素的字体大小设置为了 inherit，这样它的字体大小就会继承父元素的字体大小。我们可以使用 inherit 来将元素的某个属性设置为父元素的值，这可以用于处理一些复杂而多变的布局。