[css] CSS 속성에서 ‘자동’값의 의미는 무엇입니까?

Program / 글쓴이

autoCSS 속성 값의 의미는 무엇입니까? CSS 속성의 값이로 설정되면 auto어떻게됩니까?

답변

해당 속성의 값은 요소의 내용 또는 컨텍스트에 따라 자동으로 조정 됩니다 .

예를 height: auto들어가 있는 블록 수준 요소 는 더 많은 텍스트를 포함할수록 더 커집니다. 다른 예로, 블록 요소 margin: 0 auto는 뷰포트의 y 축을 따라 중앙에 위치 할 때까지 왼쪽 및 오른쪽 여백이 증가합니다.

실제로 값을 제공하는 속성에 따라 다르며 다른 속성은 내용과 컨텍스트에 따라 다르게 작동합니다.

답변

auto는 자동으로 조정됨을 의미합니다. 내가 자동을 사용하는 가장 일반적인 이유는 다음과 같습니다.

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>

답변

때에 따라 다르지. 다음은 auto값 의 몇 가지 일반적인 용도입니다 .

높이 : 자동

요소 높이는 자식의 높이에 따라 다릅니다.

.container {
  width: 250px;
  height: auto;
  background: gray;
}

.item {
  width: 50px;
  background: orange;
}
<div class="container">
  <div class="item">
    child content
  </div>
</div>

스 니펫 확장

폭 : 자동

블록 레벨 요소의 경우 너비는 컨테이너 너비에서 요소의 수평 간격 (여백 + 테두리 + 패딩)을 뺀 값입니다.

.container {
  width: 250px;
  height: 150px;
  background: gray;
}

.item {
  width: auto;
  margin: 0 10px;
  border-left: 5px solid;
  border-right: 5px solid;
  padding: 0 10px;
  background: orange;
  font-size: 14px;
}
<div class="container">
  <div class="item">
    calculated content width is 200px
  </div>
</div>

스 니펫 확장

컨테이너가 align과 함께 유연 할 때 동작이 다릅니다.

.container {
  width: 250px;
  height: 150px;
  display: flex;
  flex-direction: column;
  background: gray;
}

.item {
  width: auto;
  background: orange;
  /* comment out next line to make width take parent's width */
  align-self: start;
}
<div class="container">
  <div class="item">
    child
  </div>
</div>

스 니펫 확장

여백 : 자동

블록 레벨 요소를 수평으로 중앙에 배치합니다.

.container {
  width: 250px;
  height: 150px;
  background: gray;
}

.item {
  width: 32px;
  margin: 0 auto;
  background: orange;
}
<div class="container">
  <div class="item">
    child
  </div>
</div>

스 니펫 확장

플렉스 컨테이너 내부의 끝까지 요소를 밉니다.

.container {
  width: 300px;
  height: 150px;
  display: flex;
  background: gray;
}

.item {
  width: 50px;
  height: 25px;
  background: orange;
  border-left: 1px solid;
}

.item3 {
  margin-left: auto;
}
<div class="container">
  <div class="item">
    child 1
  </div>
  <div class="item">
    child 2
  </div>
  <div class="item item3">
    child 3
  </div>
</div>

스 니펫 확장

답변