Rate this post

Trong CSS, calc() là một hàm tính toán cho phép bạn thực hiện các phép tính trên giá trị số trong thuộc tính. Bạn có thể sử dụng calc() để tính toán giá trị cho các thuộc tính như chiều rộng, chiều cao, padding, margin, font-size, v.v.

Các bài viết liên quan:

Ví dụ:

.box {
    width: calc(100% - 40px); /* Chiều rộng là 100% trừ 40px */
    height: calc(50vh + 20px); /* Chiều cao là 50% chiều cao của viewport cộng thêm 20px */
    margin: calc(10px + 2%); /* Margin là 10px cộng thêm 2% */
    font-size: calc(16px + 2vw); /* Kích thước font là 16px cộng thêm 2% chiều rộng của viewport */
}

Trong ví dụ trên, tôi sử dụng calc() để tính toán giá trị cho chiều rộng, chiều cao, margin và font-size của thành phần .box.

Lưu ý rằng, calc() chỉ hỗ trợ trên các trình duyệt mới và cần phải được sử dụng cùng với giá trị tuyệt đối hoặc tỉ lệ.

Calc() là một tính năng rất mạnh mẽ, giúp cho việc thiết kế responsive trong css trở nên dễ dàng hơn, đặc biệt khi bạn muốn tạo ra các thiết kế phức tạp hơn.

tại sao sử dụng calc trong css

Sử dụng calc() trong CSS có nhiều lý do và lợi ích, một số trong số chúng là:

  • Tạo hiệu ứng responsive: Bạn có thể sử dụng calc() để tính toán giá trị cho các thuộc tính theo tỷ lệ với chiều rộng hoặc chiều cao của viewport, giúp tạo ra hiệu ứng responsive cho trang web.
  • Tạo thiết kế linh hoạt: Bạn có thể sử dụng calc() để tính toán giá trị cho các thuộc tính dựa trên giá trị khác, giúp cho việc thiết kế linh hoạt hơn và dễ dàng hơn khi muốn thay đổi giá trị của các thuộc tính.
  • Tạo thiết kế phức tạp: Bạn có thể sử dụng calc() để tính toán giá trị cho các thuộc tính dựa trên các phép tính phức tạp, giúp tạo ra các thiết kế phức tạp hơn.
  • Tạo sự tương thích: Bạn có thể sử dụng calc() để giải quyết các vấn đề về tương thích trên các trình duyệt cũ hơn hoặc trên các thiết bị khác nhau. Ví dụ, bạn có thể sử dụng calc() để tính toán giá trị cho một thuộc tính nhưng sử dụng giá trị tuyệt đối cho các trình duyệt cũ hơn hoặc thiết bị di động.
  • Tạo sự linh hoạt: Sử dụng calc() giúp cho việc thay đổi giá trị của các thuộc tính trở nên dễ dàng hơn, ví dụ như khi bạn muốn thay đổi kích thước của một phần tử thì bạn chỉ cần thay đổi giá trị của một biến mà không cần phải sửa lại toàn bộ mã CSS. Điều này giúp cho việc quản lý và bảo trì mã CSS trở nên dễ dàng hơn.
  • Tạo hiệu ứng chuyển đổi: Bạn có thể sử dụng calc() để tạo ra các hiệu ứng chuyển đổi như trong ví dụ tôi đã giới thiệu trước đó.

Tổng hợp lại, sử dụng calc() trong CSS giúp cho việc thiết kế và quản lý trang web trở nên dễ dàng hơn và tạo ra các hiệu ứng đẹp mắt và linh hoạt hơn.

một số ví dụ calc() trong css

Ví dụ 1: Tính toán chiều rộng của một thành phần với 100% chiều rộng của cha trừ 20px

.box {
    width: calc(100% - 20px);
}

Ví dụ 2: Tính toán kích thước font dựa trên chiều rộng của viewport

body {
    font-size: calc(16px + 2vw);
}

Ví dụ 3: Tính toán chiều cao của một thành phần với 50% chiều cao của viewport cộng thêm 10px

.box {
    height: calc(50vh + 10px);
}

Ví dụ 4: Tính toán padding của một thành phần với 5% chiều rộng của viewport

.box {
    padding: calc(5vw);
}

Ví dụ 5: Tính toán margin của một thành phần với 20px trừ đi 2% chiều rộng của viewport

.box {
    margin: calc(20px - 2%);
}

Trong các ví dụ trên, tôi sử dụng calc() để tính toán giá trị cho các thuộc tính như chiều rộng, chiều cao, padding, margin, font-size của các thành phần.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Contact Me on Zalo
Call now