Các đơn Vị Px Em Rem Mm đo độ Dài Trong CSS

Trang chủ » Em Trong Css » 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ổ
Mục lục bài viết Đơ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 ĐĂNG KÝ KÊNH, XEM CÁC VIDEO TRÊN XUANTHULAB Đăng ký nhận bài viết mới

Từ khóa » Em Trong Css