为什么 CSS width: calc(inherit) 做的事情与 width:inherit

Question

我是一名中学生，正在尝试 CSS 和 HTML，我注意到 width: calc(inherit) 的作用与 width: inherit 不同。

下面的代码片段是宽度：继承；做。

.header {

    background-color: #77a4ed;

    min-width: 200px;

    width: fit-content;

    border-top-left-radius: 50px;

    border-top-right-radius: 50px;

    height: 30px;

    text-align: center;

    height: 20px;

}

.header > div {

    background-color: whitesmoke;

    border-right: solid 2px black;

    border-left: solid 2px black;

    border-top: solid 2px black;

    min-width: 200px;

    width: inherit;

    text-align: center;

    margin: auto;

    padding-left: 10px;

    padding-right: 10px;

    padding-top: 3px;

    padding-bottom: 3px;

}

.header > div:last-of-type {

    background-color: whitesmoke;

    border-right: solid 2px black;

    border-left: solid 2px black;

    min-width: 200px;

    width: fit-content;

    margin: auto;

    padding-left: 10px;

    border-bottom: solid 2px black;

    border-bottom-left-radius: 10px;

    border-bottom-right-radius: 10px;

}

<div class='container'>

<div class='header'>

&nbsp;

<div>

test

</div>

<div>

test..........................................................

</div>

</div>

</div>

这段代码的宽度是： calc(inherit); 做。

我不明白为什么他们会给出不同的结果。有人可以解释一下吗？

Answer 1

如果您检查 console.log，您会发现 calc 不适用于继承。#a1{width:inherit;}#a2{width: calc (inherit);}<div id='a1'>xxx</div><div id='a2'>xxx</div>

Answer 2

calc() 假设使用数学表达式进行计算，例如 -、+、* 或 / 示例width: calc(100% - 100px);&nbsp;你没有任何表达式，所以它可能无效，但也许如果你让 .header 宽度有一个表达式，那么使用可能有效的继承.header{&nbsp; &nbsp; width: cal(100% - 100px);}.header{&nbsp; &nbsp; width: inherit;}这可能有用，但也不确定我不知道 100% - 100px 是否是您正在寻找的确切宽度

Answer 3

只要使用width: 100%它就会占据父元素的整个宽度。