CSS의 절대 요소를 크기를 조정하는 두 가지 방법-JS 튜토리얼-php.cn

CSS의 절대 요소를 크기를 조정하는 두 가지 방법

한동안 CSS를 사용한 사람은 누구나 절대 및 상대적 위치의 장점에 대해 알게 될 것입니다. 요약 : 위치 : 상대는 원래 위치에서 수평 (왼쪽 또는 오른쪽 사용) 또는 수직 (상단 또는 하단 사용)을 원래 위치에서 이동할 수 있습니다. 위치 : Absolute는 왼쪽, 오른쪽, 상단 또는 하단을 사용하는 포함 블록과 관련하여 요소를 배치 할 수 있습니다. (함유 블록은 상대, 절대 또는 고정 위치의 가장 가까운 조상 노드입니다). 따라서 포지셔닝 노드는 간단합니다 (예 : HTML : CSS의 절대 요소를 크기를 조정하는 두 가지 방법

CSS :

<div >
	<div ></div>
</div>

로그인 후 복사

(테두리의 추가로 인해 내부 블록의 실제 너비와 높이가 100px입니다). 다음 상자는 모든 최신 브라우저 (IE6 포함)에서 렌더링됩니다. 덜 잘 알려진 것은 왼쪽, 오른쪽, 상단 및 하단을 모두 적용 할 수 있다는 것입니다. 동시에 속성. 다음 CSS는 내부 요소를 동일하게 렌더링합니다.

#outer
{
	position: relative;
	width: 200px;
	height: 200px;
	margin: 20px auto;
	border: 2px solid #c00;
}

#inner
{
	position: absolute;
	left: 50px;
	top: 50px;
	width: 96px;
	height: 96px;
	background-color: #ddc;
	border: 2px solid #00c;
}

로그인 후 복사

내부 상자의 너비와 높이는 100px로 유지되지만 치수를 명시 적으로 설정할 필요는 없습니다. 이것은 다음과 같은 경우에 유용 할 수 있습니다. 요소 주위의 간격은 너비 또는 높이보다 더 중요합니다. 또한 네거티브 왼쪽, 오른쪽, 상단 및/또는 하단 속성을 사용하여 외부 상자보다 내부 상자를 더 크게 만듭니다. 테두리와 패딩이 다르지만 일관된 외부 간격이 필요합니다. 이 방법은 모든 요소에 대해 단일 스타일을 만들 수 있습니다.

#inner
{
	position: absolute;
	left: 50px;
	right: 50px;
	top: 50px;
	bottom: 50px;
	background-color: #ddc;
	border: 2px solid #00c;
}

로그인 후 복사

JavaScript 애니메이션은 결과 폭과 높이를 계산할 필요가없는 경우 요소를보다 쉽고 빠르게 조정할 수 있으므로 이점을 얻을 수 있습니다.

CSS 크기 및 절대 포지셔닝에 대한 자주 묻는 질문 (FAQ) CSS의 절대 위치와 상대 위치의 차이는 무엇입니까?

CSS에서 절대와 상대는 두 가지 유형의 위치 지정 방법입니다. 절대 포지셔닝을 사용하면 가장 가까운 위치 조상에 대해 요소를 배치 할 수 있습니다. 이것은 요소가 문서의 정상 흐름에서 벗어나고 페이지 레이아웃의 요소에 대한 공간이 생성되지 않음을 의미합니다. 반면에, 상대 위치는 요소를 정상 위치에 비해 배치 할 수있게한다. 이것은 포지셔닝이 문서 흐름에서 요소의 원래 위치와 관련이 있으며 페이지 레이아웃에서 공간이 여전히 보존되어 있음을 의미합니다. '위치 : 절대'속성은 CSS에서 어떻게 작동합니까?

CSS의 '위치 : 절대'속성은 일반 문서 흐름에서 요소를 제거하고 가장 가까운 위치 조상 또는 초기 포함 블록에 비해 지정된 위치에 위치합니다. 위치 된 요소는‘상단’,‘오른쪽’,‘맨 아래’및‘왼쪽’속성을 사용하여 움직일 수 있습니다. 그러나 조상 요소가 '정적'이외의 위치를 갖지 않으면 초기 포함 블록이 대신 사용됩니다.

CSS의 '상단', '오른쪽', '하단'및 '왼쪽'속성의 사용은 무엇입니까? '상단', '오른쪽', '맨 아래'및 '왼쪽'속성은 요소를 고정시키는 데 사용됩니다. 이러한 특성은 위치가있는 요소에만 영향을 미칩니다. 요소와 포함 요소의 하나 이상의 측면 사이의 거리를 지정합니다. 예를 들어,‘Top : 20px’는 요소의 상단 가장자리가 포함 요소의 상단 가장자리에서 20px 떨어져 있음을 의미합니다.

CSS의 절대적으로 위치가있는 요소를 중심으로하는 방법은 무엇입니까?

절대적으로 위치 된 요소를 중심으로 '왼쪽'과 '변환'특성을 함께 사용할 수 있습니다. 먼저,‘왼쪽 : 50%’를 설정하여 요소의 왼쪽 가장자리를 부모의 중심으로 이동하십시오. 그런 다음‘Transform : TranslateX (-50%)’를 사용하여 요소를 자체 너비의 절반으로 다시 끌어 당기고 효과적으로 중심을 중심으로합니다.

CSS의 '절대'와 '고정'위치의 차이점은 무엇입니까? '절대'와 '고정 된'위치는 정상적인 문서 흐름에서 요소를 제거하는 동안 요소가있는 방법을 제거합니다. '절대'는 가장 가까운 위치 조상 또는 초기 포함 블록에 비해 요소를 위치시킵니다. 반면에‘고정’은 브라우저 창에 대한 요소를 배치합니다. 이것은 페이지를 스크롤하더라도 고정 요소가 움직이지 않음을 의미합니다. CSS는 겹치는 요소를 어떻게 처리합니까?

CSS는 'z-index'속성을 사용하여 겹치는 요소를 처리합니다. 이 속성은 z 축의 위치 인 요소의 스택 순서를 지정합니다. 'z-index'가 더 높은 요소가 'z-index'가 더 낮은 요소 앞에 표시됩니다.

CSS의 초기 포함 블록은 무엇입니까?

CSS에 초기 포함 블록은 루트 요소 (HTML)가 존재하는 포함 블록입니다. 일반적으로 브라우저 창의 뷰포트이지만 루트 요소의 '오버플로'속성이 '가시적'이 아닌 경우 페이지 상자 일 수도 있습니다.

요소가 부모 요소의 전체 너비와 높이를 채우게 할 수있는 방법은 무엇입니까?

요소가 전체 너비와 높이를 부모 요소의 전체 너비와 높이를 채우게하려면 '높이'및 '100'을 사용할 수 있습니다. 이것은 요소를 포함 요소만큼 넓고 키가 크게 만듭니다.

CSS의 '폭'과 '최대 width'의 차이점은 무엇입니까?

CSS의 '폭'속성은 요소의 내용 너비를 지정하는 반면, '최대 세포'속성은 컨텐츠가 지정된 너비보다 클 때 요소가 늘릴 수있는 최대 너비를 설정합니다. 콘텐츠가 '최대 width'보다 작 으면 콘텐츠가 자연적인 크기로 유지됩니다.

요소가 크기가 크기 때문에 종횡비를 유지할 수있는 방법을 사용하여 요소가 조정 대상이되면 CSS의 '종횡비'속성을 사용할 수 있습니다. 이 속성은 상자의 종횡비를 정의하는데, 이는 높이와 높이의 비율입니다. 예를 들어,‘Sateg-Ratio : 16 / 9’는 16 : 9 종횡비를 유지합니다.

위 내용은 CSS의 절대 요소를 크기를 조정하는 두 가지 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!