Trong CSS (Cascading Style Sheets), các đơn vị là thành phần quan trọng để xác định kích thước của các thuộc tính như chiều rộng, chiều cao, font chữ, margin, padding, và nhiều thuộc tính khác. Các đơn vị trong CSS có thể được chia thành hai loại chính: đơn vị tuyệt đối và đơn vị tương đối.

1. Đơn vị tuyệt đối (Absolute Units)
Đơn vị tuyệt đối có giá trị cố định, không phụ thuộc vào bất kỳ yếu tố nào khác. Chúng thường được sử dụng khi bạn cần kích thước chính xác, không thay đổi với kích thước của màn hình hay thiết bị.

Các đơn vị tuyệt đối phổ biến:

- px (pixel): 1 px tương đương với 1 điểm ảnh trên màn hình. Đây là đơn vị rất phổ biến.
- in (inch): 1 inch = 96 pixels trên màn hình.
- cm (centimeter): 1 cm = 37.8 pixels.
- mm (millimeter): 1 mm = 1/10 của 1 cm.
- pt (point): 1 pt = 1/72 của 1 inch.
- pc (pica): 1 pc = 12 points.
2. Đơn vị tương đối (Relative Units)
Các đơn vị tương đối phụ thuộc vào một giá trị khác, chẳng hạn như kích thước của phần tử gốc hoặc kích thước của màn hình. Chúng linh hoạt hơn và phù hợp với thiết kế responsive.

Các đơn vị tương đối phổ biến:

- % (phần trăm): Giá trị theo phần trăm của một thuộc tính khác, ví dụ như chiều rộng của phần tử mẹ (parent element).
- em: 1 em bằng kích thước font của phần tử gốc. Ví dụ, nếu font-size của phần tử mẹ là 16px, thì 1 em = 16px.
- rem (root em): 1 rem bằng kích thước font của phần tử gốc (root element), thường là html. Nếu font-size của html là 16px, thì 1 rem = 16px.
- vh (viewport height): Tương ứng với 1% chiều cao của cửa sổ trình duyệt (viewport).
- vw (viewport width): Tương ứng với 1% chiều rộng của cửa sổ trình duyệt.
- vmin và vmax: vmin là giá trị nhỏ hơn giữa chiều cao và chiều rộng của viewport, trong khi vmax là giá trị lớn hơn.
3. Các đơn vị hàm số
CSS còn hỗ trợ một số hàm để tính toán kích thước dựa trên các giá trị động:

- calc(): Cho phép tính toán các giá trị với các đơn vị khác nhau, ví dụ: width: calc(100% - 50px);.
- min(), max(), clamp(): Cho phép xác định các giá trị tối thiểu, tối đa hoặc cố định dựa trên các điều kiện khác nhau.
Ví dụ sử dụng các đơn vị trong CSS:

div {
width: 50%; /* Sử dụng phần trăm */
padding: 10px; /* Sử dụng pixel */
font-size: 1.5em; /* Sử dụng em */
height: 100vh; /* Sử dụng viewport height */
}

Khi nào nên sử dụng đơn vị nào?
- px thích hợp khi bạn cần độ chính xác và kiểm soát hoàn toàn kích thước.
- em và rem được sử dụng nhiều trong thiết kế responsive, vì chúng thay đổi theo kích thước font và giúp cho giao diện thích nghi với nhiều kích thước màn hình.
- vw và vh hữu ích trong việc thiết kế các layout theo tỷ lệ của cửa sổ trình duyệt.
Tóm lại, việc sử dụng đúng đơn vị trong CSS là một phần quan trọng để đảm bảo thiết kế của bạn hoạt động tốt trên nhiều loại màn hình và thiết bị khác nhau.