Mọi đơn vị CSS: tuyệt đối, theo phông chữ, theo khung nhìn, các hàm giá trị linh hoạt, cùng các đơn vị góc, thời gian và độ phân giải — đơn vị nào được đo so với cái gì và khi nào nên dùng.
Đơn vị tuyệt đối (px, pt) giữ kích thước cố định bất kể ngữ cảnh; đơn vị tương đối (rem, vw, %) co giãn theo một giá trị tham chiếu. Hãy ưu tiên rem cho cỡ chữ: nó tôn trọng cỡ chữ gốc do người dùng đặt, nên kiểu chữ của bạn ghi nhận tùy chọn trợ năng của họ. Dùng clamp() cho kiểu chữ linh hoạt, phóng to và thu nhỏ theo khung nhìn nhưng không bao giờ vượt quá giới hạn tối thiểu hay tối đa.
Bảng tham chiếu · 38 mục
Đơn vị CSSExplained
38 of 38 rows
Tuyệt đối
1/96 inch (pixel tham chiếu của CSS).
Kích thước cố định cho UI: viền, đường hairline, kích thước icon.
border: 1px solid #000;
1/72 inch (1pt = 1.333px).
Stylesheet in ấn, nơi kích thước ánh xạ sang giấy vật lý.
font-size: 12pt;
1 centimet (≈37.8px).
Bố cục in cần đo lường theo kích thước thực.
margin: 2cm;
1 milimet (≈3.78px).
Đo lường in chính xác ở mức mịn.
padding: 5mm;
1 inch (96px = 2.54cm).
Bố cục in với kích thước tính bằng inch.
margin: 1in;
Theo phông chữ
Cỡ chữ của chính phần tử (kế thừa từ phần tử cha).
Khoảng cách co giãn cùng với chữ xung quanh.
padding: 1em;
Cỡ chữ của phần tử gốc (phần tử html).
Cỡ chữ: nó tôn trọng cài đặt cỡ chữ gốc của người dùng.
font-size: 1.25rem;
Chiều rộng tiến của glyph '0' trong phông hiện tại.
Đặt chiều dài dòng dễ đọc (số ký tự mỗi dòng).
max-width: 70ch;
Chiều cao x của phông hiện tại (chiều cao của chữ thường 'x').
Đo dọc gắn với phông chữ.
line-height: 2ex;
Chiều cao chữ hoa của phông hiện tại (chiều cao của một chữ in hoa).
Đo dọc theo chiều cao chữ hoa, gọn hơn ex.
padding-top: 0.5cap;
Chiều rộng tiến của chữ tượng hình '水' (nước) trong phông hiện tại.
Kích thước bám theo một ô ký tự CJK.
width: 4ic;
Chiều cao dòng đã tính của chính phần tử.
Định kích thước phần tử theo từng dòng chữ nguyên.
height: 3lh;
Chiều cao dòng của phần tử gốc.
Khoảng cách theo bội số chiều cao dòng cơ bản của tài liệu.
margin-block: 2rlh;
Theo khung nhìn
Giá trị của cùng thuộc tính trên phần tử cha.
Bố cục linh hoạt theo kích thước phần tử chứa.
width: 50%;
1% chiều rộng khung nhìn.
Các dải tràn viền full-bleed theo chiều rộng màn hình.
width: 100vw;
1% chiều cao khung nhìn.
Phần hero hoặc lớp phủ phủ kín chiều cao màn hình.
height: 100vh;
1% chiều khung nhìn nhỏ hơn.
Định kích thước phần tử vừa màn hình ở mọi hướng xoay.
font-size: 5vmin;
1% chiều khung nhìn lớn hơn.
Lấp đầy trục chiếm ưu thế của khung nhìn.
font-size: 5vmax;
1% chiều cao khung nhìn nhỏ (giao diện trình duyệt hiện đầy đủ).
Phần full-height trên mobile vừa vặn trên thanh trình duyệt mở rộng.
height: 100svh;
1% chiều cao khung nhìn lớn (giao diện trình duyệt ẩn).
Nền phủ phải che kín màn hình ngay cả khi thanh trình duyệt thu gọn.
height: 100lvh;
1% chiều cao khung nhìn động, bám theo giao diện trình duyệt khi hiện và ẩn.
Cách sửa cho 100vh trên mobile: chiều cao thay đổi khi thanh trình duyệt xuất hiện.
height: 100dvh;
1% chiều rộng khung nhìn nhỏ.
Phiên bản chiều rộng của svh cho trạng thái khung nhìn hẹp nhất.
width: 100svw;
1% chiều rộng khung nhìn lớn.
Phiên bản chiều rộng của lvh cho trạng thái khung nhìn rộng nhất.
width: 100lvw;
1% chiều rộng khung nhìn động, bám theo giao diện trình duyệt.
Phiên bản chiều rộng của dvh khi khung nhìn đổi kích thước cùng thanh trình duyệt.
width: 100dvw;
1% kích thước khung nhìn theo trục inline (chiều rộng trong chế độ viết ngang).
Định cỡ theo khung nhìn tuân theo hướng viết.
width: 50vi;
1% kích thước khung nhìn theo trục block (chiều cao trong chế độ viết ngang).
Định cỡ theo khung nhìn giữ đúng trong chế độ viết dọc.
height: 50vb;
Linh hoạt
Giá trị ưu tiên bị chặn giữa mức tối thiểu và tối đa.
Kiểu chữ linh hoạt không bao giờ vượt giới hạn tối thiểu hay tối đa.
width: clamp(320px, 80vw, 1100px);
Giá trị nhỏ nhất trong các đối số phân tách bằng dấu phẩy.
Giới hạn trên cho một kích thước để không bao giờ vượt mức tối đa.
width: min(100%, 600px);
Giá trị lớn nhất trong các đối số phân tách bằng dấu phẩy.
Ép mức kích thước tối thiểu tăng theo khung nhìn.
width: max(50%, 300px);
Góc
1/360 của một vòng tròn đầy.
Biến đổi xoay và vị trí góc gradient.
transform: rotate(45deg);
Radian; 1rad ≈ 57.2958deg.
Góc tính từ toán học, chẳng hạn biến đổi được sinh tự động.
transform: rotate(1.5708rad);
Gradian; 400grad = một vòng tròn đầy.
Giá trị góc kiểu cũ hoặc kiểu đo đạc địa chính.
transform: rotate(100grad);
1turn = một vòng tròn đầy 360°.
Vòng nguyên hoặc nửa vòng đọc được ngay lập tức.
transform: rotate(0.5turn);
Thời gian
Một giây.
Thời lượng animation và transition.
transition: opacity 0.3s;
Một mili-giây (1s = 1000ms).
Animation phản hồi UI ngắn và các độ trễ.
animation-duration: 150ms;
Độ phân giải
Số chấm trên mỗi inch đầu ra.
Media query độ phân giải nhắm đến in ấn.
@media (min-resolution: 300dpi)
Số chấm trên mỗi đơn vị px; 1dppx bằng màn hình 96dpi chuẩn.