Đơn vị CSS

Tìm hiểu cách làm việc với các đơn vị trong CSS

Một trong những thứ bạn sẽ sử dụng hàng ngày trong CSS làcác đơn vị. Chúng được sử dụng để đặt độ dài, khoảng đệm, lề, căn chỉnh các phần tử, v.v.

Những thứ nhưpx,em,rem, hoặc tỷ lệ phần trăm.

Họ ở khắp mọi nơi. Cũng có một số cái tương đối không được biết đến.

Điểm ảnh

Đơn vị đo lường được sử dụng rộng rãi nhất. Một pixel thực sự không tương quan với một pixel vật lý trên màn hình của bạn, vì điều đó thay đổi rất nhiều theo thiết bị (hãy nghĩ rằng thiết bị DPI cao so với thiết bị không võng mạc).

Có một quy ước làm cho đơn vị này hoạt động nhất quán trên các thiết bị.

Phần trăm

Một thước đo rất hữu ích khác, tỷ lệ phần trăm cho phép bạn chỉ định các giá trị theo tỷ lệ phần trăm của thuộc tính tương ứng của phần tử mẹ đó.

Thí dụ:

.parent {
  width: 400px;
}

.child { width: 50%; /* = 200px */ }

Đơn vị đo lường trong thế giới thực

Chúng tôi có những đơn vị đo lường được dịch từ thế giới bên ngoài. Hầu như vô dụng trên màn hình, chúng có thể hữu ích cho các bảng định kiểu in. Họ đang:

  • cmmột cm (bản đồ đến 37,8 pixel)
  • mmmột milimét (0,1cm)
  • qmột phần tư milimét
  • inmột inch (bản đồ tới 96 pixel)
  • ptmột điểm (1 inch = 72 điểm)
  • pca pica (1 pica = 12 điểm)

Đơn vị tương đối

  • emlà giá trị được gán cho phần tử đófont-size, do đó giá trị chính xác của nó thay đổi giữa các phần tử. Nó không thay đổi tùy thuộc vào phông chữ được sử dụng, chỉ phụ thuộc vào kích thước phông chữ. Trong kiểu chữ, nó đo chiều rộng củamlá thư.
  • remtương tự nhưem, nhưng thay vì thay đổi kích thước phông chữ phần tử hiện tại, nó sử dụng phần tử gốc (html) cỡ chữ. Bạn đặt kích thước phông chữ đó một lần vàremsẽ là một thước đo nhất quán trên tất cả các trang.
  • exgiống nhưem, nhưng được chèn để đo chiều rộng củam, nó đo chiều cao củaxlá thư. Nó có thể thay đổi tùy thuộc vào phông chữ được sử dụng và kích thước phông chữ.
  • chgiống nhưexnhưng thay vì đo chiều cao củaxnó đo chiều rộng của0(số không).

Viewport đơn vị

  • vwcácđơn vị chiều rộng khung nhìnđại diện cho một tỷ lệ phần trăm của chiều rộng khung nhìn.50vwnghĩa là 50% chiều rộng khung nhìn.
  • vhcácđơn vị chiều cao khung nhìnđại diện cho phần trăm chiều cao của khung nhìn.50vhnghĩa là 50% chiều cao khung nhìn.
  • vmincácđơn vị tối thiểu viewportthể hiện mức tối thiểu giữa chiều cao hoặc chiều rộng theo tỷ lệ phần trăm.30vminlà 30% của chiều rộng hoặc chiều cao hiện tại, tùy thuộc vào chiều rộng hoặc chiều cao nào nhỏ hơn
  • vmaxcácđơn vị tối đa của khung nhìnđại diện cho tối đa giữa chiều cao hoặc chiều rộng theo tỷ lệ phần trăm.30vmaxlà 30% chiều rộng hoặc chiều cao hiện tại, tùy thuộc vào cái nào lớn hơn

Đơn vị phân số

frlà đơn vị phân số và chúng được sử dụng trongLưới CSSđể chia không gian thành phân số.

Tải xuống miễn phí của tôiSổ tay CSS


Các hướng dẫn css khác: