Cách Sử Dụng Tính Năng Calc Trong CSS

Question

Thế Nguyễn · Accepted Answer

Tính năng calc() trong CSS cho phép bạn thực hiện phép toán với các giá trị số để xác định kích thước hoặc vị trí của các phần tử. Đây là một công cụ rất hữu ích khi bạn cần tính toán động các giá trị mà không cần phải viết mã JavaScript hoặc thay đổi mã CSS.
1. Cú Pháp Của calc()
Cú pháp của calc() rất đơn giản:
selector {
    property: calc(expression);
}
selector: Phần tử mà bạn muốn áp dụng thuộc tính.
property: Thuộc tính CSS mà bạn muốn tính toán (ví dụ: width, height, margin, padding, v.v.).
expression: Phép toán mà bạn muốn thực hiện, bao gồm các giá trị với các đơn vị khác nhau (ví dụ: px, %, em, rem, v.v.).
2. Các Phép Toán Hỗ Trợ
Bạn có thể sử dụng các phép toán sau trong calc():
Cộng (+): Thêm các giá trị.
Trừ (-): Trừ các giá trị.
Nhân (*): Nhân một giá trị với một số.
Chia (/): Chia một giá trị cho một số.
Lưu ý: Khi sử dụng phép cộng và phép trừ, bạn cần có một khoảng trắng (space) giữa các giá trị và toán tử.
3. Ví Dụ Cụ Thể
Ví Dụ 1: Tính Toán Chiều Rộng
.box {
    width: calc(100% - 20px); /* 100% chiều rộng của phần tử cha trừ 20px */
    height: 50px;
    background-color: lightblue;
}
Ví Dụ 2: Tính Toán Margin
.margin-example {
    margin-left: calc(50% - 10px); /* 50% chiều rộng của phần tử cha trừ 10px */
    margin-right: calc(20px + 5%); /* 20px cộng với 5% chiều rộng của phần tử cha */
}
Ví Dụ 3: Kết Hợp Các Đơn Vị Khác Nhau
.container {
    width: calc(50% + 100px); /* 50% chiều rộng của phần tử cha cộng với 100px */
    padding: calc(10px + 2%); /* 10px cộng với 2% chiều rộng của phần tử cha */
}
4. Khi Nào Nên Sử Dụng calc()
Khi Bạn Cần Định Kích Thước Động: calc() rất hữu ích khi bạn muốn kết hợp các đơn vị khác nhau hoặc cần điều chỉnh kích thước phần tử theo cách linh hoạt.
Thiết Kế Responsive: Sử dụng calc() có thể giúp bạn dễ dàng tạo ra các thiết kế responsive mà không cần điều chỉnh mã CSS quá nhiều.
Khi Tính Toán Các Giá Trị Phức Tạp: Khi có nhiều điều kiện tính toán cho kích thước hoặc vị trí của các phần tử.
5. Những Điều Cần Lưu Ý
Hỗ Trợ Trình Duyệt: Hầu hết các trình duyệt hiện đại đều hỗ trợ calc(), nhưng hãy kiểm tra tính tương thích nếu bạn đang làm việc với trình duyệt cũ.
Hiệu Suất: Sử dụng quá nhiều calc() trong mã CSS có thể ảnh hưởng đến hiệu suất render, đặc biệt là khi có nhiều phần tử.
Khoảng Trắng: Nhớ thêm khoảng trắng giữa các toán tử và các giá trị để đảm bảo cú pháp chính xác.
Kết Luận
Tính năng calc() trong CSS là một công cụ mạnh mẽ cho phép bạn thực hiện các phép toán phức tạp một cách dễ dàng và linh hoạt. Nó giúp tăng cường khả năng kiểm soát về kích thước và bố cục của các phần tử, đặc biệt trong các thiết kế responsive.