Math Function Trong CSS, bạn có thể sử dụng các hàm toán học để thực hiện các phép tính số học trên các giá trị. Điều này rất hữu ích khi bạn cần tính toán kích thước, độ dời, hoặc áp dụng hiệu ứng dựa trên giá trị số. Dưới đây là một số ví dụ về cách sử dụng các hàm toán học trong CSS:
- calc(): Hàm này cho phép bạn thực hiện các phép tính số học trên các giá trị.
css
.container {
width: calc(100% - 20px); /* Giảm 20px khỏi chiều rộng */
height: calc(50vh + 10px); /* Tổng 50% chiều cao viewport và 10px */
padding: calc(10px * 2); /* Nhân 10px với 2 */
}
- min() và max(): Các hàm này cho phép bạn chọn giá trị nhỏ nhất hoặc lớn nhất trong danh sách các giá trị.
css
.container {
width: min(300px, 100%); /* Chọn giá trị nhỏ nhất giữa 300px và 100% */
height: max(200px, 50%); /* Chọn giá trị lớn nhất giữa 200px và 50% */
}
- clamp(): Hàm này giúp bạn xác định giá trị nằm trong khoảng giữa một giá trị tối thiểu và tối đa.
css
.container {
width: clamp(200px, 50%, 500px); /* Giá trị nằm trong khoảng 200px đến 500px, tối đa không vượt quá 50% */
}
- round(), floor(), ceil(): Các hàm này làm tròn giá trị số.
css
.container {
width: round(12.6px); /* Làm tròn lên thành 13px */
height: floor(23.8px); /* Làm tròn xuống thành 23px */
padding: ceil(15.2px); /* Làm tròn lên thành 16px */
}
Nhớ rằng việc hỗ trợ các hàm toán học trong CSS có thể khác nhau giữa các trình duyệt, vì vậy hãy kiểm tra tài liệu và hỗ trợ trình duyệt trước khi sử dụng chúng.