CSS ฟังก์ชันคณิต

ฟังก์ชันคณิตศาสตร์ CSS อนุญาตให้ใช้สมการทางคณิตศาสตร์เป็นค่าที่ใช้ในคุณสมบัติ. บทที่นี้จะเรียกและอธิบาย calc()、max() และ min() ฟังก์ชัน.

ฟังก์ชัน calc()

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

CSS ภาษา

calc(expression)
ค่า คำอธิบาย
expression ความจำเป็นต่อง่าย. สมการทางคณิตศาสตร์. ผลลัพธ์จะถูกใช้เป็นค่า. สามารถใช้ตัวอักษรดังต่อไปนี้: +, -, *, /

จะมีตัวอย่างดังนี้

ตัวอย่าง

ใช้ calc() คำนวณความกว้างขององค์ประกอบ <div>:

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

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

ฟังก์ชัน max()

max() ฟังก์ชันใช้ค่าที่แยกด้วยความหมายของรายการค่าในลำดับที่เลือกค่าที่ใหญ่ที่สุดเป็นค่าที่ใช้ในคุณสมบัติ.

CSS ภาษา

max(value1, value2, ...)
ค่า คำอธิบาย
value1, value2, ... ความจำเป็นต่อง่าย. รายการค่าที่แยกด้วยความหมายของความหลากหลาย - เลือกค่าที่ใหญ่ที่สุด.

จะมีตัวอย่างดังนี้

ตัวอย่าง

ใช้ max() จะให้ความกว้างของ #div1 อยู่ที่ 50% หรือ 300px ตามที่ใหญ่ที่สุด:

#div1 {
  background-color: yellow;
  height: 100px;
  width: max(50%, 300px);
}

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

ฟังก์ชัน min()

min() ฟังก์ชัน min() ใช้รายการค่าที่แยกด้วยความว่างในรายการค่าเพื่อใช้เป็นค่าของแคร์พิเษษ

CSS ภาษา

min(value1, value2, ...)
ค่า คำอธิบาย
value1, value2, ... จำเป็น รายการค่าที่แยกด้วยความว่าง - เลือกค่าที่เล็กที่สุด

จะมีตัวอย่างดังนี้

ตัวอย่าง

ใช้ min() ตั้งค่าความกว้างของ #div1 ให้เป็น 50% หรือ 300px ที่เล็กที่สุด

#div1 {
  background-color: yellow;
  height: 100px;
  width: min(50%, 300px);
}

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

CSS ฟังก์ชัน

หากต้องการรายการฟังก์ชัน CSS ทั้งหมด โปรดเข้าชม คู่มือฟังก์ชัน CSS。