Đơn vị CSS

Đơn vị CSS

CSS có nhiều đơn vị biểu diễn độ dài khác nhau.

Nhiều thuộc tính CSS chấp nhận giá trị 'độ dài', chẳng hạn như width、margin、padding、font-size v.v.

Độ dài là một số sau đó theo đơn vị độ dài, chẳng hạn như 10px、2em v.v.

Mô hình

Cài đặt các giá trị độ dài khác nhau bằng px (pixel):

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

Thử nghiệm trực tiếp

Không nên có khoảng trống giữa số và đơn vị. Tuy nhiên, nếu giá trị là 0, có thể bỏ qua đơn vị.

Đối với một số thuộc tính CSS, cho phép sử dụng độ dài âm.

Đơn vị độ dài có hai loại:Đơn vị tuyệt đốivàĐơn vị tương đối.

Độ dài tuyệt đối

Đơn vị độ dài tuyệt đối là cố định, bất kỳ độ dài nào được biểu thị bằng đơn vị tuyệt đối sẽ hiển thị chính xác kích thước đó.

Không nên sử dụng đơn vị độ dài tuyệt đối trên màn hình vì kích thước màn hình thay đổi rất lớn. Tuy nhiên, nếu biết môi trường đầu ra, có thể sử dụng chúng, ví dụ như cho布局 in (print layout).

Đơn vị Mô tả TIY
cm Centimeter Thử nghiệm
mm Millimeter Thử nghiệm
in Inch (1in = 96px = 2.54cm) Thử nghiệm
px * Pixel (1px = 1/96 của 1in) Thử nghiệm
pt Point (1pt = 1/72 của 1in) Thử nghiệm
pc Pica (1pc = 12 pt) Thử nghiệm

* Pixel (px) là tương đối với thiết bị xem. Đối với thiết bị có dpi thấp, 1px là một điểm thiết bị trên màn hình. Đối với máy in và màn hình có độ phân giải cao, 1px biểu thị nhiều điểm thiết bị.

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

Đơn vị độ dài tương đối quy định độ dài so với một thuộc tính độ dài khác. Đơn vị độ dài tương đối có thể mở rộng tốt hơn giữa các môi trường render khác nhau.

Đơn vị Mô tả TIY
em So với kích thước chữ của phần tử (font-size) (2em biểu thị gấp đôi kích thước chữ hiện tại) Thử nghiệm
ex So với x-height của font hiện tại (sử dụng rất ít) Thử nghiệm
ch So với chiều rộng "0" (số không) Thử nghiệm
rem So với kích thước chữ của phần tử gốc (font-size) Thử nghiệm
vw So với chiều rộng của khu vực xem* 1% Thử nghiệm
vh So với chiều cao của khu vực xem* 1% Thử nghiệm
vmin So với kích thước nhỏ hơn 1% của khu vực xem* Thử nghiệm
vmax So với kích thước lớn hơn 1% của khu vực xem* Thử nghiệm
% So với phần tử cha Thử nghiệm

Lưu ý:Đơn vị em và rem có thể được sử dụng để tạo ra bố cục mở rộng hoàn hảo!

* Khu vực xem (Viewport) = kích thước cửa sổ trình duyệt. Nếu kích thước khu vực xem là 50, thì 1vw = 0.5cm.

Hỗ trợ trình duyệt

Số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ hoàn toàn đơn vị độ dài đó.

Đơn vị độ dài
em, ex, %, px, cm, mm, in, pt, pc 1.0 3.0 1.0 1.0 3.5
ch 27.0 9.0 1.0 7.0 20.0
rem 4.0 9.0 3.6 4.1 11.6
vh, vw 20.0 9.0 19.0 6.0 20.0
vmin 20.0 12.0 19.0 6.0 20.0
vmax 26.0 16.0 19.0 7.0 20.0