포함 된 블록에 대해 명시적인 너비 값이 지정되지 않은 경우에도 백분율 너비가 작동하는 이유는 무엇입니까?

height에 대한 사양에 따르면 요소에 포함 된 상자의 높이가 요소에서 작동하려면 (즉 모든 부모 포함 상자에 사용 된 숫자 100%의 숫자) 명시 적으로 height이어야합니다.포함 된 블록에 대해 명시적인 너비 값이 지정되지 않은 경우에도 백분율 너비가 작동하는 이유는 무엇입니까?

그러나 동일한 규칙이 백분율 width에 적용되지 않는 이유는 무엇입니까? width을 포함하는 상자에 명시적인 width이없는 요소에 백분율을 설정하면 여전히 요소의 너비가 변경된 것처럼 보입니다.

.first { 
 
    background-color: teal; 
 
} 
 
.second { 
 
    background-color: gold; 
 
    width: 30%; /* the '.second' box becomes narrower! */ 
 
    height: 40%; /* <-- doesn't have any effect   */ 
 
}

<div class="first"> 
 
    "" 
 
    <div class="second"> 
 
    "" 
 
    </div> 
 
</div>

출처

2015-02-05 rrazd

그래서 div와 같은 블록 레벨 요소의 너비를 설정하지 않아도되는지 알고 싶습니까? – arnolds

예, 너비가 50 % 인 중첩 된 div는 50 %를 차지하는 값을 어떻게 알 수 있습니까? 포함하는 블록에 명시적인 너비가 설정되어 있지 않으므로 (예 : 본문에서 파생 된 너비 100 % 및 명시 적 픽셀 너비가 없음) – rrazd

이는 블록 수준 요소이기 때문에 HTML의 모든 블록 수준 요소의 기본 너비는 100 %입니다. 왜 그들이 브라우저 창 너비에 걸쳐 있는지. 이미지, 링크와 같은 인라인 요소는 내용 길이만큼 확장됩니다. – arnolds

정상 흐름에있는 교체되지 않은 블록 수준 요소는 부모의 width이됩니다.

글쎄, 그건 lie-to-children입니다!

후드에서 일어나는 일을 이해하려면 width of a non-replaced block-level element이 계산되어야합니다.

'여백 왼쪽'+ '국경 왼쪽 폭'+ '패딩 왼쪽 :

10.3.3 Block-level, non-replaced elements in normal flow

다음 제약은 다른 속성의 사용 가치 중 보유해야 '+'폭 '+ '패딩 오른쪽 '+'보더 오른쪽 폭 '+'오른쪽 여백 폭 오토 '로 설정되어' 는 containing block

[...]의 경우 폭 = ' '이면 다른 모든'자동 '값은'0 '이됩니다 'width '는 결과 평등에서 따릅니다.

인해 width 속성의 초기 값이 auto 그 함유 블록과 동일한 것이다 블록 레벨 요소의 width 사실이다.

<html>은 블록 레벨 요소이며 initial containing block에 있습니다.

초기 포함 블록은 takes the width of the viewport 인 직사각형 박스입니다. 따라서 <html> 요소의 너비는 뷰포트의 너비와 같습니다.

한편, <body> 요소를 포함하는 블록은 <html>에 의해 생성됩니다. 따라서 그들은 동일한 너비를 가질 것입니다.

<body> 자체는 블록 레벨 하위에 대한 포함 블록을 설정합니다. 그리고 이것이 정상 흐름의 <div> 요소가 뷰포트의 너비를 차지하는 이유입니다.

W3C 더를 나타냄없이 포지셔닝

다음 문서에 포함 된 블록 (CB)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 
<HTML> 
    <HEAD> 
     <TITLE>Illustration of containing blocks</TITLE> 
    </HEAD> 
    <BODY id="body"> 
     <DIV id="div1"> 
     <P id="p1">This is text in the first paragraph...</P> 
     <P id="p2">This is text <EM id="em1"> in the 
     <STRONG id="strong1">second</STRONG> paragraph.</EM></P> 
     </DIV> 
    </BODY> 
</HTML>

같이 설립은 다음과

For box generated by C.B. is established by 
html     initial C.B. (UA-dependent) 
body     html 
div1     body 
p1      div1 
p2      div1 
em1      p2 
strong1     p2

(! 정상 유동 아직) 즉 비 대체 블록 레벨 요소의 ^{height 마찬가지 아니다 그러나

:

10.6.3 Block-level non-replaced elements in normal flow when 'overflow' computes to 'visible'
... ] 'height'가 'auto'인 경우 높이는 요소 에 블록 수준 하위 요소가 있는지 여부와 채움 또는 테두리가 있는지 여부에 따라 다릅니다.
[...] 정상 흐름의 어린이 만 고려됩니다 (즉, 플로팅 상자 및 절대 배치 된 상자는 무시되고 상대적으로 배치 된 상자는 오프셋없이 고려됩니다).

height의 초기 값은 블록 레벨 요소 height의 계산 된 값 0 될 모든 블록 레벨 어린이, 패딩 또는 테두리를 따라서없는 경우 auto이다.
That's true even for <html> element.}

출처

2015-02-05 21:22:48

내가 다른 아무것도하지를 지정하면 모든 블록 요소를 100 % 폭을 가지고 있다고 생각합니다 (예 참조). 높이가 다르게 작동합니다. 높이를 설정하지 않으면 콘텐츠의 전체 높이에 높이가 있기 때문입니다.

출처

2015-02-05 20:56:46 Tomas

포함 된 블록에 대해 명시적인 너비 값이 지정되지 않은 경우에도 백분율 너비가 작동하는 이유는 무엇입니까?

답변

관련 문제