语法 calc(100% - 20px)：运算符两边必须留空格。它解决了「百分比不知道参照谁」的老问题——宽度百分比相对父元素，而 margin 百分比相对父元素宽度，padding 相对自身宽度，calc 让它们能在同一个表达式里协作。
最典型的用法：侧栏固定 240px、主区占满剩余 calc(100% - 240px)；或按钮宽度 min(100%, 480px) 的流式限幅（min/max/clamp 是 calc 的现代化兄弟）。calc 可以嵌套，也支持 var() 变量参与运算。
<style> .layout { display:flex; gap:12px; } .side { width: 180px; flex:none; background:#e78a3e; color:#fff; padding:10px; border-radius:8px; } .main { width: calc(100% - 180px - 12px); /* 减掉侧栏与间距 */ background:#161b22; color:#e6edf3; padding:10px; border-radius:8px; } .full { margin-top:12px; width: calc(100% - 32px); padding: 8px 16px; } </style> <div class="layout"> <div class="side">侧栏 180px</div> <div class="main">主区 = calc(100% - 180px - 12px)</div> </div> <div class="full" style="background:#4a9eff;color:#fff;border-radius:8px;">再减 padding 的限幅行</div>