Các đơn vị CSS có nhiều loại như kích thước font, kích thước ký tự, kích thước viewport, v.l. Largescale có hai loại chính: đơn vị tuyệt đối và tương đối.
Các đơn vị tuyệt đối CSS:
| STT | Đơn vị & Tên |
|---|---|
| 1 | cm Centimet (1 cm = 100 mm) |
| 2 | in Inch (1 in = 2.54 cm) |
| 3 | mm Milimet |
| 4 | pc Picas (1 pc = 12 pt) |
| 5 | pt Points (1 pt = 1/72 in) |
| 6 | px Pixels (1 px = 0.75 pt) |
Ví dụ đơn vị tuyệt đối CSS:
Ví dụ
<!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="Xem trước"> <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>
Kết quả
Trước khi nhấn nút:
Sau khi nhấn nút 'Xem trước' với trường số đặt:
Các đơn vị tương đối CSS:
| STT | Đơn vị & Tương đối với |
|---|---|
| 1 | % Kích thước phần tử cha |
| 2 | em Kích thước font của phần tử |
| 3 | ex x-height của font phần tử |
| 4 | rem Kích thước font của phần tử gốc (root) |
| 5 | vh 1% chiều cao viewport |
| 6 | vmax 1% kích thước lớn hơn của viewport |
| 7 | vmin 1% kích thước nhỏ hơn của viewport |
| 8 | vw 1% chiều rộng viewport |
Ví dụ đơn vị tương đối CSS:
Ví dụ
<!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="Xem trước"> <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>
Kết quả
Trước khi nhấn nút:
Sau khi nhấn nút 'Xem trước' với tùy chọn 'em' và trường văn bản trống:
