Bài 39: Đơn vị đo trong CSS


Đơn vị CSS

CSS có một số đơn vị khác nhau để thể hiện độ dài.
Nhiều thuộc tính CSS có giá trị “chiều dài”, chẳng hạn như width, margin, padding, font-size, …
Chiều dài là một con số theo sau là một đơn vị chiều dài, chẳng hạn như 10px, 2em, …
Thiết lập giá trị độ dài khác nhau, sử dụng px (pixels):


h1 {
  font-size: 60px;
}

p {
  font-size: 25px;
  line-height: 50px;
}


Lưu ý: Khoảng trắng không được xuất hiện giữa số và đơn vị. Tuy nhiên, nếu giá trị là 0, đơn vị có thể được bỏ qua.
Đối với một số thuộc tính CSS, độ dài âm được phép.
Có hai loại đơn vị độ dài: tuyệt đốitương đối.

Độ dài tuyệt đối

Các đơn vị độ dài tuyệt đối là cố định và độ dài được biểu thị bằng bất kỳ đơn vị nào trong số này sẽ xuất hiện chính xác như kích thước đó.
Đơn vị độ dài tuyệt đối không được khuyến khích sử dụng trên màn hình, vì kích thước màn hình thay đổi rất nhiều. Tuy nhiên, chúng có thể được sử dụng nếu phương tiện đầu ra được biết, chẳng hạn như máy in.

Đơn vị Mô tả ví dụ
cm centimeters
mm millimeters
in inches (1in = 96px = 2.54cm)
px * pixels (1px = 1/96th of 1in)
pt points (1pt = 1/72 of 1in)
pc picas (1pc = 12 pt)

* Điểm ảnh (px) có liên quan đến thiết bị xem. Đối với các thiết bị dpi thấp, 1px là một pixel thiết bị (dot) của màn hình. Đối với máy in và màn hình có độ phân giải cao, 1px là nhiều pixel thiết bị.

Độ dài tương đối

Đơn vị độ dài tương đối chỉ định độ dài liên quan đến một thuộc tính độ dài khác. Các đơn vị độ dài tương đối chia tỷ lệ tốt hơn giữa các phương tiện kết xuất khác nhau.
Ví dụ:

Đơn vị Mô tả ví dụ
em Liên quan đến kích thước phông chữ của phần tử (2em có nghĩa là gấp 2 lần kích thước phông chữ hiện tại)
ex Liên quan đến chiều cao x của phông chữ hiện tại (hiếm khi được sử dụng)
ch Tương đối với chiều rộng của “0” (không)
rem Liên quan đến kích thước phông chữ của phần tử gốc
vw Tương đối với 1% chiều rộng của khung nhìn
vh Tương đối với 1% chiều cao của khung nhìn
vmin Tương đối với 1% kích thước nhỏ hơn của khung nhìn
vmax Tương đối với 1% kích thước lớn hơn của khung nhìn
% Liên quan đến phần tử mẹ

Có thể bạn sẽ thích…

Trả lời