포함하는 블록이 인라인 인 경우 절대적으로 배치 된 요소의 정확한 포함 블록은 무엇입니까?

Question

<style type="text/css"> 
body > div { 
    display: inline; 
    position: relative; 
} 
body > div > div { 
    position: absolute; 
} 
</style> 
<div> 
    <div></div> 
</div> 

내부 div의 정확한 포함 블록은 무엇입니까?

ancestor가 인라인 요소 인 경우 포함하는 블록은 해당 요소에 대해 생성 된 첫 번째 및 마지막 인라인 상자의 패딩 상자 주위의 경계 상자입니다. CSS 2.1에서 인라인 요소가 여러 줄로 분할되어 있으면 포함하는 블록이 정의되지 않습니다.

위의 텍스트에서 "처음 그 요소에 대해 마지막으로 생성 된 인라인 박스의 패딩 상자 주변의 경계 상자"의 의미는 무엇입니까?

Answer 1

인라인 요소는 전통적인 의미에서 블록 수준의 상자를 "포함"할 수 없습니다. 인라인 요소가 개별 인라인 상자로 분할되어 익명 블록 상자에있는 을 둘러싸는 블록 수준 상자에있는 인라인 요소가 분할됩니다. (인라인 상자가의 흐름 블록 레벨 상자, 인라인 박스 (같은 라인 박스 내에서 인라인 조상)를 포함

블록 레벨의 상자 주위에 깨진 : 첫 번째 예를 들어 과거 section 9.2.1.1를 참조하십시오 블로킹 가능 공백 및/또는 흐름 외 요소에 의해서만 연속 또는 분리 된 블록 수준의 형제), 인라인 상자를 두 개의 상자 (한 쪽이 비어 있더라도)로 분할하고, 레벨 상자. 중단 전과 중단 후 라인 박스는 익명 블록 박스로 묶여 있고 블록 레벨 박스는 익명 박스의 형제가됩니다. 이러한 인라인 상자가 상대 위치 지정의 영향을 받으면 결과 번역은 인라인 상자에 포함 된 블록 수준 상자에도 영향을줍니다.

이 (마지막 문장은 무례 그래서 더 번역, 여기 일이 없습니다 있습니다.)

귀하의 경우 그러나, 좀 더 특별한 외부 DIV의 시작 태그 사이의 만 일 이후 및 내부 div의 시작 태그 및 외부 div의 내부 div 및 종료 태그의 종료 태그는 요소 간 공백 (줄 바꿈 및 들여 쓰기 포함)이며 정상적인 상황에서는 collapsed이됩니다. strut과 같은 위치 : 그래서 생성 된 인라인 박스는 동일한 위치에 빈

1. 및
2. 을 끝나게.

인라인 요소에는 패딩이 없기 때문에 빈 인라인 상자의 패딩 상자는 길이가 0이고 줄 길이가 몇 배인 것으로 측정됩니다. 일부 브라우저 개발자 도구는 외부 div를 검사 할 때 십자선으로 표시된 단일 점으로 렌더링 할 수 있습니다. 내부 (절대적으로 배치 된) div의 포함 블록은 결합 된 채우기 상자의 둘레로 정의되며, 내부 div (위, 오른쪽, 아래, 왼쪽)의 오프셋은 해당 둘레를 기준으로합니다. 그러나 인라인 상자에는 내용이 실제로 없으므로 내부 div의 실제 위치는 외부 div와 같으며 은 외부 div에 내용이 있음을 유의하십시오.