Đơn vị CSS
Đơn vị CSS
CSS có một số đơn vị khác nhau để thể hiện độ dài.
Nhiều thuộc tính CSS nhận các giá trị "độ dài", chẳng hạn như
width,,, v.v.marginpaddingfont-size
Độ dài là một số theo sau là đơn vị độ dài, chẳng hạn như 10px,
2emv.v.
Thí dụ
Đặt các giá trị độ dài khác nhau, sử dụng px (pixel):
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: tuyệt đối và tương đối .
Độ dài tuyệt đối
Các đơn vị độ dài tuyệt đối là cố định và độ dài được biểu thị bằng bất kỳ đơn vị nào trong số này sẽ xuất hiện chính xác như kích thước đó.
Đơ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 thay đổi rất nhiều. Tuy nhiên, chúng có thể được sử dụng nếu phương tiện đầu ra được biết, chẳng hạn như cho bố cục in.
| Unit | Description |
|---|---|
| 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) |
* Điểm ảnh (px) có liên quan đến thiết bị xem. Đối với các thiết bị dpi thấp, 1px là một pixel thiết bị (chấm) của màn hình. Đối với máy in và màn hình có độ phân giải cao, 1px ngụ ý nhiều pixel thiết bị.
Độ dài tương đối
Đơ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 chia tỷ lệ tốt hơn giữa các phương tiện kết xuất khác nhau.
| Unit | Description | |
|---|---|---|
| em | Relative to the font-size of the element (2em means 2 times the size of the current font) | |
| ex | Relative to the x-height of the current font (rarely used) | |
| ch | Relative to width of the "0" (zero) | |
| rem | Relative to font-size of the root element | |
| vw | Relative to 1% of the width of the viewport* | |
| vh | Relative to 1% of the height of the viewport* | |
| vmin | Relative to 1% of viewport's* smaller dimension | |
| vmax | Relative to 1% of viewport's* larger dimension | |
| % | Relative to the parent element |
Mẹo: Các đơn vị em và rem rất thiết thực trong việc tạo bố cục có thể mở rộng hoàn hảo!
* Viewport = kích thước cửa sổ trình duyệt. Nếu khung nhìn rộng 50cm, 1vw = 0,5cm.
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ đơn vị độ dài.
| Length Unit | |||||
|---|---|---|---|---|---|
| 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 | 12.0 | 19.0 | 6.0 | 20.0 |
| vmax | 26.0 | 16.0 | 19.0 | 7.0 | 20.0 |