ฟังก์ชัน calc

ฟังก์ชัน calc ช่วยให้สามารถ คำนวณค่าของคุณสมบัติ CSS ได้ ฟังก์ชัน รับนิพจน์ทางคณิตศาสตร์เป็นพารามิเตอร์ ผลลัพธ์ของการคำนวณซึ่ง สามารถใช้เป็นค่าของคุณสมบัติ CSS ได้ นิพจน์สามารถรวมตัวดำเนินการ +, -, *, /

ไวยากรณ์

cssselector {
  property: calc(expression);
}

ตัวอย่าง

ลองทำให้ความกว้างของบล็อก เท่ากับ 100% ของความกว้างของผู้ปกครอง ลบด้วย 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;
}

Результат:

ดูเพิ่มเติม