HTML/CSS | Các đơn vị trong CSS

Học HTML, CSS từ Zero Tới Hero

• Đơn vị trong CSS
• Đơn vị tuyệt đối
• Đơn vị tương đối

Tài nguyên sử dụng trong bài học:

• W3Schools CSS Units

Đơn vị trong CSS

Trong CSS, các đơn vị được sử dụng để xác định kích thước, khoảng cách và các giá trị liên quan đến trình bày các phần tử trên trang web.
Đơn vị được chia làm 2 nhóm:

• Đơn vị tuyệt đối - Absolute units
• Đơn vị tương đối - Relative units

Đơn vị tuyệt đối

Với đơn vị tuyệt đối, giá trị phần tử sẽ được hiển thị chính xác và cố định. Không có sự phụ thuộc vào phần tử hay bất kỳ ngữ cảnh nào trên trang web.

Các đơn vị tuyệt đối bao gồm:

• px
• mm
• cm
• v.v

Trong thực tế chúng ta thường chỉ dùng px, các đơn vị tuyệt đối khác bạn có thể bỏ qua.

Tính chất của các đơn vị tuyệt đối:

• Giá trị được hiển thị chính xác, cố định và không đổi.
• Không phù hợp để làm responsive (đáp ứng nhiều thiết bị).

Đơn vị tương đối

Khác với đơn vị tuyệt đối, đơn vị tương đối luôn phụ thuộc vào một thành phần khác (tùy vào từng đơn vị, ví dụ em, rem sẽ có sự phụ thuộc khác nhau). Đơn vị tương đối không cố định, nó sẽ bị thay đổi khi sự phụ thuộc của nó thay đổi.
Các đơn vị tương đối bao gồm:

• %
• em
• rem
• vw, vh
• v.v

Thực tế thường hay sử dụng các đơn vị %, em, rem, vw, vh. Các đơn vị khác có thể bỏ qua.

Tính chất của các đơn vị tương đối:

• Linh hoạt, tự động thay đổi theo đối tượng phụ thuộc.
• Không cố định, luôn luôn có đối tượng phụ thuộc.
• Phù hợp để làm responsive.

Bài học này bạn chỉ cần nắm tổng quan về các nhóm đơn vị, cụ thể từng đơn vị sẽ được học kỹ hơn ở các bài tiếp theo. Tham khảo thêm tại W3C.

Tóm tắt

• Có 2 nhóm đơn vị: đơn vị tuyệt đối và đơn vị tương đối.
• Sử dụng đơn vị tuyệt đối, giá trị phần tử sẽ được hiển thị chính xác và cố định.
• Đơn vị tương đối phụ thuộc vào ngữ cảnh và phần tử cha.
• Các đơn vị sử dụng phổ biến: px, %, em, rem, vw, vh.