Hàm calc()
Hàm calc ()
thực hiện một phép tính được sử dụng làm giá trị thuộc tính.
Cú pháp CSS
calc(expression)
Trong đó:
- expression (bắt buộc) là một biểu thức toán học. Kết quả sẽ được sử dụng làm giá trị. Các toán tử sau có thể được sử dụng: + - * /
Chúng ta hãy xem xét một ví dụ:
#div1 { position: absolute; left: 50px; width: calc(100% - 100px); border: 1px solid black; background-color: yellow; padding: 5px; }
Hàm max()
Hàm max() trả về giá trị lớn nhất từ danh sách giá trị được phân tách bằng dấu phẩy, giá trị trả về sẽ làm giá trị thuộc tính.
Cú pháp CSS
max(value1, value2, ...)
Trong đó:
- value1, value2, ... (bắt buộc) danh sách các giá trị được phân tách bằng dấu phẩy - trong đó giá trị lớn nhất được chọn
Chúng ta hãy xem xét một ví dụ:
#div1 { background-color: yellow; height: 100px; width: max(50%, 300px); }
Hàm min()
Hàm max() trả về giá trị lớn nhất từ danh sách giá trị được phân tách bằng dấu phẩy, giá trị trả về sẽ làm giá trị thuộc tính.
Cú pháp CSS
min(value1, value2, ...)
Trong đó:
- value1, value2, ... (bắt buộc) danh sách các giá trị được phân tách bằng dấu phẩy - trong đó giá trị nhỏ nhất được chọn
Chúng ta hãy xem xét một ví dụ:
#div1 { background-color: yellow; height: 100px; width: min(50%, 300px); }
Tất cả hàm toán học CSS
Hàm | Mô tả |
calc() | Cho phép bạn thực hiện các phép tính để xác định giá trị thuộc tính CSS |
max() | Sử dụng giá trị lớn nhất, từ danh sách giá trị được phân tách bằng dấu phẩy làm giá trị thuộc tính |
min() | Sử dụng giá trị nhỏ nhất, từ danh sách giá trị được phân tách bằng dấu phẩy làm giá trị thuộc tính |