1. Đơn Vị Đo Độ Dài Tương Đối
Đơn vị đo độ dài tương đối phụ thuộc vào kích thước của phần tử chứa hoặc kích thước của font chữ. Chúng thường được sử dụng để tạo ra bố cục linh hoạt và thích ứng.
1.1. em
- Định nghĩa: 1 em tương đương với kích thước font chữ của phần tử cha.
- Cách sử dụng: Dùng để xác định kích thước của các phần tử dựa trên kích thước font chữ hiện tại.
Ví dụ:
h1 {
font-size: 2em; /* Kích thước chữ gấp đôi kích thước font của phần tử cha */
}1.2. rem
- Định nghĩa: 1 rem tương đương với kích thước font chữ của thẻ
<html>.
- Cách sử dụng: Thích hợp để tạo ra các kích thước đồng nhất trên toàn bộ trang.
Ví dụ:
h1 {
font-size: 2rem; /* Kích thước chữ gấp đôi kích thước font của thẻ <html> */
}1.3. % (Phần Trăm)
- Định nghĩa: Đơn vị phần trăm tính theo kích thước của phần tử cha.
- Cách sử dụng: Dùng để xác định kích thước hoặc khoảng cách dựa trên kích thước của phần tử chứa.
Ví dụ:
div {
width: 50%; /* Chiều rộng bằng 50% chiều rộng của phần tử chứa */
}
2. Đơn Vị Đo Độ Dài Tuyệt Đối
Đơn vị đo độ dài tuyệt đối không phụ thuộc vào bất kỳ phần tử nào và thường được sử dụng để xác định kích thước cố định.
2.1. px (Pixel)
- Định nghĩa: Pixel là đơn vị nhỏ nhất trong đo lường độ dài trên màn hình.
- Cách sử dụng: Phổ biến nhất để xác định kích thước và khoảng cách của các phần tử.
Ví dụ:
h1 {
font-size: 24px; /* Kích thước chữ là 24 pixel */
}2.2. cm (Centimeter)
- Định nghĩa: Centimeter là đơn vị đo độ dài theo hệ mét.
- Cách sử dụng: Thích hợp cho in ấn hơn là cho thiết kế web.
Ví dụ:
div {
width: 10cm; /* Chiều rộng là 10 centimeter */
}2.3. mm (Millimeter)
- Định nghĩa: Millimeter là đơn vị đo độ dài, bằng 1/10 của một centimeter.
- Cách sử dụng: Tương tự như cm, thường sử dụng cho in ấn.
Ví dụ:
div {
height: 100mm; /* Chiều cao là 100 millimeter */
}2.4. in (Inch)
- Định nghĩa: Inch là đơn vị đo độ dài bằng 2.54 cm.
- Cách sử dụng: Thường được sử dụng trong in ấn.
Ví dụ:
div {
width: 5in; /* Chiều rộng là 5 inches */
}
3. Đơn Vị Đo Độ Dài Khác
3.1. vw (Viewport Width)
- Định nghĩa: 1 vw tương đương với 1% chiều rộng của viewport (khung nhìn).
- Cách sử dụng: Dùng để tạo bố cục linh hoạt theo chiều rộng của màn hình.
Ví dụ:
div {
width: 50vw; /* Chiều rộng bằng 50% chiều rộng của viewport */
}3.2. vh (Viewport Height)
- Định nghĩa: 1 vh tương đương với 1% chiều cao của viewport.
- Cách sử dụng: Dùng để tạo bố cục linh hoạt theo chiều cao của màn hình.
Ví dụ:
div {
height: 50vh; /* Chiều cao bằng 50% chiều cao của viewport */
}3.3. vmin và vmax
- Định nghĩa: vmin là giá trị nhỏ hơn giữa vw và vh, vmax là giá trị lớn hơn.
- Cách sử dụng: Giúp tạo các thiết kế linh hoạt dựa trên kích thước của viewport.
Ví dụ:
div {
font-size: 5vmin; /* Kích thước chữ bằng 5% của chiều rộng hoặc chiều cao nhỏ nhất */
}
