CSS Units
CSS cung cấp một số đơn vị khác nhau để thể hiện độ dài.
Nhiều thuộc tính CSS nhận giá trị "length", chẳng hạn như width
, margin
, padding
, font-size
,...
Length là một số theo sau là đơn vị độ dài, chẳng hạn như 10px, 2em, v.v.
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: absolute và relative.
Absolute Lengths
Các đơn vị chiều dài tuyệt đối được cố định và một độ dài được biểu thị trong bất kỳ trong số này sẽ xuất hiện như chính xác kích thước đó.
Các đơn vị độ dài tuyệt đối không được khuyến nghị sử dụng trên màn hình, bởi 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 môi trường đầu ra được biết đến, chẳng hạn như bố cục in.
Đơn vị | Mô tả |
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) |
Relative Lengths
Đơ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 mở rộng quy mô tốt hơn giữa các phương tiện kết xuất khác nhau.
Đơn vị | Mô tả |
em | Liên quan đến kích thước font chữ của element (2em có nghĩa là gấp 2 lần kích thước font chữ hiện tại) |
ex | Liên quan đến chiều cao x của font 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 font chữ của element 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 element mẹ |