CSS Units

21/05/2019

« Bài trước

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

Nhiều thuộc tính CSS lấy giá trị theo độ dài như margin, padding, width, font-size,...

Độ dài là một số và kèm theo đơn vị, ví dụ như: 10px, 2em,....

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, thì có thể không cần đơn vị.

Một số thuộc tính CSS, giá trị âm vẫn được chấp nhận.

Có 2 loại đơn vị chiều dài: tuyệt đối và tương đối (absolute và relative).

Giá trị tuyệt đối - absolute

Đơn vị độ dài tuyệt đối là cố định và độ dài thể hiện đúng kích thước như số mô tả.

Đơn vị độ dài tuyệt đối không được khuyến nghị sử dụng trên màn hình, vì kích thước màn hình rất khác nhau. Tuy nhiên, chúng có thể được sử dụng nếu biết kích thước màn hình đầu ra.

Unit    Mô tả
    cm    centimet
    mm    milimet
    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)

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

Giá trị tương đối - relative

Đơn vị độ dài tương đối xác định độ dài tương đối với thuộc tính độ dài khác. Đơn vị độ dài tương đối scale tốt hơn đối với các thiết bị khác nhau.

Unit    Mô tả
    em    Tương đối với font-size ( 2em nghĩa là gấp 2 lần font-size hiện tại.)
    ex    Tương đối với chiều cao của font hiện tại (ít khi dùng).
    ch    Kích thước font chữ so với chiều rộng của số "0".
    rem    Tương đối so với font-size của body.
    vw    Tương đối so với 1% chiều rộng của viewport.
    vh   Tương đối so với 1% chiều cao của viewport.
    vmin   Tương đối so với 1% của viewport * kích thước nhỏ nhất.
    vmax   Tương đối so với 1% của viewport * kích thước lớn nhất.
    %    Tương đối so với phần tử cha.

Chú ý: Các đơn vị em và rem khá hoàn hảo cho scale layout.
* Viewport = Kích thước của trình duyệt. Nếu viewport là rộng 50cm, 1vw = 0.5cm.

Browser Support

CSS Units

Chú ý: Internet Explorer 9 hỗ trợ vmin với không theo chuẩn là: vm.

« Bài trước
Back to top