CSS의 하단 속성 구문

CSS의 하단 속성 구문 및 코드 예제

CSS에서 하단 속성은 요소와 컨테이너 하단 사이의 거리를 지정하는 데 사용됩니다. 상위 요소의 아래쪽을 기준으로 요소의 위치를 ​​제어합니다.

bottom 속성의 구문은 다음과 같습니다.

element {
    bottom: value;
}

여기서 element는 스타일이 적용될 요소를 나타내고 value는 설정할 아래쪽 값을 나타냅니다.

값은 픽셀(px) 또는 백분율(%)과 같은 특정 길이 값일 수 있습니다. 음수 또는 0과 같은 특정 숫자일 수도 있습니다. 또한 하단 속성은 auto,initial,inherit와 같은 일부 CSS 키워드 값을 사용할 수도 있습니다.

다음으로 구체적인 코드 예시를 살펴보겠습니다.

예 1:
높이가 300px인 상위 요소와 높이가 100px인 하위 요소가 있다고 가정합니다. 우리는 하위 요소가 상위 요소의 하단에서 20px 떨어진 곳에 위치하도록 하고 싶습니다.

HTML 코드:

<div class="parent">
    <div class="child"></div>
</div>

CSS 코드:

.parent {
    height: 300px;
    position: relative;
}

.child {
    height: 100px;
    position: absolute;
    bottom: 20px;
}

위 코드에서는 상위 요소에 대한 상대 위치를 설정하여 이에 따라 하위 요소가 배치될 수 있도록 했습니다. 그런 다음 하위 요소의 절대 위치를 설정하고 하단 속성을 20px로 설정합니다. 이렇게 하면 하위 요소가 상위 요소의 하단에서 20px 위치에 배치됩니다.

예 2:
하단 속성의 값을 백분율로 설정할 수도 있습니다.

HTML 코드:

<div class="parent">
    <div class="child"></div>
</div>

CSS 코드:

.parent {
    height: 300px;
    position: relative;
}

.child {
    height: 100px;
    position: absolute;
    bottom: 50%;
}

이 예에서는 하위 요소의 하단 속성을 50%로 설정합니다. 즉, 하위 요소는 상위 요소의 아래쪽 중앙에 배치됩니다.

예 3:
bottom 속성의 값을 auto로 설정하면 하위 요소는 일반적인 문서 흐름에 따라 배치됩니다.

HTML 코드:

<div class="parent">
    <div class="child"></div>
</div>

CSS 코드:

.parent {
    height: 300px;
}

.child {
    height: 100px;
    margin-top: 200px; /* 将子元素移至父元素底部 */
    position: relative;
    bottom: auto;
}

이 예에서는 margin-top 속성을 사용하여 하위 요소를 상위 요소의 맨 아래로 이동합니다. 그런 다음 하단 속성을 자동으로 설정하면 하위 요소가 일반적인 문서 흐름에 따라 배치됩니다.

요약:
CSS의 하단 속성은 요소와 컨테이너 하단 사이의 거리를 지정하는 데 사용됩니다. 픽셀, 백분율, 숫자 또는 키워드 값으로 설정할 수 있습니다. 하단 속성을 적절하게 적용하면 페이지에서 요소의 위치를 ​​쉽게 제어할 수 있습니다. 이 글이 CSS의 하단 속성을 이해하고 사용하는 데 도움이 되기를 바랍니다.

위 내용은 CSS의 하단 속성 구문의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!