반응형
CSS 속성에서 '자동'값의 의미는 무엇입니까?
auto
CSS 속성 값의 의미는 무엇입니까? CSS 속성의 값이로 설정되면 auto
어떻게 검증?
속성 값의 해당은 요소의 내용 또는 컨텍스트에 따라 자동으로 조정 됩니다 .
예를 height: auto
들어 있는 블록 수준 요소 는 더 많은 텍스트를 포함할수록 더 커집니다. 다른 예로, 블록 요소 margin: 0 auto
는 뷰포트의 y 축을 따라 중앙에 위치 할 때까지 왼쪽 및 오른쪽 여백이 증가합니다.
값을 제공하는 속성에 따라 다르며 다른 속성은 콘텐츠와 따라 다르게 작동합니다.
자동은 자동으로 광고됨을 의미합니다. 내가 자동을 사용하는 가장 일반적인 이유는 다음과 같습니다.
margin: 0 auto;
요소를 중앙에 배치합니다.
참고 : 선언되지 않은 경우 작동하지 않습니다.
예 1 : div가 중앙에 있지 않고 자동이 작동하지 않습니다.
<style>
.cont {
margin: 0 auto;
}
</style>
<div class="cont"></div>
예 2 : div가 페이지 중앙에 배치됨
<style>
.cont {
width: 1000px;
margin: 0 auto;
}
</style>
<div class="cont"></div>
예를 들어 블록 너비 설정 자동은 부모 요소의 전체 공간을 확장하지만 블록 높이 설정 자동은 콘텐츠의 필요한 공간 만 확장합니다.
<style>
#outer{
width: 500px;
height: 500px;
border: solid 2px black;
}
#inner{
width: auto;
height: auto;
background-color: aqua;
}
</style>
<div id="outer">
<div id="inner">content</div>
</div>
참고 URL : https://stackoverflow.com/questions/4471850/what-is-the-meaning-of-auto-value-in-a-css-property
반응형
'ProgramingTip' 카테고리의 다른 글
한 문서에서 다른 문서로 조건부 서식을 비용 지불해야합니까? (0) | 2020.11.05 |
---|---|
던지기 또는 시도 잡기 (0) | 2020.11.05 |
xsl에서 템플릿의 "모드"에 대한 예제를 제공 할 수 있습니까? (0) | 2020.11.05 |
사용으로 사용할 블록을 취하는 메소드 구현 (0) | 2020.11.05 |
스마트 폰 라디오를 통해 콘텐츠를 다운로드하는 앱의 배터리 영향 감소 (0) | 2020.11.05 |