ฟังก์ชัน calc() ของ CSS

การประกาศและการใช้งาน

ฟังก์ชัน calc() ของ CSS calc() ฟังก์ชันทำการคำนวณและใช้ผลลัพธ์เป็นค่าของแอตทริบิวต์

ตัวอย่าง

ใช้ calc() คำนวณความกว้างของ <div> อิเล็ม

#div1 {
  position: absolute;
  left: 50px;
  width: calc(100% - 100px);
  border: 1px solid black;
  background-color: yellow;
  padding: 5px;
  text-align: center;
}

ทดลองด้วยตัวเอง

รูปแบบ CSS

calc(expression)
ค่า คำอธิบาย
expression

จำเป็นต้องมี。ความหมายของสัญญาณคำนวณที่ใช้เป็นค่า

สามารถใช้ตัวเลือกการคำนวณดังนี้: +, -, *, /

รายละเอียดเทคโนโลยี

รุ่น: CSS3

การสนับสนุนของเบราเซอร์

ตัวเลขในตารางนี้แสดงครั้งที่เรียกเครื่องมือแรกที่สนับสนุนฟังก์ชันนี้

Chrome Edge Firefox Safari Opera
26 9 16 7 15

หน้าที่เกี่ยวข้อง

อ้างอิง:ฟังก์ชัน acos() ของ CSS

อ้างอิง:ฟังก์ชัน asin() ของ CSS

อ้างอิง:ฟังก์ชัน atan() ของ CSS

อ้างอิง:ฟังก์ชัน atan2() ของ CSS

อ้างอิง:ฟังก์ชัน cos() ของ CSS

อ้างอิง:ฟังก์ชัน exp() ของ CSS

อ้างอิง:ฟังก์ชัน hypot() ของ CSS

อ้างอิง:ฟังก์ชัน log() ของ CSS

อ้างอิง:ฟังก์ชัน mod() ของ CSS

อ้างอิง:ฟังก์ชัน pow() ของ CSS

อ้างอิง:CSS sin() ฟังก์ชัน

อ้างอิง:CSS sqrt() ฟังก์ชัน

อ้างอิง:CSS tan() ฟังก์ชัน