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

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

# 🎜🎜#CSS의 가장자리 오프셋 거리는 레이아웃에서 특정 역할을 합니다. 다음은 왼쪽과 오른쪽의 가능한 모든 값에 대한 간략한 소개입니다. 관심이 있는 경우 이 기사를 참조하면 도움이 될 수 있습니다. css 학습시 여러분에게 # 🎜🎜#

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

'왼쪽'과 '오른쪽'의 값이 '는 둘 다 "auto"(초기값)이고 계산된 값은 0입니다(예를 들어 상자는 원래 위치에 유지됩니다). 2) '왼쪽' 또는 '오른쪽' 중 하나의 설정 값은 "자동"입니다.

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

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

위 코드에서 p 요소는 상대적으로 위치가 지정된 요소이며 '왼쪽' 값은 "100px"이고 '오른쪽'은 설정되지 않았으며 기본값은 "auto" 이면 'right' 속성의 계산된 값은 -left, 즉 "right:-100px"여야 합니다.

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

'왼쪽'과 '오른쪽' 모두 '자동'이 아닌 경우 위치 지정이 된 것처럼 보입니다. 매우 터무니없는 일이었고 그 중 하나는 버려야 했습니다. 포함 블록의 '방향' 속성이 "ltr"인 경우 '왼쪽'이 우선하고 '오른쪽' 값은 -left가 됩니다. 포함 블록의 '방향' 속성이 'rtl'인 경우 '오른쪽'이 우선하고 '왼쪽' 값은 무시됩니다.

샘플 코드:

<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'은 상자를 분할하거나 늘리지 않으므로 계산된 값은 항상 top=-bottom입니다. 둘 다 "auto"인 경우 계산된 값은 0이 됩니다. 둘 중 하나가 auto이면, 이는 다른 것의 음수 값입니다. 둘 다 "auto"가 아닌 경우 'bottom'은 무시됩니다. 이 경우 계산된 'bottom' 값은 'top' 값의 음수가 됩니다.

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

관련 추천:

CSS 배너 이미지의 반응형 중심 표시 방법에 대하여

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

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