CSS 단원 설명...
9110 단어 learnunitsbasicsmeasurements
CSS 유닛이란 무엇입니까?
CSS 단위는 여백, 너비, 높이, 채우기, 글꼴 크기 등 속성의 크기를 결정하는 데 사용되는 숫자 유형의 값입니다.
margin: 10px;
font-size: 24px;
padding: 12px;
width: 300px;
height: 300px;
margin는 재산이고, 10px는 재산의 가치다.px는 픽셀이라고 하는 CSS 유닛입니다.CSS에 사용되는 세 가지 길이 유형:
절대 단위
다른 곳의 절대 단위는 모두 고정되어 있다.또한 출력 장치가 더 높은 해상도를 가지고 있다면, 그것은 여전히 절대적이다.나는 다른 어떤 것도 상관없다. 나는 앉아서 항상 같은 몸매를 유지한다.
여기서 더 높은 해상도의 출력 매체는 레이저 프린터로 레이저 프린터에서 1센티미터의 단위는 정확해야 한다. 1센티미터.그러나 컴퓨터 화면 등 저해상도 장치에서는 결과가 종종 다르다.실제 효과를 보려면 상자
width: 3cm와 상자height: 3cm를 생성하고 배율 측정을 사용하여 차이를 분명하게 확인할 수 있습니다.너는 절대 단위 작전 경험이 있을 것이다.예를 들어, 청구서 영수증이나 Adobe InDesign에서 작업할 수 있는 기회에 대한 플롯 스타일 테이블을 작성할 때 모든 플롯 메트릭이 절대 단위로 나열됩니다.InDesign을 사용하여 책을 작성하므로 단위는 필요한 출력을 정확하게 인쇄하기 위해 절대적이어야 합니다.
절대 단위는 책, 문서 및 플롯 스타일 테이블을 인쇄할 때 유용합니다.
절대 단위:
cm1cm=96px/2.5437.79527559055118px
mm1밀리미터 = 1센티미터의 10분의 1Q1Q=1cm의 1/40in1인치 = 2.54cm96px
pc1pc=12pt=1인치의 6분의 1pt1pt=1인치의 1/72px1px = 1인치 1/96픽셀🎯
픽셀을 권장하며 화면에서 널리 사용하는 것이 좋습니다.픽셀은 화면 픽셀과 무관합니다.그것은 사실상 시각 단위다.pixel에 대한 더 자세한 정보는 이 페이지article를 참조하십시오.
CSS의 픽셀
픽셀은 화면에 있는 요소의 크기를 고정하는 데 사용됩니다.
절대 단위는 언제 사용됩니까?
보시다시피 언제든지 우리의 목표가 응답이 신속하고 유연한 사이트를 만드는 것이라면 당신은 절대 단위의 사용을 피해야 합니다.그러나 우리가 원소를 스트레칭하고 싶지 않은 곳에서는 절대 단위가 유용하다.예: 플래그
예!이것이 바로 절대 단위다.
상대 단위
상대 단위는 다른 길이에 상대적인 길이를 지정합니다. 즉, 상대 단위는 글꼴이나 뷰포트 크기와 같은 부모 요소에 상대적인 길이입니다.
상대 단위를 사용하면 글꼴 크기, 채우기 또는 페이지의 다른 모든 요소를 기준으로 배율을 조정할 수 있습니다.다음은 웹 개발에서 가장 유용한 단원입니다.
상대 길이 단위🎯
HTML 문서의 기본 글꼴 크기는 16px입니다.그래서 1em는 16px와 같다.CSS에서 one
em은 지정된 글꼴의 글꼴 크기 값으로 정의됩니다.요소의 글꼴 크기가 14px인 경우 요소의 서식1em은 14px과 같습니다.If the user resizes their text or you decide to make font-size larger or smaller in your stylesheet the em length unit will scale proportionately.
이 예에서, 글씨체의 크기를 조정할 때, 어떻게 비례를 유지하는지 보여 드리겠습니다.
위의 예에서 나는 두 개의div원소를 만들었는데 유형명은 각각
box1과box2이다.box1 너비와 높이는 3em, 글꼴 크기는 16px로 설정합니다.box2의 너비와 높이는 3em, 글꼴 크기는 32px로 설정합니다.결과 부분에서 이 두 상자의 크기가 다르다는 것을 볼 수 있습니다.그러나 이 두 개의div폭은 같지만 글꼴 크기는 다르다.그래서 너비와 높이의 비율은 정비례한다.이것이 바로 em의 원소에 대한 작업 방식이다.
여기서, 나는 당신에게 em가 부모 요소와 어떻게 관련된 또 다른 예시를 보여 줄 것입니다.
위의 예에서
box1와 box2류는 모두 서로 다른 글씨체 크기를 가지고 있다.박스 1클래스의 글꼴 크기는 16px이고, 박스 2클래스의 글꼴 크기는 32px입니다.부모 요소의 글꼴 크기가 다르기 때문에 things div 요소의 너비와 높이의 차이를 볼 수 있습니다.그래서 em는 그들의 부원소에 대한 것이다.렘🎯
rem 단위는 em와 유사합니다. 그러나 em는 현재 요소의 글꼴 크기에 비해, em는 루트 요소의 글꼴 크기에 대해 사용합니다.기본적으로 루트 요소 글꼴 크기는 16px입니다.그래서 1rem은 16px입니다.
% 퍼센트🎯
백분율 단위는 부모 크기와 관계가 있다.
전임
ex unit는 요소의 현재 글꼴의 자모 x 높이와 관련이 있습니다.
중국 명사
현재 요소 글꼴에서 glyph "0"(유니코드 문자 U+0030을 0으로 설정)의 폭을 표시하거나 더 정확히 말하면 선행 도량을 나타낸다.
뷰포트 단위
CSS3에는 뷰포트 상대 크기 셀이라는 수퍼 복사 셀이 있습니다.이러한 단위는 뷰포트 탐색기 창, 플롯 가능 영역 및 모바일 장치 표시의 크기에 따라 계산됩니다.
카드 리더기 창에 상대적인 크기를 지정할 수 있는 뷰포트 단위를 설명했습니다.그것은 휴대전화, 데스크톱, 태블릿PC 등등이 될 수 있다.
뷰포트 단위는 vw, vh, vmin, vmax
vw(뷰포트 폭)
뷰포트 너비는 윈도우 너비의 1/100입니다.예를 들어, 1920 x 1080 화면 해상도의 경우 1vw=19.2 픽셀 너비.그러나 브라우저는 뷰포트 크기를 스크롤 막대를 포함한 브라우저 창으로 계산합니다.뷰포트의 폭은 HTML 요소의 폭보다 큽니다.
viewport > html > body
따라서 원소 100vw를 설정하면 HTML과 바디 원소 밖으로 확장됩니다.이러한 미세한 차이로 인해 요소가 페이지의 전체 너비에 걸쳐 있을 때는 뷰포트 단위가 아닌 백분율 단위를 사용하는 것이 좋습니다.
vh(뷰포트 높이)🎯
child div height를 화면 전체 높이로 설정하려면 어떻게 해야 합니까?상위 요소 높이를 100%로 지정하고 하위 요소 높이를 100%로 지정하여 원하는 출력을 얻을 수 있습니다.
여기
vh에서 구조하러 왔어요.깊이 중첩된 하위 요소의 임의의 위치vh를 지정할 수 있습니다.뷰포트 치수를 기준으로 크기를 조정할 수 있습니다.예를 들어, vh를 사용하여 전체 화면 보기 배경을 설정할 수 있습니다.vh > %
vmin
단위는 뷰포트 너비와 높이의 1/100이며 작은 자를 기준으로 합니다.예를 들어, 뷰포트 폭이 937픽셀이고 높이가 650픽셀인 경우 1vmin은 6.5px와 같습니다.
vmax
단위는 뷰포트 너비와 높이의 1/100이며 큰 자를 기준으로 합니다.예를 들어, 뷰포트 폭이 937픽셀이고 높이가 650픽셀이면 1vmax는 9.37px와 같습니다.이 뷰포트는 전체 뷰포트 인터페이스를 쉽게 작성합니다.
이것이 CSS 셀의 전체 내용입니다.즐겁게 놀고 적당한 직장을 사용하세요.
도구책
Reference
이 문제에 관하여(CSS 단원 설명...), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/cheralathann/css-units-explained-3178텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
