<calc-sum>

Cú pháp

Kiểu <calc-sum> xác định hai giá trị số và một trong các toán tử số học sau giữa chúng.

+

Cộng hai số lại với nhau.

-

Trừ số bên phải từ số bên trái.

Cú pháp chính thức

<calc-sum> = 
  <calc-product> [ [ '+' | '-' ] <calc-product> ]*  

<calc-product> = 
  <calc-value> [ [ '*' | / ] <calc-value> ]*  

<calc-value> = 
  <number>        |
  <dimension>     |
  <percentage>    |
  <calc-keyword>  |
  ( <calc-sum> )  

<calc-keyword> = 
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN        

Mô tả

Các toán hạng trong biểu thức có thể là bất kỳ giá trị cú pháp <length> nào. Bạn có thể sử dụng <length>, <frequency>, <angle>, <time>, <percentage>, <number>, hoặc <integer>.

Kiểu của hai toán hạng phải nhất quán. Đối với độ dài, bạn không thể dùng 0 để có nghĩa là 0px (hoặc đơn vị độ dài khác). Thay vào đó, bạn phải thêm đơn vị rõ ràng: margin-top: calc(0px + 20px); là hợp lệ, trong khi margin-top: calc(0 + 20px); là không hợp lệ. Các kiểu giá trị phần trăm được xử lý dựa trên ngữ cảnh. Ví dụ, margin-top: calc(50% + 20px); là hợp lệ vì margin-top chuyển đổi phần trăm thành độ dài.

Việc bao gồm biến CSS trong biểu thức calc-sum cũng được phép. Đoạn mã sau calc(10px + var(--variable)) là một biểu thức hợp lệ.

Các toán tử + và - phải được bao quanh bởi whitespace. Ví dụ, calc(50% -8px) sẽ được phân tích là "một phần trăm theo sau bởi một độ dài âm" — đây là một biểu thức không hợp lệ — trong khi calc(50% - 8px) là "một phần trăm theo sau bởi toán tử trừ và một độ dài". Tương tự, calc(8px + -50%) được coi là "một độ dài theo sau bởi toán tử cộng và một phần trăm âm".

Thông số kỹ thuật

Xem thêm

• <calc-product>
• <calc-value>
• <calc-keyword>