CSS 에서 box(박스 모드)에 대한 분석

본 편 은 box 의 도 례 를 이용 하여 CSS 중의 box(박스 모드)에 대한 분석 을 통 해 CSS 를 배 우 는 독자 들 에 게 명확 한 모델 을 구축 하 였 다.
W3C 가 정의 하 는 박스 모드 는 다음 과 같 습 니 다.

width 와 height 는 Content 부분의 너비 와 높이 를 정의 하고 padding border margin 의 너 비 를 순서대로 추가 합 니 다.배경 은 padding 과 content 부분 을 채 웁 니 다.그러나 브 라 우 저 디자인 상의 문제 로 브 라 우 저 마다 표시 효과 가 다 를 수 있 습 니 다.좌우 Margin 의 갑절 문 제 는 box 가 float 일 때 IE6 에서 box 좌우 의 margin 은 왼쪽 inner 의 왼쪽 margin 이 5px 보다 현저히 크다.이 때 inner 의 display 속성 을 inline 으로 정의 합 니 다.바깥쪽 box 가 자동 으로 높이 를 계산 하 는 문 제 는 W3C 정의 에 따라 float 속성 이 없 는 바깥쪽 box 는 높이 를 자동 으로 계산 하지 않 습 니 다.높이 를 계산 하려 면 안쪽 마지막 box 에 clear:both 를 추가 해 야 합 니 다.Opera,netscape,mozilla 등 은 외부 box 높이 를 계산 하지 않 지만 마이크로소프트 ie6 는 자동 으로 외부 높이 를 계산한다.위의 코드 는 ie 에 검은색 배경 이 있 지만 상하 의 margin 을 정확하게 계산 하지 않 았 습 니 다.inner 2 아래 에 clear:both 속성 을 포함 하 는 div 를 추가 하면 margin 을 정확하게 계산 할 수 있 습 니 다.그러나 fireforx 에는 검은색 배경 이 없습니다.일반적인 해결 방법 은 clear:both 라 는 div 의 높이 를 정의 하거나 전각 빈 칸 을 삽입 하 는 것 입 니 다.그러면 추가 높이 를 증가 해 야 합 니 다.인터넷 에서 비교적 좋 은 해결 방법 은 외부 div 에 overflow 속성 을 추가 하 는 동시에 clear:both 를 사용 하면 추가 높이 를 증가 하지 않 을 것 이다.
따라서 외부 css 는 overflow 속성 을 정의 하고 내부 층 은 마지막 으로 clear 속성 을 추가 해 야 합 니 다.중간 문 제 는 요소 의 폭 을 정의 하고 가로의 margin 을 정의 해 야 합 니 다.만약 에 레이아웃 이 한 층(용기)에 포함 된다 면 이렇게 정의 할 수 있 습 니 다.가로로 가운데 로 정의 할 수 있 습 니 다.\#wrap{width:760px;/*층 의 너비 로 변경*/margin:0 auto;}
그러나 IE5/Win 은 이 정 의 를 정확하게 표시 할 수 없습니다.우 리 는 매우 유용 한 기술 로 해결 합 니 다.외부 에 서 는 text-align 속성 을 사용 합 니 다.이렇게:\#outer{text-align:center;}\#wrap { width:760px; /* 층 의 너비*/margin:0 auto 로 변경 합 니 다.text-align:left; }
첫 번 째\#outer 의 text-align:center;규칙 정의 IE5/Win 에서\#outer 의 모든 요소 가운데(다른 브 라 우 저 는 텍스트 만 가운데),두 번 째 text-align:left;예.따라서 중간 요소 가 있 는 css 에서 바깥쪽 css 는 text-align:center 속성 을 정의 하고 안쪽 은 margin:x auto x auto 로 정의 하 며 text-align 을 다시 정의 합 니 다.