Cả Đơn vị tuyệt đối và Đơn vị tương đối của CSS đều nằm trong danh mục Đơn vị khoảng cách.
Đơn vị tương đối CSS xác định độ dài của một phần tử trong tham chiếu đến một phần tử khác.
Ví dụ: vh đơn vị tương đối có liên quan đến chiều cao khung nhìn.
Sau đây là các đơn vị tương đối của CSS -
| Sr.No | Đơn vị &Tương đối với |
|---|---|
| 1 | % Thứ nguyên phần tử chính |
| 2 | em Kích thước phông chữ của phần tử |
| 3 | ex x-height của phông chữ của phần tử |
| 4 | lh Chiều cao dòng của phần tử |
| 5 | rem Kích thước phông chữ của phần tử gốc |
| 6 | rlh Chiều cao dòng của phần tử gốc |
| 7 | vb 1% kích thước của khung nhìn trong trục khối của phần tử gốc |
| 8 | vh 1% chiều cao của khung nhìn |
| 9 | vmax 1% kích thước lớn hơn của khung nhìn |
| 10 | vmin 1% kích thước nhỏ hơn của khung nhìn |
| 11 | vw 1% chiều rộng của khung nhìn |
Ví dụ
Hãy để chúng tôi xem một ví dụ cho các đơn vị tương đối của CSS -
<!DOCTYPE html>
<html>
<head>
<title>CSS Relative Units</title>
<style>
html{
font-size: 14px;
line-height: normal;
}
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
#textContain {
font-size: 20px;
line-height: 2;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS-Relative-Units</legend>
<input type="text" id="textSelect" placeholder="Type Text Here...">
<input type="number" id="numSelect" value="1" min="1">
<div id="radioBut">
<input class="radio" type="radio" name="heading" value="em" checked><label>em</label>
<input class="radio" type="radio" name="heading" value="rem"><label>rem</label>
<input class="radio" type="radio" name="heading" value="vw"><label>vw</label>
<input class="radio" type="radio" name="heading" value="vh"><label>lh</label>
<input class="radio" type="radio" name="heading" value="ex"><label>ex</label>
</div>
<div id="textContain">Text Preview: <span id="textPreview">Output will show up here</span></div>
<input type="button" onclick="changeText()" value="Preview">
</fieldset>
</form>
<script>
var textSelect = document.getElementById("textSelect");
var numSelect = document.getElementById("numSelect");
var textPreview = document.getElementById("textPreview");
function changeText() {
if(textSelect.value === '')
textPreview.textContent = 'Type some text first';
else{
for(var i=0; i<5; i++){
var radInp = document.getElementsByClassName('radio')[i];
if(radInp.checked === true){
textPreview.textContent = textSelect.value;
textPreview.style.fontSize = numSelect.value+radInp.value
}
}
}
}
</script>
</body>
</html> Đầu ra
Sau đây là đầu ra cho đoạn mã trên -
Trước khi nhấp vào bất kỳ nút nào -
Sau khi nhấp vào nút ‘Xem trước’ với tùy chọn ‘em’ được chọn và trường văn bản trống -
Sau khi nhấp vào nút ‘Xem trước’ với tùy chọn ‘rem’ được chọn và trường văn bản không trống -
Sau khi nhấp vào nút ‘Xem trước’ với tùy chọn ‘em’ được chọn và trường văn bản không trống -
Sau đây là các đơn vị tuyệt đối trong CSS -
| Sr.No | Đơn vị &Tên |
|---|---|
| 1 | cm Centimet (1 cm =100 mm) |
| 2 | in Inch (1 in =2,54 cm) |
| 3 | mm Milimét |
| 4 | pc Picas (1 cái =12 pt) |
| 5 | pt Điểm (1 pt =1/72 in) |
| 6 | px Điểm ảnh (1 px =0,75 pt) |
Ví dụ
Hãy để chúng tôi xem một ví dụ về đơn vị tuyệt đối CSS -
<!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;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS-Absolute-Units</legend>
<input type="text" id="textSelect" placeholder="Type Text Here...">
<input type="number" id="numSelect" value="10" min="1">
<div id="radioBut">
<input class="radio" type="radio" name="heading" value="pc"><label>pc</label>
<input class="radio" type="radio" name="heading" value="pt"><label>pt</label>
<input class="radio" type="radio" name="heading" value="px" checked><label>px</label>
<input class="radio" type="radio" name="heading" value="in"><label>in</label>
<input class="radio" type="radio" name="heading" value="cm"><label>cm</label>
</div>
<div id="textContain">Text Preview: <span id="textPreview">Output will show up here</span></div>
<input type="button" onclick="changeText()" value="Preview">
</fieldset>
</form>
<script>
var textSelect = document.getElementById("textSelect");
var numSelect = document.getElementById("numSelect");
var textPreview = document.getElementById("textPreview");
function changeText() {
if(textSelect.value === '')
textPreview.textContent = 'Type some text first';
else{
for(var i=0; i<5; i++){
var radInp = document.getElementsByClassName('radio')[i];
if(radInp.checked === true){
textPreview.textContent = textSelect.value;
textPreview.style.fontSize = numSelect.value+radInp.value
}
}
}
}
</script>
</body>
</html> Đầu ra
Sau đây là đầu ra cho đoạn mã trên -
Trước khi nhấp vào bất kỳ nút nào -
Sau khi nhấp vào nút ‘Xem trước’ với tùy chọn ‘px’ được chọn và trường văn bản không trống -
Sau khi nhấp vào nút ‘Xem trước’ với tùy chọn ‘pt’ được chọn và trường văn bản không trống -
Sau khi nhấp vào nút ‘Xem trước’ với tùy chọn ‘pc’ được chọn và trường văn bản không trống -
