CSS Units มีหลายหมวดหมู่ เช่น ขนาดแบบอักษร, ขนาดตัวอักษร, ขนาด viewport ฯลฯ โดยและคร่าวๆ มีสองหมวดหมู่คือ absolute และ relative units ซึ่งประกอบด้วยหมวดหมู่ย่อยที่กล่าวมาข้างต้น
คุณสมบัติ CSS absolute units ดังนี้:
| ลำดับ | หน่วยและชื่อ |
|---|---|
| 1 | cm เซนติเมตร (1 cm = 100 mm) |
| 2 | in นิ้ว (1 in = 2.54 cm) |
| 3 | mm มิลลิเมตร |
| 4 | pc ปิกา (1 pc = 12 pt) |
| 5 | pt พอยต์ (1 pt = 1/72 in) |
| 6 | px พิกเซล (1 px = 0.75 pt) |
ลองดูตัวอย่างของ CSS absolute units:
ตัวอย่าง
<!DOCTYPE html> <html> <head> <title>CSS Absolute Units</title> <style> form { width:70%; margin: 0 auto; text-align: center; } * { padding: 2px; margin:5px; } input[type="button"] { border-radius: 10px; } #container { display: flex; } .child{ margin: 5px 0; height: 40px; color: white; border-width: 4px 0 4px 4px; border-color: black; border-style: solid; } .child:nth-of-type(1){ background-color: #FF8A00; width:1cm; } .child:nth-of-type(2){ background-color: #F44336; width:1in; } .child:nth-of-type(3){ background-color: #C303C3; width:1mm; } .child:nth-of-type(4){ background-color: #4CAF50; width:1pc; } .child:nth-of-type(5){ background-color: #03A9F4; width:1pt; } .child:nth-of-type(6){ background-color: #FEDC11; width:1px; border-right-width: 4px; } </style> </head> <body> <form> <fieldset> <legend>CSS-Absolute-Units</legend> <div id="container"> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div><br> <div><span class="child">cm</span><span class="child">in</span><span class="child">mm</span><span class="child">pc</span><span class="child">pt</span><span class="child">px</span></div><br> <input type="number" id="numSelect" value="1" min="1"> <input type="button" onclick="changeWidth()" value="Preview"> <script> var numSelect = document.getElementById("numSelect"); function changeWidth() { var divChild = document.getElementsByClassName('child'); for(var i=0; i<6; i++){ divChild[i].style.width = numSelect.value+divChild[i+6].textContent; }} </script> </body> </html>
ผลลัพธ์
ก่อนคลิกปุ่มใดๆ:
หลังคลิกปุ่ม 'Preview' พร้อมฟิลด์ตัวเลขตั้งค่า:
CSS relative units ดังนี้:
| ลำดับ | หน่วยและ Relative to |
|---|---|
| 1 | % ขนาดขององค์ประกอบพาเรนต์ |
| 2 | em ขนาดแบบอักษรขององค์ประกอบ |
| 3 | ex x-height ของแบบอักษรขององค์ประกอบ |
| 4 | rem ขนาดแบบอักษรของรูทองค์ประกอบ |
| 5 | vh 1% ของความสูง viewport |
| 6 | vmax 1% ของมิติที่ใหญ่กว่า viewport |
| 7 | vmin 1% ของมิติที่เล็กกว่า viewport |
| 8 | vw 1% ของความกว้าง viewport |
ลองดูตัวอย่างของ CSS relative units:
ตัวอย่าง
<!DOCTYPE html> <html> <head> <title>CSS Relative Units</title> <style> form { width:70%; margin: 0 auto; text-align: center; } * { padding: 2px; margin:5px; } input[type="button"] { border-radius: 10px; } #container { display: flex; } .child{ margin: 5px 0; height: 40px; color: white; border-width: 4px 0 4px 4px; border-color: black; border-style: solid; } .child:nth-of-type(1){ background-color: #FF8A00; width:1%; } .child:nth-of-type(2){ background-color: #F44336; width:1em; } .child:nth-of-type(3){ background-color: #C303C3; width:1ex; } .child:nth-of-type(4){ background-color: #4CAF50; width:1rem; } .child:nth-of-type(5){ background-color: #03A9F4; width:1vh; } .child:nth-of-type(6){ background-color: #FEDC11; width:1vw; border-right-width: 4px; } </style> </head> <body> <form> <fieldset> <legend>CSS-Relative-Units</legend> <div id="container"> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div><br> <div><span class="child">%</span><span class="child">em</span><span class="child">ex</span><span class="child">rem</span><span class="child">vh</span><span class="child">vw</span></div><br> <input type="number" id="numSelect" value="1" min="1"> <input type="button" onclick="changeWidth()" value="Preview"> <script> var numSelect = document.getElementById("numSelect"); function changeWidth() { var divChild = document.getElementsByClassName('child'); for(var i=0; i<6; i++){ divChild[i].style.width = numSelect.value+divChild[i+6].textContent; }} </script> </body> </html>
ผลลัพธ์
ก่อนคลิกปุ่มใดๆ:
หลังคลิกปุ่ม 'Preview' พร้อมตัวเลือก 'em' และฟิลด์ข้อความว่าง:
