Đơ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 lấy các giá trị "độ dài", chẳng hạn như width , margin , padding , font-size , v.v.
Độ dài là một số theo sau là đơn vị độ dài, chẳng hạn như 10px , 2em , v.v.
Ví 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 ý: Giữa số và đơn vị không được có khoảng trắng. Tuy nhiên, nếu giá trị là 0 thì đơn vị có thể được bỏ qua.
Đối với một số thuộc tính CSS, độ dài âm được cho 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 với kích thước đó.
Đơn vị độ dài tuyệt đối không được khuyến khích 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 phương tiện đầu ra, chẳng hạn như đối với bố cục in.
| Unit | Description |
|---|---|
| cm | centimeters Try it |
| mm | millimeters Try it |
| in | inches (1in = 96px = 2.54cm) Try it |
| px * | pixels (1px = 1/96th of 1in) Try it |
| pt | points (1pt = 1/72 of 1in) Try it |
| pc | picas (1pc = 12 pt) Try it |
* Pixel (px) có liên quan đến thiết bị xem. Đối với các thiết bị có độ phân giải thấp, 1px là một pixel (chấm) thiết bị 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 của thiết bị.
Độ dài tương đối
Đơn vị độ dài tương đối chỉ định độ dài tương ứng với thuộc tính độ dài khác. Đơn vị độ dài tương đối có tỷ lệ tốt hơn giữa các phương tiện hiển thị khác nhau.
| Unit | Description | |
|---|---|---|
| em | Relative to the font-size of the element (2em means 2 times the size of the current font) | Try it |
| ex | Relative to the x-height of the current font (rarely used) | Try it |
| ch | Relative to the width of the "0" (zero) | Try it |
| rem | Relative to font-size of the root element | Try it |
| vw | Relative to 1% of the width of the viewport* | Try it |
| vh | Relative to 1% of the height of the viewport* | Try it |
| vmin | Relative to 1% of viewport's* smaller dimension | Try it |
| vmax | Relative to 1% of viewport's* larger dimension | Try it |
| % | Relative to the parent element | Try it |
Mẹo: Đơ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 thì 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 |
