1. 首頁 > 生活百科 > >

為什么CSS中的calc函數可能會不生效？( 二 )

生活百科

除法，除數必須是number規則

  • + 和 - 運算符的兩邊必須要有空白字符 。比如 ， calc(50% -8px) 會被解析成為一個無效的表達式 ， 解析結果是：一個百分比 后跟一個負數長度值 。而加有空白字符的、有效的表達式 calc(8px + -50%) 會被解析成為：一個長度 后跟一個加號 再跟一個負百分比 。
  • * 和 / 這兩個運算符前后不需要空白字符 ， 但如果考慮到統一性，仍然推薦加上空白符 。
  • 用 0 作除數會使 HTML 解析器拋出異常 。
  • 涉及自動布局和固定布局的表格中的表列、表列組、表行、表行組和表單元格的寬度和高度百分比的數學表達式，auto 可視為已指定 。
  • calc() 函數支持嵌套，但支持的方式是：把被嵌套的 calc() 函數全當成普通的括號 。
解惑想要了解前面那些坑產生的原因，我們得先了解CSS中的基礎語法與數據類型：
DIMENSION語法DIMENSION{num}{ident}
為什么CSS中的calc函數可能會不生效？

文章插圖
這里的num值的是數字，那么ident代表什么呢，這個我們也可以在CSS規范中找到答案
identident[-]?{nmstart}{nmchar}*nmstart和nmcharnmstart [_a-z]|{nonascii}|{escape}nmchar [_a-z0-9-]|{nonascii}|{escape}
為什么CSS中的calc函數可能會不生效？

文章插圖
解惑calc(100%-50px)了解完CSS的基礎語法與數據結構，我們現在可以來看看解析器是如何解析calc(100%-50px)的 。
  • 首先DIMENSION語法 ， {num}{ident}會將其分割為num：100、ident：%和-100px
  • %是單位，這個應該沒有疑問
  • -100px這個符合nmchar語法 ， 所以沒有將其拆開，而是保留作為單位解析，但CSS中沒有-100px這個單位，所以這個表達式不會生效
兼容性calc 函數具有驚人的瀏覽器支持，一直到 IE9 。如果你用舊版瀏覽器或 Opera Mini 編寫代碼，請考慮使用數值作為后備 。
為什么CSS中的calc函數可能會不生效？

文章插圖
最后喜歡的同學歡迎點個贊呀，想要查看源碼的同學快來公眾號回復碎片吧～
原文首發地址點這里 ， 歡迎大家關注公眾號 「前端南玖」，如果你想進前端交流群一起學習 ， 請點這里
我是南玖，我們下期見?。。?

推薦閱讀