CSS3 상자 크기로보기
오래 전에, 우리가 상자 웹 페이지에서 div, 우리가 지정한 100px 너비와 높이 모두에 대해 심 ...에 대한 10px 그리고 대략의 경계 10px 게다가.
div width : 100px; 높이 : 100px; 패딩 : 10px; 국경 : 10px 고체 #eaeaea;
브라우저는 상자의 크기를 140px로 확장합니다. 총 너비 / 높이의 140px는 심 그리고 국경 다음과 같이; 100px [너비 / 높이] + (2 x 10 픽셀 [패딩]) + (2 x 10 픽셀 [테두리]).
그러나 때로는이 결과는 우리가 기대하는 바가 아닙니다. 때로는 상자가 항상 있어야합니다. 100px 추가 된 패딩이나 테두리에 관계없이.
웹 페이지 레이아웃을 만들 때 이와 같은 반복적 인 문제를 극복하기 위해 CSS3 상자 크기 속성을 제어하는 속성 CSS 상자 모델 브라우저에서 작동해야합니다..
상자 크기 사용
그만큼 상자 크기 속성에는 두 가지 값 옵션이 있습니다. 내용 상자; 이 값을 사용할 때 상자 모델은 위에서 설명한대로 동작합니다.
그리고 두 번째 것은 국경 상자, 상자의 크기가 계산됩니다 지정된 콘텐츠의 크기를 빼서 패딩과 테두리가 추가되었습니다..
div width : 100px; 높이 : 100px; 패딩 : 10px; 국경 : 10px 고체 #eaeaea; 박스 크기 : border-box; -moz-box-sizing : 테두리 상자; / * Firefox 1-3 * / -webkit-box-sizing : border-box; / * 사파리 * /
예를 들어 위에서 설명한 것과 같은 상자 (패딩 및 테두리의 경우 100 픽셀의 정사각형)를 사용하면 콘텐츠의 크기가 60px, 상자의 전체 크기는 남아 있습니다. 100px, 여기에서 뺄셈의 방정식은 다음과 같이 설명 할 수 있습니다. 100px [너비 / 높이] - ((2 x 10px [padding]) + (2 x 10px [border])).
- 데모
- 소스 다운로드
브라우저 지원
그만큼 상자 크기 재산은이다 모든 브라우저에서 지원됨; Firefox 3.6 이상, Safari 3, Opera 8.5 이상 및 Internet Explorer 8 이상.
따라서 대부분의 방문자가 Internet Explorer 버전 8 이하를 사용하지 않는다는 것을 알고 있다면이 유용한 권장 사항을 사용할 수 있습니다 (Paul Irish에게 감사).
* 상자 크기 : 테두리 상자; -moz-box-sizing : 테두리 상자; / * Firefox 1-3 * / -webkit-box-sizing : border-box; / * 사파리 * /
위의 스 니펫은 상자 크기 웹 페이지의 모든 요소에 대한 속성.
예
이 섹션에서는 이것을 어떻게 활용할 수 있는지에 대한 실례를 보여 드리겠습니다. 상자 크기 재산. 아래의 HTML 마크 업을 기반으로 간단한 탐색을 만들고 링크 메뉴 5 개를 만듭니다..
그런 다음 몇 가지 장식 스타일을 추가합니다. 예를 들어, 네비게이션의 에 대한 너비 수정 500px 과 각 링크의 너비는 100 픽셀입니다., 그런 다음 목록 항목을 인라인하고 각 링크 메뉴마다 서로 다른 배경을 제공하므로 둘 사이의 차이점을 볼 수 있습니다.
nav width : 500px; 여백 : 50 픽셀 자동 0; 높이 : 50px; nav ul 패딩 : 0; margin : 0; nav li float : 왼쪽; nav a 디스플레이 : 인라인 블록; 너비 : 100px; 높이 : 100 %; 배경색 : #ccc; color : # 555; 텍스트 장식 : 없음; font-family : Arial, sans-serif; 글꼴 크기 : 12pt; 라인 높이 : 300 %; 텍스트 정렬 : 가운데; nav a 디스플레이 : 인라인 블록; 너비 : 100px; 높이 : 100 %; color : # 555; 텍스트 장식 : 없음; font-family : Arial, sans-serif; nav li : nth-child (1) a 배경색 : # E9E9E9; border-left : 0; nav li : nth-child (2) a 배경색 : # E4E4E4; nav li : nth-child (3) a 배경색 : #DFDFDF; nav li : nth-child (4) a 배경색 : # D9D9D9; nav li : nth-child (5) a 배경색 : # D4D4D4; border-right : 0;
이 시점에서 우리의 탐색은 정상적으로 보입니다..
그러나 링크 메뉴에 왼쪽 또는 오른쪽 테두리를 추가 할 때 문제가 발생합니다..
nav a 경계 왼쪽 : 1 픽셀 고체 #aaa; 국경 - 오른쪽 : 1px 고체 # f3f3f3;
링크 너비가 더 이상 없기 때문에 메뉴가 맨 아래로 오버플로됩니다. 100px. 지금이야 102px, 네비게이션의 전체 너비를 10px 우리가 위에서 지정한 것보다 더 길다.500px).
이 문제를 극복하려면 상자 크기 속성을 사용합니다.
nav a 경계 왼쪽 : 1 픽셀 고체 #aaa; 국경 - 오른쪽 : 1px 고체 # f3f3f3; 박스 크기 : border-box; -moz-box-sizing : 테두리 상자; -webkit-box-sizing : border-box;
- 데모
- 소스 다운로드
더 읽을 거리
마지막으로, 모험을 즐기는 사람들이라면이 주제에 대해 더 깊이 파고 들기 위해 다음과 같이 몇 가지 참조 문헌을 작성했습니다.
- CSS 상자 모델 이해하기 - Tech Republic
- Firefox에서 박스 크기 조정 버그 - BugZilla
- 박스 크기 FTW - Paul Irish
