Hiểu đơn vị CSS

Đơn vị CSS có nhiều loại như kích thước phông chữ, kích thước ký tự, kích thước khung nhìn, v.v. Nói chung, có hai loại đơn vị tuyệt đối và tương đối bao gồm các danh mục phụ đã đề cập ở trên.

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	trong 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)

Hãy để chúng tôi xem một ví dụ về đơ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="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>

Đầu ra

Trước khi nhấp vào bất kỳ nút nào -

Hiểu đơn vị CSS

Sau khi nhấp vào ‘Xem trước’ nút có đặt trường số -

Hiểu đơn vị CSS

Sau đây là các đơn vị tương đối của CSS -

Sr.No	Đơn vị &Liên quan đến
1	% Thứ nguyên phần tử chính
2	em Kích thước phông chữ của phần tử
3	ví dụ x-height của phông chữ của phần tử
4	rem Kích thước phông chữ của phần tử gốc
5	vh 1% chiều cao của khung nhìn
6	vmax 1% kích thước lớn hơn của khung nhìn
7	vmin 1% kích thước nhỏ hơn của khung nhìn
8	vw 1% chiều rộng của khung nhìn

Hãy để chúng tôi xem một ví dụ về các đơn vị tương đối của 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="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>

Đầu ra

Trước khi nhấp vào bất kỳ nút nào -

Hiểu đơn vị CSS

Sau khi nhấp vào ‘Xem trước’ nút có ‘em’ tùy chọn đã chọn và trường văn bản trống -

Hiểu đơn vị CSS