calc() trong CSS: kết hợp đơn vị, quy tắc cú pháp và ví dụ

calc() làm gì

calc() thực hiện phép tính bên trong một giá trị CSS, và có thể kết hợp những đơn vị chỉ có kích thước cụ thể lúc dàn trang. Trường hợp kinh điển là "toàn bộ chiều rộng trừ đi thanh bên cố định":

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>calc</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .layout { background: #e5e7eb; height: 110px; }
    .side { float: left; width: 180px; height: 100%; background: #111827; color: white; }
    .main {
      float: left;
      width: calc(100% - 180px); /* whatever is left next to the sidebar */
      height: 100%;
      background: #2563eb;
      color: white;
    }
  </style>
</head>
<body>
  <div class="layout"><div class="side">180px</div><div class="main" id="m">calc(100% - 180px)</div></div>
  <p id="out"></p>
  <script>
    const m = document.getElementById('m');
    document.getElementById('out').textContent = 'main is ' + m.offsetWidth + 'px of a ' + m.parentElement.offsetWidth + 'px row';
  </script>
</body>
</html>

100% chỉ biết được khi trang đã dàn xong, còn 180px là cố định, nên không có đơn vị đơn lẻ nào diễn đạt được điều này. calc() tính giúp bạn: trong bản xem trước rộng 800px, hàng rộng 784px và cột chính được 604px, và dòng bên dưới bố cục in ra các con số thật. Ngày nay flexbox hoặc grid làm được bố cục này mà không cần tính toán, nhưng phép trừ tương tự vẫn xuất hiện ở khắp nơi: chiều cao trừ header, chiều rộng trừ khoảng cách.

Quy tắc cú pháp

width: calc(100% - 2rem);          /* + and - need spaces on both sides */
width: calc(100% / 3);             /* divide by a plain number */
margin: calc(var(--space) * 2);    /* multiply by a plain number */
height: calc(100vh - (64px + 1rem)); /* parentheses group */

Quy tắc khoảng trắng tồn tại vì 100% -20px sẽ bị đọc thành hai giá trị riêng, giá trị thứ hai là một số âm. Khi calc() không hợp lệ, cả khai báo bị loại bỏ và phần tử giữ nguyên giá trị nó có từ các quy tắc trước đó.

Thử một biểu thức

Gõ biểu thức bất kỳ cho chiều rộng của hộp. Trình duyệt cho biết biểu thức có hợp lệ không, và chiều rộng tính ra là bao nhiêu:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>calc tester</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .track { background: #e5e7eb; margin: 10px 0; }
    #box { width: 50%; height: 40px; background: #16a34a; }
  </style>
</head>
<body>
  <label>width: calc(<input id="expr" value="100% - 200px" size="24">)</label>
  <div class="track"><div id="box"></div></div>
  <p id="out"></p>
  <script>
    const input = document.getElementById('expr');
    const box = document.getElementById('box');
    const update = () => {
      const value = 'calc(' + input.value + ')';
      const ok = CSS.supports('width', value);
      box.style.width = ok ? value : '';
      document.getElementById('out').textContent = ok
        ? 'valid: ' + box.offsetWidth + 'px of ' + box.parentElement.offsetWidth + 'px'
        : 'invalid: the browser would ignore this declaration';
    };
    input.addEventListener('input', update);
    update();
  </script>
</body>
</html>

Thử 100%-200px (không hợp lệ, thiếu khoảng trắng), 100% / 3, 50% + 4rem, 2 * 120px, 200px * 2px (không hợp lệ) và (100% - 40px) / 2.

calc() với biến CSS

Biến và calc() đi đôi với nhau: lưu một giá trị gốc một lần và suy ra các giá trị còn lại từ nó. Một biến không đơn vị trở thành độ dài khi bạn nhân nó với một đơn vị:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>calc and variables</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    :root { --space: 8px; --cols: 3; }
    .grid {
      display: grid;
      grid-template-columns: repeat(var(--cols), 1fr);
      gap: calc(var(--space) * 2);        /* 16px */
      padding: calc(var(--space) * 3);    /* 24px */
      background: #e5e7eb;
    }
    .grid div {
      height: calc(var(--cols) * 20px);   /* unitless 3 becomes 60px */
      background: #2563eb;
    }
  </style>
</head>
<body>
  <div class="grid"><div></div><div></div><div></div></div>
  <p id="out"></p>
  <script>
    const g = getComputedStyle(document.querySelector('.grid'));
    const cell = getComputedStyle(document.querySelector('.grid div'));
    document.getElementById('out').textContent = 'gap ' + g.columnGap + ', padding ' + g.paddingTop + ', cell height ' + cell.height;
  </script>
</body>
</html>

Đổi --space thành 12px hoặc --cols thành 4 là mọi giá trị suy ra đều thay đổi theo. Trang biến CSS nói về cách khai báo biến và phạm vi của chúng.

Cách dùng phổ biến

Với giá trị phải nằm giữa hai giới hạn, hãy dùng clamp(), hàm này nhận cùng kiểu phép tính trong các đối số mà không cần viết calc().

calc() dùng được ở đâu

Ở bất cứ chỗ nào chấp nhận độ dài, phần trăm, số, góc hoặc thời gian: width, margin, padding, top, font-size, line-height, kích thước track của grid, transition-delay, và góc bên trong transform. calc() có thể lồng nhau, và một calc() lồng bên trong tương đương với cặp ngoặc tròn thông thường.

Góc là một ví dụ hay. Mỗi vạch bên dưới có --i riêng (từ 0 đến 11), và một quy tắc duy nhất đổi nó thành góc bằng calc(var(--i) * 30deg):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>calc angles</title>
  <style>
    .dial { position: relative; width: 160px; height: 160px; border-radius: 50%; background: #e5e7eb; }
    .tick {
      position: absolute;
      top: 10px;
      left: calc(50% - 2px);          /* center a 4px wide tick */
      width: 4px;
      height: 16px;
      background: #111827;
      transform-origin: 2px 70px;     /* the center of the dial */
      transform: rotate(calc(var(--i) * 30deg));
    }
  </style>
</head>
<body>
  <div class="dial" id="dial"></div>
  <p id="out"></p>
  <script>
    const dial = document.getElementById('dial');
    for (let i = 0; i < 12; i++) dial.insertAdjacentHTML('beforeend', '<div class="tick" style="--i: ' + i + '"></div>');
    document.getElementById('out').textContent = 'tick 3 transform: ' + getComputedStyle(dial.children[3]).transform;
  </script>
</body>
</html>

Vạch số 3 nhận rotate(90deg), mà Chrome báo là ma trận matrix(0, 1, -1, 0, 0, 0): một phần tư vòng. left: calc(50% - 2px) căn giữa mỗi vạch bằng cách trừ đi một nửa chiều rộng 4px của chính nó.

Lỗi thường gặp

• Thiếu khoảng trắng quanh - hoặc +. calc(100%-20px) không hợp lệ và bị bỏ qua.
• Nhân hai độ dài với nhau. calc(10px * 2px) không có nghĩa trong CSS. Một vế của * phải là số thuần.
• Dùng calc() cho chiều cao phần trăm khi phần tử cha không có chiều cao. calc(100% - 20px) cho height cần phần tử cha có chiều cao xác định, giống như height: 100%.
• Dùng calc() ở chỗ flexbox hoặc grid làm được. width: calc(33.333% - 10px) cho các cột rất dễ vỡ; display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px không cần tính toán gì.
• Chờ một thông báo lỗi. Trình duyệt không cảnh báo khi calc() không hợp lệ. Hãy kiểm tra phần tử trong công cụ nhà phát triển: khai báo không hợp lệ sẽ bị gạch ngang.