Có một thứ mà sẽ xuất hiện ở bất cứ một đoạn mã CSS nào đó là các đơn vị do lường. Tuy nó không quá phức tạp nhưng tính quan trọng của nó khiến chúng tôi phải dùng hẳn một bài viết để nói về.
Đơn vị tuyệt đối (Absolute Units)
Các đơn vị tuyệt đối sử dụng trong CSS gồm có:
px: Đây là một đơn vị được sử dụng trên màn hình hiển thị, một px sẽ tương đương với một điểm ảnh trên màn hình hiển thị. Chất lượng của điểm ảnh sẽ hoàn toàn khác nhau trên một số thiết bị, ví dụ như một điểm ảnh trên các thiết bị in ấn sẽ khác với một điểm ảnh trên các thiết bị màn hình độ phân giải thấp.pt: Đơn vị point và cứ 1 ich = 72pt.
Đơn vị tương đối (Relative Units)
Các đơn vị tương đối được sử dụng trong CSS gồm có:
%(percentages): Là đơn vị tham chiếu tỷ lệ so với một phần tử mẹ của nó dựa vào kích thước.
Ví dụ có một box có kích thước là 200px và box bên trong có kích thước là 50% thì nó sẽ là 100px. Nếu bạn sử dụng đơn vị phần trăm này để gán kích thước cho thẻ<html>trên website thì nó sẽ thay đổi theo kích thước màn hình hoặc/cửa sổ website.em: Là đơn vị tham chiếu tỷ lệ so với phần tử mẹ của nó dựa vào giá trị của thuộc tínhfont-size. Ví dụ bạn đặt cho font-size cho phần tử mẹ của nó là 12px thì nếu bạn sử dụng em trong khu vực phần tử đó thì 1em = 12px.rem: Là đơn vị tham chiếu tỷ lệ so với phần tử gốc của một website dựa vào thuộc tính font-size, nghĩa là sẽ biến đổi tùy theo giá trị của thuộc tính font-size trong thẻ <html>. Cũng như rem, nếu bạn khai báo font-size cho thẻ<html>là 16px thì 1rem = 16px.
