In CSS, units are essential for defining lengths, sizes, and other measurements. Units can be categorized into two main types: absolute and relative units.
1. Absolute Units
Absolute units are fixed and do not change based on other elements or screen sizes. They are ideal for print media or scenarios where precise control over dimensions is needed. Here are the common absolute units:
1.1 Pixels (px): Represents a single dot on the screen. It's a fixed unit and does not change with screen size or resolution.
pixels.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Absolute Units Example</title> <style> .absolute-box { width: 200px; height: 200px; background-color: lightgray; margin: 5px; font-size: 25px; color: darkblue; display: flex; justify-content: center; /* Horizontally center */ align-items: center; /* Vertically center */ } </style> </head> <body> <div class="absolute-box">Absolute Box</div> </body> </html>
1.2 Points (pt): Commonly used in print media. One point is 1/72 of an inch.
1 inch = 72 points
1 inch = 96 pixels
Therefore, 1 point = 96/72 pixels = 1.333 pixels
points.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Absolute Units Example</title> <style> .absolute-box { width: 200pt; height: 200pt; background-color: lightgray; margin: 5pt; font-size: 25pt; color: darkblue; display: flex; justify-content: center; /* Horizontally center */ align-items: center; /* Vertically center */ } </style> </head> <body> <div class="absolute-box">Absolute Box</div> </body> </html>
1.3 Inches (in): Measures length in inches. Often used for print.
inches.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Absolute Units Example</title> <style> .absolute-box { width: 2.5in; height: 3in; background-color: lightgray; margin: 0.1in; font-size: 0.3in; color: darkblue; display: flex; justify-content: center; /* Horizontally center */ align-items: center; /* Vertically center */ } </style> </head> <body> <div class="absolute-box">Absolute Box</div> </body> </html>
1.4 Centimeters (cm): Measures length in centimeters.
centimeters.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Absolute Units Example</title> <style> .absolute-box { width: 8cm; height: 6cm; background-color: lightgray; margin: 0.5cm; font-size: 0.9cm; color: darkblue; display: flex; justify-content: center; /* Horizontally center */ align-items: center; /* Vertically center */ } </style> </head> <body> <div class="absolute-box">Absolute Box</div> </body> </html>
1.5 Millimeters (mm): Measures length in millimeters.
1 centimeter = 10 millimeters.
millimeters.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Absolute Units Example</title> <style> .absolute-box { width: 80mm; height: 60mm; background-color: lightgray; margin: 5mm; font-size: 9mm; color: darkblue; display: flex; justify-content: center; /* Horizontally center */ align-items: center; /* Vertically center */ } </style> </head> <body> <div class="absolute-box">Absolute Box</div> </body> </html>
1.6 Picas (pc): Commonly used in typography. One pica is 1/6 of an inch.
picas.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Absolute Units Example</title> <style> .absolute-box { width: 15pc; height: 18pc; background-color: lightgray; margin: 0.6pc; font-size: 1.8pc; color: darkblue; display: flex; justify-content: center; /* Horizontally center */ align-items: center; /* Vertically center */ } </style> </head> <body> <div class="absolute-box">Absolute Box</div> </body> </html>
2. Relative Units
Relative units are flexible and change relative to other elements, parent elements, or the viewport. They are useful for responsive design. Here are the common relative units:
2.1 Percent (%): Relative to the parent element's size.
percentage.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Relative Units Example</title> <style> html, body { height: 100%; /* Ensure the body and html elements occupy full viewport height */ margin: 0; /* Remove any default margin that may cause issues */ padding: 0; /* Remove any default padding */ } .relative-box1 { width: 10%; height: 10%; background-color: lightgray; padding: 10px; margin: 10px; } .relative-box2 { width: 30%; height: 10%; background-color: lightgray; padding: 10px; margin: 10px; } .relative-box3 { width: 50%; height: 10%; background-color: lightgray; padding: 10px; margin: 10px; } .relative-box4 { width: 70%; height: 10%; background-color: lightgray; padding: 10px; margin: 10px; } .relative-box5 { width: 90%; height: 10%; background-color: lightgray; padding: 10px; margin: 10px; } .text { font-size: 1.5em; } </style> </head> <body> <div class="relative-box1"> <p class="text">width: 10%, height: 10%</p> </div> <div class="relative-box2"> <p class="text">width: 30%, height: 10%</p> </div> <div class="relative-box3"> <p class="text">width: 50%, height: 10%</p> </div> <div class="relative-box4"> <p class="text">width: 70%, height: 10%</p> </div> <div class="relative-box5"> <p class="text">width: 90%, height: 10%</p> </div> </body> </html>
2.2 Em (em): em is a relative unit in CSS, often used to set font sizes, padding, margins, and other dimensions relative to the font size of the element or its parent. 1em is equal to the current font size of the element. If the font size of an element is 16px, then 1em is 16px.
.text { font-size: 2em; /* 2 times the current font size of the parent element */ }
em.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Relative Units Example</title> <style> .heading{ font-size: 32px; } .text1{ font-size: 0.3em; } .text2{ font-size: 0.6em; } .text3{ font-size: 0.9em; } .text4{ font-size: 1.2em; } .text5{ font-size: 1.5em; } </style> </head> <body> <div class="heading">Heading <p class="text1">Hi there!!!!!</p> <p class="text2">Hi there!!!!!</p> <p class="text3">Hi there!!!!!</p> <p class="text4">Hi there!!!!!</p> <p class="text5">Hi there!!!!!</p> </div> </body> </html>
2.3 rem: em is relative to the font size of the parent element.
rem is relative to the font size of the root element (<html>).
Use em when you want sizing to be relative to the parent element. This is particularly useful in nested components where you want to scale elements in relation to their containers.
Use rem when you want a more predictable, consistent scale that is based on the root element, ensuring uniformity across different parts of your design.
html { font-size: 16px; } .text { font-size: 1.5rem; /* 1.5 times the root element's font size, 24px */ }
2.4 Viewport Width (vw): Relative to 1% of the viewport's width.
.full-width { width: 100vw; /* 100% of the viewport's width */ }
2.5 Viewport Height (vh): Relative to 1% of the viewport's height.
.full-height { height: 100vh; /* 100% of the viewport's height */ }
2.6 Viewport Minimum (vmin): Relative to 1% of the smaller dimension (width or height) of the viewport.
.square { width: 50vmin; /* 50% of the smaller viewport dimension */ height: 50vmin; }
2.7
Viewport Maximum (vmax):
Relative to 1% of the larger dimension (width or height) of the viewport.
.responsive-box { width: 80vmax; /* 80% of the larger viewport dimension */ height: 80vmax; }
No comments:
Post a Comment