DANH MỤC: UnCategorized

Các đơn vị đo trong CSS


-Trong CSS có hỗ trợ cho chúng ta rất nhiều các đơn vị đo độ dài để áp dụng vào trong các thuộc tính cần đến nó như: width,height,margin,...

-Tuy nhiên các bạn cần chú ý một số điều sau khi sử dụng nó:

  • Không được chứa khoảng trắng ở giữa các con số trong đơn vị đo. VD: 10px (đúng), 1 0 px (sai).
  • Nếu như đơn vị bằng không thì bạn không cần phải thêm đơn vị vào phía sau.

1, Các đơn vị đo.

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

-Đơn vị đo tương đối là đơn vị đo thường được phụ thuộc vào 1 thành phần nào đó thì mới xác định được giá trị của nó. Trong các giá trị đo dưới đây thì các bạn chỉ cần quan tâm cho mình 2 đơn vị đo là em và %, còn lại các đơn vị đo khác hầu như k bao giờ sử dụng đến.

Đơn vị Chú Thích
em 1em = với kích cỡ của font hiện tại (font-size). Tương tự ta có 2em= 2 lần font,... xem demo
ex 1ex = với chiều cao của 1 chữ x (in thường) của font hiện tại xem demo
ch 1ch = chiều rộng của số 0 xem demo
rem giá trị tương đối với font của thành phần gốc xem demo
vw 1vw = 1% của chiều rộng cửa sổ khung hình xem demo
vh 1vh = 1% của chiều cao cửa sổ khung hình xem demo
vmin 1vmin = 1% của khung nhìn nhỏ nhất xem demo
vmax 1vmax = 1% của khung nhìn nhỏ nhất xem demo
% xem demo

Đơn vị đo tuyệt đối.

-Đơn vị đo tuyệt đối là đơn vị đo mà giá trị của nó đã được xác định sẵn rồi, nó sẽ không thay đổi hay phụ thuộc vào 1 thành phần khác. Trong các thành phần phía dưới thì mọi người cũng chỉ cần chú ý đến đơn vị px,pt thôi, còn lại những đơn vị khác rất ít khi được sử dụng đến

Đơn vị Chú Thích
cm centimeters xem demo
mm millimeters xem demo
in inches (1in = 96px = 2.54cm) xem demo
px * pixels (1px = 1/96th of 1in) xem demo
pt points (1pt = 1/72 of 1in) xem demo
pc picas (1pc = 12 pt) xem demo

2, Trình duyệt hỗ trợ.

Đơn vị chorme edge firefox safia opera
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 9.0* 19.0 6.0 20.0
vmax 26.0 Not supported 19.0 7.0 20.0

3, Lời Kết.

-Trong CSS hỗ trợ chúng ta rất nhiều các đơn vị đo và dựa vào đó mọi người có thể chọn ra đơn vị đo phù hợp nhất với dự án của mình!.

Tham khảo: W3C.

Nguồn: Toidicode.com

Thông tin tác giả

Vũ Thanh Tài

Vũ Thanh Tài

The best way to learn is to share

Hãy tham gia group facebook để cùng giao lưu chia sẻ kiến thức! Tham Gia