ฟังก์ชันคณิตศาสตร์ CSS
ฟังก์ชันคณิตศาสตร์ CSS อนุญาตให้ใช้นิพจน์ทางคณิตศาสตร์เป็นค่าคุณสมบัติได้ calc()
ในที่ นี้เราจะอธิบายฟังก์ชัน
max()
และmin()
ฟังก์ชัน calc()
ฟังก์ชันcalc()
ทำการคำนวณเพื่อใช้เป็นค่าคุณสมบัติ
ไวยากรณ์ CSS
calc(expression)
Value | Description |
---|---|
expression | Required. A mathematical expression. The result will be used as the value. The following operators can be used: + - * / |
ให้เราดูตัวอย่าง:
ตัวอย่าง
ใช้ 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, ...)
Value | Description |
---|---|
value1, value2, ... | Required. A list of comma-separated values - where the largest value is chosen |
ให้เราดูตัวอย่าง:
ตัวอย่าง
ใช้ max() เพื่อกำหนดความกว้างของ #div1 เป็นค่าใดที่ใหญ่ที่สุด 50% หรือ 300px:
#div1 {
background-color: yellow;
height: 100px;
width: max(50%, 300px);
}
ฟังก์ชัน min()
ฟังก์ชันmin()
ใช้ค่าที่น้อยที่สุด จากรายการค่าที่คั่นด้วยเครื่องหมายจุลภาค เป็นค่าคุณสมบัติ
ไวยากรณ์ CSS
min(value1, value2, ...)
Value | Description |
---|---|
value1, value2, ... | Required. A list of comma-separated values - where the smallest value is chosen |
ให้เราดูตัวอย่าง:
ตัวอย่าง
ใช้ min() เพื่อตั้งค่าความกว้างของ #div1 เป็นค่าใดก็ตามที่น้อยที่สุด 50% หรือ 300px:
#div1 {
background-color: yellow;
height: 100px;
width: min(50%, 300px);
}
ฟังก์ชันคณิตศาสตร์ CSS ทั้งหมด
Function | Description |
---|---|
calc() | Allows you to perform calculations to determine CSS property values |
max() | Uses the largest value, from a comma-separated list of values, as the property value |
min() | Uses the smallest value, from a comma-separated list of values, as the property value |