검색
검색

너비가 백분율 인 플로트가 형제가있는 컨테이너 내에서 너비가 픽셀 인 경우와 다르게 동작하는 이유는 무엇입니까?

debugcn 에 게시 Dev
4
나는 커피를 사랑한다 

.container {
    display:inline-block;
    position:relative;
    box-shadow: 0 0 20px 2px yellow;
}

img {
    vertical-align: bottom;  
}


.overlay {
    background-color: skyblue;
    width:;
    float:left;
}
<div class="container"> 

<img src="https://athome.reachtheworld.org/wp-content/uploads/2020/09/NYC.jpg">

<div class="overlay">
  Text
</div>

</div>

이 예제에서 float의 너비는 콘텐츠의 크기, 텍스트 및 컨테이너가 두 형제를 모두 포함 할 수있을만큼만 확장되었습니다.

이제 플로트의 너비를 픽셀 단위로 늘리면 플로트가 형제를 밀기 시작하여 컨테이너가 확장됩니다.

.container {
    display:inline-block;
    position:relative;
    box-shadow: 0 0 20px 2px yellow;
}

img {
    vertical-align: bottom;  
}


.overlay {
    background-color: skyblue;
    width:100px;
    float:left;
}
<div class="container"> 

<img src="https://athome.reachtheworld.org/wp-content/uploads/2020/09/NYC.jpg">

<div class="overlay">
  Text
</div>

</div>

스 니펫을 보려면 전체 화면을 사용해야 할 수도 있습니다.

이제 부동의 너비에 픽셀 대신 백분율을 사용하면 컨테이너는 부동의 텍스트를 포함하는만큼만 확장되고 추가 너비는 형제를 밀지 않습니다. 대신 플로트가 새 라인에서 아래로 밀리고 컨테이너의 추가 너비가 오른쪽에 표시됩니다. 왜 이런 일이 발생합니까?

또는 좀 더 구체적으로 말하자면, 플로트의 너비가 형제를 밀지 만 더 이상 공간이 없을 때까지만 플로트가 아래로 밀리고 새 줄에서 계속 확장되고 컨테이너는 원래 플로트의 너비 공간을 유지합니다. 크기.

.container {
    display:inline-block;
    position:relative;
    box-shadow: 0 0 20px 2px yellow;
}

img {
    vertical-align: bottom;  
}


.overlay {
    background-color: skyblue;
    width:10%;
    float:left;
}
<div class="container"> 

<img src="https://athome.reachtheworld.org/wp-content/uploads/2020/09/NYC.jpg">

<div class="overlay">
  Text
</div>

</div>

내 질문을 설명하는 스크린 샷이 있습니다.

스크린 샷

플로트가 백분율을 기반으로하므로 컨테이너가 그 비율을 유지해야하지만 두 형제가 백분율을 기반으로하고 그중 하나의 백분율을 늘려도 컨테이너는 여전히 너비를 유지합니다. 두 형제 모두 완벽한 100 % 너비를 가졌습니다.

내가 의미하는 바는 다음과 같습니다.

.container {
    display:inline-block;
    position:relative;
    box-shadow: 0 0 20px 2px yellow;
}

img {
    vertical-align: bottom;  
    width:90%;

}


.overlay {
    background-color: skyblue;
    width:10%;
    float:left;
}
<div class="container"> 

<img src="https://athome.reachtheworld.org/wp-content/uploads/2020/09/NYC.jpg">

<div class="overlay">
  Text
</div>

</div>

이제 두 형제가 정확히 100 %를 차지하는 것을 볼 수 있습니다.하지만 이제 float의 너비를 20 %로 만들면 더 이상 공간이 없기 때문에 아래로 밀려나지만 컨테이너는 이전과 같은 너비로 유지됩니다. 플로트가 10 % 인 것을 기준으로합니다. 이것이 내가 의미하는 바입니다. 왜 그 너비를 유지합니까?

Afif 동반

백분율에는 참조가 필요하므로 자식의 백분율 너비를 찾으려면 먼저 콘텐츠를 기반으로하는 부모 요소 중 하나를 알아야합니다. 루프가 있습니다.

이 경우 먼저 부모의 너비를 식별하기 위해 자식의 너비를 자동으로 고려한 다음 해당 너비를 사용하여 자식 요소 중 하나를 계산하고 부모 요소의 크기는 더 이상 변경되지 않습니다 (그렇지 않으면 무한 루프가 생깁니다).

이해를 돕기위한 그림이 있습니다.

.container {
  display: inline-block;
  position: relative;
  border: 10px solid yellow;
  margin:5px;
}

img {
  vertical-align: bottom;
}

.overlay {
  background-color: skyblue;
  float: left;
}
<p>Initial state</p>
<div class="container">
  <img src="https://picsum.photos/id/17/200/200">

  <div class="overlay">
    Text
  </div>
</div>
<p>let use some percentage</p>
<div class="container">
  <img src="https://picsum.photos/id/17/200/200" style="width:20%">

  <div class="overlay" style="width:80%">
    Text
  </div>
</div>
<br>
<div class="container">
  <img src="https://picsum.photos/id/17/200/200" style="width:80%">

  <div class="overlay" style="width:80%">
    Text
  </div>
</div>
<br>
<div class="container">
  <img src="https://picsum.photos/id/17/200/200" style="width:40%">

  <div class="overlay">
    Text
  </div>
</div>
<br>
<div class="container">
  <img src="https://picsum.photos/id/17/200/200" style="width:100%">

  <div class="overlay" style="width:100%">
    Text
  </div>
</div>
<br>
<div class="container">
  <img src="https://picsum.photos/id/17/200/200" style="width:200%">

  <div class="overlay" style="width:150%">
    Text
  </div>
</div>

모든 경우에 부모의 너비는 변경되지 않고 자식은 해당 너비를 계산에 대한 참조로 사용한다는 것을 분명히 알 수 있습니다. 이 너비는 처음에 텍스트와 이미지의 기본 너비를 기반으로 계산되었습니다.

픽셀 값을 사용하는 것은 복잡한 계산이없고 부모가 자식에 따라 너비를 조정하기 때문에 다른 이야기입니다.

.container {
  display: inline-block;
  position: relative;
  border: 10px solid yellow;
  margin:5px;
}

img {
  vertical-align: bottom;
}

.overlay {
  background-color: skyblue;
  float: left;
}
<p>Initial state</p>
<div class="container">
  <img src="https://picsum.photos/id/17/200/200">

  <div class="overlay">
    Text
  </div>
</div>
<p>let use some percentage</p>
<div class="container">
  <img src="https://picsum.photos/id/17/200/200" style="width:20px">

  <div class="overlay" style="width:80px">
    Text
  </div>
</div>
<br>
<div class="container">
  <img src="https://picsum.photos/id/17/200/200" style="width:80px">

  <div class="overlay" style="width:80px">
    Text
  </div>
</div>
<br>
<div class="container">
  <img src="https://picsum.photos/id/17/200/200" style="width:40px">

  <div class="overlay">
    Text
  </div>
</div>
<br>
<div class="container">
  <img src="https://picsum.photos/id/17/200/200" style="width:100px">

  <div class="overlay" style="width:100px">
    Text
  </div>
</div>
<br>
<div class="container">
  <img src="https://picsum.photos/id/17/200/200" style="width:200px">

  <div class="overlay" style="width:150px">
    Text
  </div>
</div>

보다 정확한 세부 사항은 https://www.w3.org/TR/css-sizing-3/#intrinsic-contribution 사양을 참조하십시오.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

Related 관련 기사

뜨겁다태그

보관