CSS calc写错，布局错位！

博客主页瑕疵的CSDN主页 Gitee主页瑕疵的gitee主页⏩ 文章专栏《热点资讯》CSS calc写错布局错位目录昨晚改个响应式菜单页面直接裂开。导航栏挤成一坨右边空出半屏。控制台干净得像新装的没报一行错。一查代码发现是calc写成了纯数字浏览器懵了。问题现场/* 错误20没单位 */.nav{width:calc(100%-20);/* 以为减20像素实际减20% */}结果宽度算成100% - 20% 80%导航栏缩成80%挤在左边。右边留白一大片。核心根源calc函数里所有数值必须带单位。100%有单位 → 正确20没单位 → 浏览器当百分比算20%真想减20像素得写20px。浏览器把20当20%处理直接算崩。解决代码错误写法崩了/* 错误20没单位算成20% */.nav{width:calc(100%-20);/* 实际宽度80%布局全乱 */}正确写法修好/* 正确加px单位减20像素 */.nav{width:calc(100%-20px);/* 实际宽度100% - 20px正常 */}注释对比错误calc(100% - 20)→ 浏览器解析为100% - 20%→ 80%正确calc(100% - 20px)→100% - 20px→ 精确减像素避坑总结单位是命calc里数字必须带单位px/rem/em纯数字百分比陷阱。devtools救命写完按F12→Elements→Styles看calc实际算出的值。错误时显示width: calc(80%)正确时显示width: calc(100% - 20px)别信直觉以为“20就是20px”浏览器不这么想。小改快速验把20改成20px刷新看效果30秒搞定。记住calc不是数学公式是CSS语法。单位不带布局直接裂。这坑我踩过三次现在写代码手抖都先加px。下次再写calc先默念“数字必带单位不然全完蛋”。别等半夜改省得秃头。