1. 程式人生 > >calc()用於一行中中間內容自適應

calc()用於一行中中間內容自適應

在面試前沒有想過中間內容自適應的問題,在一次面試中考官問到知道左右兩邊的欄的寬度如何讓中間的寬度自適應,但是回答的五花八門,回來後查了查使用css3中的calc() 

其實calc是英文單詞calculate(計算)的縮寫,是css3的一個新增的功能,用來指定元素的長度。比如說,你可以使用calc()給元素的border、margin、pading、font-size和width等屬性設定動態值著作權歸作者所有。

calc(expression)

比如已知左邊的寬度是100px,右邊的內容是180px;如何讓中間的內容自適應

中間的寬度=calc(100% - 100px - 180px);

calc()使用通用的數學運算規則,但是也提供更智慧的功能:

  1. 使用“+”、“-”、“*” 和 “/”四則運算;
  2. 可以使用百分比、px、em、rem等單位;
  3. 可以混合使用各種單位進行計算;
  4. 表示式中有“+”和“-”時,其前後必須要有空格,如"widht: calc(12%+5em)"這種沒有空格的寫法是錯誤的;
  5. 表示式中有“*”和“/”時,其前後可以沒有空格,但建議留有空格。