ฟังก์ชันคณิตศาสตร์ CSS

สารบัญ

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

ฟังก์ชัน `calc()`

ฟังก์ชัน calc() ทำการคำนวณเพื่อใช้เป็นค่าคุณสมบัติ

ไวยากรณ์ซีเอสเอส

calc(expression)

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

ให้เราดูตัวอย่าง:

ตัวอย่าง

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

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
  position: absolute;
  left: 50px;
  width: calc(100% - 100px);
  border: 1px solid black;
  background-color: yellow;
  padding: 5px;
}
</style>
</head>
<body>

<h1>The calc() Function</h1>

<p>Create a div that stretches across the window, with a 50px gap between both sides of the div and the edges of the window:</p>

<div id="div1">Some text...</div>

</body>
</html>

ฟังก์ชัน `max()`

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

ไวยากรณ์ซีเอสเอส

 max(value1, value2, ...)

value1, value2, ...: ที่จำเป็น. รายการค่าที่คั่นด้วยเครื่องหมายจุลภาค โดยที่ค่ามากที่สุดคือ เลือกแล้ว

ให้เราดูตัวอย่าง:

ตัวอย่าง

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

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
  background-color: yellow;
  height: 100px;
  width: max(50%, 300px);
}
</style>
</head>
<body>

<h1>The max() Function</h1>

<p>Use max() to set the width of #div1 to whichever value is largest, 50% or 300px:</p>

<div id="div1">Some text...</div>

<p>Resize the browser window to see the effect.</p>

</body>
</html>

ฟังก์ชัน `min()`

ฟังก์ชัน min() ใช้ค่าที่น้อยที่สุด จากรายการค่าที่คั่นด้วยเครื่องหมายจุลภาคเป็นค่าคุณสมบัติ

ไวยากรณ์ซีเอสเอส

 min(value1, value2, ...)

value1, value2, ...: ที่จำเป็น. รายการค่าที่คั่นด้วยเครื่องหมายจุลภาค - โดยที่ค่าน้อยที่สุดคือ เลือกแล้ว

ให้เราดูตัวอย่าง:

ตัวอย่าง

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

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
  background-color: yellow;
  height: 100px;
  width: min(50%, 300px);
}
</style>
</head>
<body>

<h1>The min() Function</h1>

<p>Use min() to set the width of #div1 to whichever value is smallest, 50% or 300px:</p>

<div id="div1">Some text...</div>

<p>Resize the browser window to see the effect.</p>

</body>
</html>