CSS 단위
CSS는 길이를 표현하기위한 여러 가지 장치가 있습니다.
많은 CSS 속성을 가지고 "length" 등의 폭, 마진, 패딩, 글꼴 크기, 테두리 폭 등의 값을,
길이는 길이 부 뒤에 숫자 같은 10px, 2EM 등이며
공백으로는 수와 유닛 사이에 나타나지 않을 수있다. 값이 0 인 경우,이 장치는 생략 될 수있다.
일부 CSS 속성의 경우, 음의 길이가 허용됩니다.
상대 및 절대 : 단위 길이의 두 종류가있다.
브라우저 지원
표의 수치는 전체 길이 부를지지하는 제 브라우저 버전을 지정.
| 길이 단위 | |||||
|---|---|---|---|---|---|
| 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 | 9.0 * | 19.0 | 6.0 | 20.0 |
| vmax | 26.0 | 지원되지 않음 | 19.0 | 지원되지 않음 | 20.0 |
Note: 인터넷 익스플로러 9가 표준이 아닌 이름으로 VMIN 지원 : VM을.
상대 길이
상대 길이 단위는 다른 길이 속성에 길이 상대적으로 지정합니다. 상대 길이 단위는 다른 표현 매체 사이의 더 나은 확장 할 수 있습니다.
| 단위 | 기술 |
|---|---|
| em | 요소의 글꼴 크기를 기준으로 (2em means 2 times the size of the current font) 그것을 시도를 |
| ex | 현재 글꼴의 x 높이를 기준으로 (rarely used) 그것을 시도 |
| ch | 의 폭에 대하여 "0" (zero) |
| rem | 루트 요소의 상대하기 폰트 크기 |
| vw | 뷰포트의 폭을 1 % 상대 * 그것을 시도 |
| vh | 뷰포트의 높이의 1 %를 기준으로 * 그것을 시도 |
| vmin | 뷰포트의 1 %를 기준으로하면 * 작은 크기는 그것을 시도 |
| vmax | 뷰포트의 1 %를 기준으로 * 더 큰 차원은 그것을 시도 |
| % |
Tip: 전각과 렘 단위는 완벽하게 확장 레이아웃을 만드는 실용적!
* 뷰포트 브라우저 창 크기 =. 뷰포트는 1vw = 0.5 ㎝, 50cm 넓은 경우.
절대 길이
절대 길이 단위는 고정되어 있으며 길이는 이들의 정확히 그 크기로 나타납니다 표현.
화면 크기가 너무 다양하기 때문에 절대 길이 단위는, 화면에 사용하지 않는 것이 좋습니다. 출력 매체는 이러한 인쇄 레이아웃과 같은 공지되어있는 경우는 사용될 수있다.
| 단위 | 기술 |
|---|---|
| cm | 센티미터는 그것을 시도 |
| mm | 밀리미터는 그것을 시도 |
| in | 인치 (1in = 96px = 2.54cm) 그것을 시도 |
| px * | 픽셀 (1px = 1/96th of 1in) 를보십시오 |
| pt | 점 (1pt = 1/72 of 1in) 그것을 시도 |
| pc | 파이 카 (1pc = 12 pt) 를보십시오 |
* 픽셀 (px) 관찰 장치에 상대적이다. 낮은 dpi의 디바이스의 경우, 1 픽셀은 하나의 장치 픽셀입니다 (dot) 디스플레이. 프린터 및 고해상도 스크린의 1 픽셀에 여러 장치의 화소를 의미한다.