Đơn vị trong CSS - CSS Units

  • Thanh Vo

    Tác giả

    Thanh Vo

  • Ngày đăng

    8 thg 11, 2022

  • Số lượt xem

    489 lượt xem


Để làm việc với các kích thước thì CSS cung cấp cho chúng ta các loại đơn vị khác nhau.

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: absoluterelative.

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ẹ

Tổng số đánh giá: 0

Xếp hạng: 5 / 5 sao

Danh sách bài học về CSS

Liên Kết Chia Sẻ

Đây là liên kết chia sẻ bới cộng đồng người dùng, chúng tôi không chịu trách nhiệm gì về nội dung của các thông tin này. Nếu có liên kết nào không phù hợp xin hãy báo cho admin.