왼쪽 및 오른쪽 가능성 값에 대한 CSS 가장자리 오프셋 거리 분석

이 글은 주로 왼쪽과 오른쪽 가능성 값에 대한 CSS 가장자리 오프셋 거리 분석을 소개합니다. 이제 특정 참조 값이 있으므로 도움이 필요한 친구들에게 참고할 수 있습니다.

1) '왼쪽'과 '오른쪽'의 설정 값이 모두 "자동"입니다.

왼쪽이 '자동'인 경우 계산된 값은 오른쪽의 음수 값입니다(예: 상자 영역은 오른쪽을 기준으로 함). 값이 왼쪽으로 이동함). right가 'auto'로 지정된 경우 계산된 값은 왼쪽 값의 음수입니다.
샘플 코드:

<p style="width:20px; height:20px; background-color:red; position:relative; left:100px;"></p>

3) '왼쪽'과 '오른쪽' 설정 값 모두 '자동'이 아닙니다.

샘플 코드:

<p style="width:100px; height:100px; overflow:auto; border:1px solid blue;"> 
<p style="width:20px; height:20px; background-color:red; position:relative; left:60px; right:60px;"></p> 
</p>

'top' 및 'bottom' 속성은 크기를 변경하지 않고 상대적으로 위치가 지정된 요소를 위 또는 아래로 이동합니다. 'top'은 상자를 아래로 이동하고 'bottom'은 상자를 위로 이동합니다. 'top' 및 'bottom'은 상자를 분할하거나 늘리지 않으므로 계산된 값은 항상 top=-bottom입니다. 둘 다 "auto"인 경우 계산된 값은 0이 됩니다. 둘 중 하나가 auto이면, 이는 다른 것의 음수 값입니다. 둘 다 "auto"가 아닌 경우 'bottom'은 무시됩니다. 이 경우 계산된 'bottom' 값은 'top' 값의 음수가 됩니다.

위 내용은 모두의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 추천:

# 🎜🎜#CSS에서 음수 여백 값을 사용하여 중앙 위치를 조정하는 방법

위 내용은 왼쪽 및 오른쪽 가능성 값에 대한 CSS 가장자리 오프셋 거리 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!