Hàm calc

Hàm calc cho phép thực hiện các phép tính giá trị của các thuộc tính CSS. Hàm nhận một biểu thức toán học làm tham số, kết quả tính toán của biểu thức đó có thể được sử dụng làm giá trị cho thuộc tính CSS. Biểu thức có thể bao gồm các toán tử +, -, *, /.

Cú pháp

cssbộ chọn {
  thuộc tính: calc(biểu thức);
}

Ví dụ

Hãy làm cho chiều rộng của một khối bằng 100% chiều rộng của phần tử cha, trừ đi 50px:

html<div id="parent">
  <div id="child"></div>
</div>

css#child {
  width: calc(100% - 50px);
  height: 100px;
  margin: 0 auto;
  border: 1px solid red;
}
#parent {
  border: 1px solid green;
}

Результат:

Xem thêm