Css có nhiều đơn vị đo độ dài khác nhau, chúng ta cần phân biệt và sử dụng chúng một cách hiệu quả tránh các lỗi phát sinh trên các thiết bị khác nhau. Các đơn vị kích thước trong css gồm đơn vị tuyệt đối như px, mm, cm và các đơn vị tương đối như em, rem để xác định kích thước rộng, cao, cỡ font …
Xem thêm
Đơn vị kích thước tuyệt đối trong CSS
Đây là những đơn vị không có liên quan đến các thành phần khác và kích thước giống nhau ở các loại màn hình. Những đơn vị tuyệt đối thường dùng trong css là
| Ký hiệu Đơn vị | Diễn giải |
|---|---|
cm |
centimet (dài bằng 1/100 m) |
mm |
milimét (dài bằng 1/1000 m) |
in |
Inche: 1in = 2.54cm = 96px |
px |
Điểm ảnh (10px là 10 điểm ảnh màn hình) |
pt |
Điểm (point), đây là đơn vị phổ biến dùng biểu diễn kích thước font chữ (72pt = 1inch = 25.4mm) hay 1pt = (1/72)in |
Đơn vị kích thước tương đối trong CSS
Những đơn vị này sẽ phụ thuộc vào những thành phần khác nhau thường là kích thước font chữ hoặc là các phần tử cha trong HTML
| Ký hiệu Đơn vị | Diễn giải | ||
|---|---|---|---|
em |
Bằng cỡ font của phần tử cha. Có nghĩa phần tử cha có cỡ (font-size) là 14px, thì 1em là 14px – nếu cỡ font phần tử cha là 10pt thì 2em là 20px.
|
||
rem |
Bằng cỡ font của phần tử gốc – root, trong CSS để thiết lập các thuộc tính của root thì dùng ký hiệu :root, rồi định nghĩa các thuộc tính giống class:
|
||
lh |
Bằng chiều cao dòng phần tử cha | ||
vw |
Bằng 1% chiều rộng cửa sổ – chiều rộng kích thước màn hình | ||
vh |
Bằng 1% chiều cao cửa sổ – chiều cao kích thước màn hình |
Khi tính toán trong CSS chúng ta dùng cú pháp calc như bên dưới
|
1 2 3 |
.cf-img-full-page-right{ padding-left: calc(50vw - 180px); } |
