Hàm toán học CSS

Các hàm toán học CSS cho phép sử dụng biểu thức toán học làm giá trị thuộc tính. Chương này sẽ giải thích calc()、max() và min() Hàm.

Hàm calc()

calc() Hàm thực hiện tính toán và sử dụng kết quả làm giá trị thuộc tính.

Cú pháp CSS

calc(expression)

Hãy xem một ví dụ:

Ví dụ

Sử dụng calc() Tính toán chiều rộng của phần tử <div>:

#div1 {
  position: absolute;
  left: 50px;
  width: calc(100% - 100px);
  border: 1px solid black;
  background-color: yellow;
  padding: 5px;
}

Thử trực tiếp

Hàm max()

max() Hàm sử dụng giá trị lớn nhất trong danh sách các giá trị phân cách bằng dấu phẩy làm giá trị thuộc tính.

Cú pháp CSS

max(value1, value2, ...)

Hãy xem một ví dụ:

Ví dụ

Sử dụng max() Đặt chiều rộng của #div1 là 50% hoặc giá trị lớn hơn giữa 50% và 300px:

#div1 {
  background-color: yellow;
  height: 100px;
  width: max(50%, 300px);
}

Thử trực tiếp

Hàm min()

min() Hàm sử dụng giá trị nhỏ nhất trong danh sách các giá trị phân cách bằng dấu phẩy làm giá trị thuộc tính.

Cú pháp CSS

min(value1, value2, ...)

Hãy xem một ví dụ:

Ví dụ

Sử dụng min() Đặt chiều rộng của #div1 là 50% hoặc giá trị nhỏ hơn giữa 300px:

#div1 {
  background-color: yellow;
  height: 100px;
  width: min(50%, 300px);
}

Thử trực tiếp

Tài liệu tham khảo hàm CSS

Nếu bạn cần danh sách đầy đủ các hàm CSS, hãy truy cập Tài liệu tham khảo hàm CSS。