calc() สำหรับการคำนวณแบบไดนามิก
ผสมหน่วยและคำนวณเลขคณิตใน CSS ด้วยฟังก์ชัน calc() เพื่อสร้างค่าแบบไดนามิก
calc() สำหรับการคำนวณแบบไดนามิก เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
calc() คืออะไร
calc() ช่วยให้คุณคำนวณทางคณิตศาสตร์ได้โดยตรงในค่าพร็อพเพอร์ตี CSS คุณสามารถผสมหน่วยต่างชนิดกัน (px, %, rem, vw) ไว้ในการคำนวณเดียวได้
ไวยากรณ์พื้นฐานของ calc()
รองรับการบวก (+) การลบ (-) การคูณ (*) และการหาร (/) โดยต้องมีช่องว่างรอบตัวดำเนินการ + และ -
<div class="sidebar">Sidebar (100% - 240px)</div>การผสมหน่วย
จุดเด่นของ calc() คือการรวมหน่วยที่เข้ากันไม่ได้และโดยปกติไม่สามารถผสมกันได้:
<div class="hero">Hero</div>
<div class="column">Column</div>calc() กับตัวแปร CSS
ผสาน calc() เข้ากับพร็อพเพอร์ตีแบบกำหนดเองของ CSS เพื่อสร้างโทเค็นการออกแบบแบบไดนามิก:
<div class="main">Main content</div>calc() แบบซ้อนกัน
สามารถซ้อน calc() ได้ แม้จะไม่ค่อยจำเป็น เพราะแต่ละบริบทจะคำนวณทางคณิตศาสตร์ให้แล้ว:
<div class="element">Element</div>calc() สำหรับตัวอักษรแบบยืดหยุ่น
ใช้ calc() เพื่อสร้างการแทรกค่าแบบเส้นตรงระหว่างขนาดสองค่า:
<h1>Fluid Heading</h1>การหารใน calc()
การหารกำหนดให้ตัวหารต้องเป็นตัวเลขที่ไม่มีหน่วย:
<div class="thirds">Third width</div>calc() กับ Grid และ Flexbox
มีประโยชน์เมื่อใช้ภายในคำจำกัดความของแทร็กและ flex-basis:
<div class="grid"><div>A</div><div>B</div></div>calc() เทียบกับฟังก์ชันอื่น
ควรใช้ฟังก์ชันใดในกรณีไหน:
calc(): การคำนวณทางคณิตศาสตร์แบบกำหนดเอง โดยเฉพาะการผสมหน่วยmin()/max(): เลือกค่าที่น้อยกว่าหรือมากกว่าจากตัวเลือกต่าง ๆclamp(): จำกัดค่าแบบยืดหยุ่นให้อยู่ระหว่างค่าต่ำสุดและค่าสูงสุด
การรองรับของเบราว์เซอร์
calc() รองรับในเบราว์เซอร์สมัยใหม่ทั้งหมดและ IE11 เป็นหนึ่งในฟังก์ชัน CSS ที่รองรับอย่างแพร่หลายที่สุด จึงใช้ได้อย่างปลอดภัยโดยไม่ต้องมีค่าทางเลือกสำรองในโครงการสมัยใหม่ใด ๆ
รูปแบบ calc() ที่ใช้บ่อย
รูปแบบที่ใช้ได้จริงและคุณจะนำไปใช้ซ้ำบ่อย ๆ:
<div class="full-height">Full height minus header</div>
<div class="half-minus-gap">Half minus gap</div>
<div class="row"><div class="thirds-with-gaps">Third</div></div>ตรวจสอบอย่างรวดเร็ว
นิพจน์ calc() ใดให้ผลลัพธ์ที่ถูกต้องสำหรับ "30% ขององค์ประกอบแม่ลบด้วย 20px"
สรุปทบทวน
calc() ช่วยให้คำนวณทางคณิตศาสตร์ใน CSS ได้โดยใช้หน่วยผสมกัน ทำให้เกิดเลย์เอาต์แบบไดนามิก เช่น "พื้นที่แสดงผลเต็มขนาดลบด้วยส่วนหัวแบบคงที่" และการแทรกขนาดตัวอักษรแบบยืดหยุ่น ต้องมีช่องว่างรอบตัวดำเนินการ + และ - ผสานกับตัวแปร CSS เพื่อคำนวณโทเค็นการออกแบบได้อย่างทรงพลัง และใช้ร่วมกับ min/max/clamp เพื่อควบคุมการกำหนดขนาดแบบยืดหยุ่นได้อย่างครบถ้วน
คำถามที่พบบ่อย
บทเรียน “calc() สำหรับการคำนวณแบบไดนามิก” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “calc() สำหรับการคำนวณแบบไดนามิก” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “calc() สำหรับการคำนวณแบบไดนามิก”
ผสมหน่วยและคำนวณเลขคณิตใน CSS ด้วยฟังก์ชัน calc() เพื่อสร้างค่าแบบไดนามิก คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “calc() สำหรับการคำนวณแบบไดนามิก” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม
ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- calc() สำหรับการคำนวณแบบไดนามิก
- min() max() และ clamp() สำหรับค่าแบบยืดหยุ่น
- repeat() และ minmax() ในกริด
- color-mix() และไวยากรณ์สีแบบสัมพัทธ์