CSS_CSS/HTML의 상자(상자 모드) 분석

W3C에서 정의한 박스 패턴은 다음과 같습니다.

width와 height는 Content 부분의 너비와 높이를 정의하며, padding border margin의 너비가 차례로 바깥쪽에 추가됩니다. 배경은 패딩과 콘텐츠 부분을 채울 것입니다.
그러나 브라우저 디자인 문제로 인해 브라우저마다 표시 효과가 다소 다를 수 있습니다.
왼쪽 및 오른쪽 여백이 두 배로 늘어나는 문제
상자가 float인 경우 IE6에서 상자의 왼쪽 및 오른쪽 여백이 두 배가 됩니다.
왼쪽 내부의 왼쪽 여백은 분명히 5px보다 큽니다.
이때 inner의 표시속성을 inline으로 정의해 주세요.
외부 상자의 자동 높이 계산 문제
W3C 정의에 따르면 float 속성이 없는 외부 상자는 높이를 자동으로 계산하지 않습니다. 높이를 계산하려면 두 항목을 모두 마지막 상자에 추가해야 합니다. 내부 층.
Opera, netscape, mozilla 등은 외부 상자 높이를 계산하지 않지만 Microsoft ie6은 외부 상자 높이를 자동으로 계산합니다.

위 코드는 IE에서 배경이 검은색인데 위쪽 및 아래쪽 여백이 올바르게 계산되지 않습니다. inner2 아래에clear:both 속성이 포함된 div를 추가하면 여백이 올바르게 계산됩니다. 그러나 Firefox에는 아직 검은색 배경이 없습니다. 일반적인 해결 방법은 Clear:Both div의 높이를 정의하거나 전체 너비 공백을 삽입하는 것입니다. 따라서 높이를 추가해야 합니다. 온라인에서 더 나은 해결책은 외부 div에 오버플로 속성을 추가하고 동시에 clear:both를 사용하여 추가 높이가 추가되지 않도록 하는 것입니다.

그러므로 CSS의 외부 레이어에 Overflow 속성을 정의하고, 마지막에 내부 레이어에 Clear 속성을 추가해야 합니다.
센터링 문제
레이아웃이 레이어(컨테이너)에 포함된 경우 다음과 같이 요소의 너비를 정의하고 가로 여백을 정의해야 합니다.
중앙에 배치하려면 다음과 같이 정의할 수 있습니다. 수평으로:
#wrap {
width:760px; /* 레이어 너비로 수정*/
margin:0 auto;