Các đơn Vị Px Em Rem Mm đo độ Dài Trong CSS
Có thể bạn quan tâm
- Đơn vị kích thước CSS
- Đơn vị kích thước tuyệt đối CSS
- Đơn vị kích thước tương đối CSS
Đơn vị kích thước (độ dài, lớn bé) trong CSS
Các đơn vị về kích thước để xác định độ dài, ngắn, lớn, bé của các đối tượng liên quan đến kích thước - ví dụ như chiều cao phần tử 50px (50 pixel - điểm ảnh) hoặc chiều cao phần tử là 30em. Có hai loại đơn vị sử dụng trong CSS - loại đơn vị tuyệt đối và đơn vị độ dài tương đối.
Đơn vị kích thước tuyệt đối trong CSS
Những loại đơn vị này thì giá trị của nó độc lập không liên quan đến các phần tử thành phần khác, dùng đơn vị này ở trong HTML thì kích cỡ đo được đều giống nhau. Dưới đây là những đơn vị tuyệt đối hay dùng:
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 |
Bạn có quyền sử dụng bất kỳ đơn vị nào, tuy nhiên phổ biến để thể hiện trên màn hình là đơn vị px, các đơn vị tuyệt đối khác như cm phù hợp để thể hiện trang in.
Đơn vị kích thước tương đối trong CSS
Khi dùng các đơn vị tương đối thì độ lớn thực tế phụ thuộc vào thành phần khác, thường là phụ thuộc vào thuộc tính phần tử cha trong HTML hoặc phụ thuộc vào kích thước viewport (kích thước cửa sổ hiện tại của trình duyệt). Lợi ích của đơn vị này là nó tự động thu phóng độ lớn (chiều dài, font chữ) theo phần tử cha
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. <div style="font-size: 20px"> font-size phần tử cha 20px <div style="font-size: 0.5em"> Cỡ font thiết lập 0.5em (bằng nửa phần tử cha) </div> </div> font-size phần tử cha 20px Cỡ font thiết lập 0.5em (bằng nửa phần tử cha) |
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: :root { font-size: 16px; color: #333; } |
lh | Bằng chiều cao dòng phần tử cha |
vw | Bằng 1% chiều rộng cửa sổ |
vh | Bằng 1% chiều cao cửa sổ |
Từ khóa » đơn Vị đo Của Css
-
Các Đơn Vị Tính Trong CSS - CodeLearn
-
Tất Tần Tật Các đơn Vị Trong CSS | Dyno Nguyễn
-
Các đơn Vị đo Lường Trong CSS - Viblo
-
Đơn Vị đo Trong CSS - Học Css Cơ Bản đến Nâng Cao - VietTuts
-
Các đơn Vị đo Trong CSS
-
Bài 39: Đơn Vị đo Trong CSS | Tìm ở đây
-
[Học CSS] Tìm Hiểu Về đơn Vị Px, Pt, Percentages, Em Và Rem
-
Các Đơn Vị Trong CSS | By Văn Khải | F8
-
Đơn Vị Trong HTML & CSS | CSS | TEMPLATE MẪU - Học Web Chuẩn
-
Đơn Vị đo Trong CSS - Đại Phố Web & Hosting
-
Sử Dụng đơn Vị đo Trong CSS | Lê Vũ Nguyên Dạy Học Lập Trình
-
Unit - Đơn Vị đo Trong CSS
-
Đơn Vị đo Trong CSS
-
7 đơn Vị CSS Có Thể Bạn Không Biết - TMA Solutions