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

이 기사에서는 상자 그림을 사용하여 CSS의 상자(상자 모드)를 분석하여 CSS를 배우는 독자를 위한 명확한 모델을 설정합니다.

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;

그러나 IE5/Win은 이 정의를 올바르게 표시할 수 없습니다. 우리는 이를 해결하기 위해 매우 유용한 트릭을 사용합니다. 즉, 외부 레이어에서 text-align 속성을 사용합니다. 다음과 같습니다:

#outer {
text-align:center;
}
#wrap {
width:760px /* 레이어 너비로 변경*/
여백 :0 자동
텍스트 정렬:왼쪽
}

#outer의 첫 번째 text-align:center; 규칙은 IE5/Win에서 #outer의 모든 요소가 가운데 정렬되도록 정의하고(다른 브라우저는 텍스트를 가운데 정렬함) 두 번째 text-align:left는 다음과 같습니다. #warp의 텍스트를 왼쪽으로 이동합니다.

따라서 중앙 요소가 있는 CSS에서 외부 CSS는 text-align:center 속성을 정의해야 하며 내부 중앙은 margin:x auto x auto로 정의해야 하며 text-align은 다시 정의해야 합니다.