Hàm calc () CSS

Tìm hiểu cách làm việc với hàm CSS calc ()

Cáccalc()hàm cho phép bạn thực hiện các phép toán cơ bản trên các giá trị và nó đặc biệt hữu ích khi bạn cần thêm hoặc trừ một giá trị độ dài từ một tỷ lệ phần trăm.

Đây là cách nó hoạt động:

div {
	max-width: calc(80% - 100px)
}

Nó trả về một giá trị độ dài, vì vậy nó có thể được sử dụng ở bất kỳ đâu bạn mong đợi một giá trị pixel.

Bạn có thể thực hiện

  • bổ sung bằng cách sử dụng+
  • phép trừ bằng cách sử dụng-
  • nhân bằng cách sử dụng*
  • phân chia sử dụng/

Một lưu ý: với phép cộng và phép trừ, không gian xung quanh toán tử là bắt buộc, nếu không nó không hoạt động như mong đợi.

Ví dụ:

div {
	max-width: calc(50% / 3)
}
div {
	max-width: calc(50% + 3px)
}

Tải xuống miễn phí của tôiSổ tay CSS


Các hướng dẫn css khác: