我是一名中學生，正在嘗試 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'> <div>test</div><div>test..........................................................</div></div></div>這段代碼的寬度是： calc(inherit); 做。我不明白為什么他們會給出不同的結果。有人可以解釋一下嗎？
3 回答
呼如林
TA貢獻1798條經驗 獲得超3個贊
如果您檢查 console.log，您會發現 calc 不適用于繼承。
#a1{
width:inherit;
}
#a2{
width: calc (inherit);
}
<div id='a1'>xxx</div>
<div id='a2'>xxx</div>
一只斗牛犬
TA貢獻1784條經驗 獲得超2個贊
calc() 假設使用數學表達式進行計算，例如 -、+、* 或 / 示例
width: calc(100% - 100px);
你沒有任何表達式，所以它可能無效，但也許如果你讓 .header 寬度有一個表達式，那么使用可能有效的繼承
.header{
width: cal(100% - 100px);
}
.header{
width: inherit;
}
這可能有用，但也不確定我不知道 100% - 100px 是否是您正在尋找的確切寬度
- 3 回答
- 0 關注
- 220 瀏覽
添加回答
舉報
0/150
提交
取消